在 GitPage 上部署 Hugo 博客

缘起

之前一直尝试者在别的平台上写东西,可是有些文章莫名其妙的就被锁定,无法被其他人查看了,我并不反感这些平台锁定文章,只是它也不给你指明你到底犯了什么错,发邮件也没人回。所以我就想找个可以有一定自主权的文章发布地。
最终我选择了 Hugo + GitPage 的组合。
在 GitPage 上部署 Hugo 的教程五花八门,也没几个真正解决了我的问题,最后还是得靠 官方文档
下面就是整个部署过程。
PS:
 1. 请替换下面的 <your-github-id> 为你自己的 GitHub 用户名。
 2. 我在文中使用的主题目录为 temple,这个目录名根据你自己的情况进行修改
 3. 下面有些命令前的 $ 代表命令输入符,在复制代码时,请不要复制 $

本地搭建

先在 GitHub 上创建一个名为 your-github-id.github.io 的仓库
在你的电脑上安装 git 和 hugo
并且确保你已经把 本机的 ssh 公钥添加到了 GitPage。
安装好 hugo 之后,使用下面的命令创建一个新的站点目录:
$ hugo new site <your-github-id>.github.io
之后,如果你看到类似下面的信息,证明你创建成功了:
 Congratulations! Your new Hugo site is created in /home/wagoo/Documents/test/dianabnjiu.github.io.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
你可以使用下面的命令看一下站点目录的基本结构:
$ tree <yur-github-id>.github.io
dianabnjiu.github.io
├── archetypes  # 存放你的文章之类的模板
│   └── default.md  # 默认模板
├── config.toml # 配置文件
├── content # 文章的存放位置
├── data
├── layouts
├── static
└── themes  # 主题的存放位置
了解了大概的目录结构之后,进入 themes 目录下,并 在这里 找一个你喜欢的主题,把它用 git 下载到本地,下面以 temple 为例:
$ cd themes
$ git clone https://github.com/aos/temple.git temple
在下载完毕之后,进入 temple 目录,其中有一个名为 exampleSite 的目录,用 exampleSite 下的 config.toml 和 content 替换掉你主站点目录下的 config.toml 文件和 content 目录。
把 config.toml 文件里根据注释修改一下(注意:一般把 baseURL 留空,也就是说 baseURL = “”)。
把主站点目录下的 content/posts 下的文章删掉,然后使用下面命令创建你的第一篇博客:
$ hugo new posts/helloworld.md
可以看到 content/posts 目录下多了一个 名为 helloworld.md 的文件,里面已经有了一些内容,这些内容就是在 archetypes/defaults.md 中预设的。你可以根据自己的需要修改这个文件。
然后向 helloworld.md 中添加一些文字,结束之后保存。
在主站点目录下执行下面的命令:
$ hugo server -D
在浏览器输入 http://localhost:1313/ 可以预览你的站点。

部署至 GitPage

预览完成后,如果你觉得可以的话,就可以开始把站点部署到 GitPage 了。
使用下面的命令将主站点目录初始化为一个仓库,并将该目录与你在 GitHub 上一开始创建的 your-github-id.github.io 连接。
$ git init
$ git remote add origin https://github.com/your-github-id/your-github-id.github.io.git
检查一下主站点目录下是否有一个名为 public 的目录,如果有的话,删除它,没有的话就可以执行下面的命令为站点创建一个子模块了(这一步必需):
$ git submodule add -b master git@github.com:your-github-id/your-github-id.github.io.git public
然后使用下面的命令编译所有的内容到 public 目录
$ hugo -t temple
结束之后,就可以进入 public 目录把它 push 到 GitHub 了:
$ git add .
$ git commit -m "new blog site"
$ git push origin master
稍等片刻,你就可以在浏览器输入 your-github-id.github.io 查看你的博客了。
如果你想使用自己的域名,先给你的域名添加一条 CNAME 记录指向 your-github-id.github.io,然后在你主站点目录下的 public 目录中新建一个名为 CNAME 的文件,文件里的内容就是你的域名,最后再一次把 public 目录 push 到 GitHub,稍等片刻就可以使用你自己的域名访问你的博客了。
之后每次在写完文章之后,要发布的时候都需要运行一遍下面的命令:
$ hugo -t temple
然后进入 public 目录把其中的内容 push 到 GitHub。
好了,就是这么多内容了。希望对你有所帮助。
:)

此博客中的热门博文

pandoc 简单使用

在 Virtual Box 中安装 Remix OS