Hugo博客的搭建

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

昨天花了很多时间用Hugo与GitHub Page连接，搭建起了一个博客。

与以前搭建Hexo相比，Hugo对搭建环境的要求确实较低，过程也比较简单快速。

Hugo的安装

Hugo的安装相当简单。只需要下载exe文件，并将exe文件所在的目录添加到系统环境变量即可。如图：

添加好环境变量后，在命令行输入

hugo version

即可查看安装信息。

如图。

网站的搭建

安装成功后，进入任意目录，在cmd输入

hugo new site /directory

即可在你进入cmd的目录下创建一个directory目录，用来存放静态网站的源文件。目录的结构如下：

  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml

其中 config.toml文件中是页面的配置信息，决定了页面的外观。

安装主题

静态网站的文件已经生成了，但是现在生成的网站会是空白，因此需要安装主题。

Hugo在 https://themes.gohugo.io/ 提供了许多的主题 （虽然暂时还没有Hexo多）。可以浏览该网站，选择自己喜欢的主题。

安装主题可以直接进入主题页面下载压缩包，也可以在控制台使用 git clone命令下载。主题存放在directory/themes/ 目录下。

主题安装好后，进入主题文件夹中的exampleSite 目录，复制里面的文件，覆盖粘贴到根目录，这样在生成网站时就有了模板。

生成网站

运行

hugo server

命令，在浏览器地址栏输入 localhost:1313可以预览生成的网站。

部署到GitHubPage

首先，在GitHub上需要有一个名为 username.io 的仓库（username代表GitHub用户名，必须完全相同）。这样才能获得一个域名为username.github.io的GitHubPage。

打开根目录的config.toml文件，进行如下修改：

baseUrl="https://github.com/username/username.io/"

注意最后的反斜杠一定要加上!

之后执行命令

hugo --baseUrl="http://username.github.io/"

注意，以上命令并不会生成草稿页面，如果未生成任何文章，请去掉文章头部的 draft=true 再重新生成。

如果一切顺利，所有静态页面都会生成到 public 目录，现在需要将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

第一次执行过程会需要输入GitHub的账号和密码，进行身份验证。

书写文章、更新

搭建好网站只是第一步。现在问题来了：应该怎么更新博文呢？静态网站发表文章远不如在线博客方便，而是需要本地写好后再生成。并push到GitHubPage的仓库里，才能实现博文更新。

博文默认存放在\content\post目录下。可以直接在该目录创建md文件，也可以在根目录执行

hugo new post/article.md

这样生成的markdown文件会自动起一个标题，并生成发表时间。

写好markdown文件后，便可以发表了。如上面所述，先在本地生成。现在需要提交到线上：

cd public
git add -A
git commit -m "xxxx"
git push -f origin master

稍等一下再进入网站，应该就可以看到写好的博文辣！

ps

一开始发现提交到GitHub上之后，GitHub仓库页面什么都没有……然而网页还能正确显示，我不禁 ？？？

然后发现原来GitHub现在的主分支默认名字叫做main了……master被隐藏了

我tm直接好家伙