前景提要

阮一峰总结了喜欢写Blog的人，会经历三个阶段。

  • 第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。
  • 第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
  • 第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

在过去，进入第三阶段需要付出巨大的资金成本（要花钱请人啊。。。），Github Pages的出现，极大地降低了，哦不，是削平了第三阶段的门槛，在此特别鸣谢Github。

本人去年进入了第二阶段，使用vultr+ghost+next主题折腾了一个自己算是比较满意的个人网站，并且最近两年内的博文都迁移过去了。

后来隔了一段时间没有去打理网站，然后过完年回学校，再访问时发现已经访问不了，本来以为只是服务器崩掉了，想着重新启动一下就好了，但是登陆vultr（VPS运营商）时却提示我要重新激活账户，当时以为是因为太久没有登陆vultr。激活、重新登陆之后发现看不到自己的宝贝虚拟机了，账户还欠了vultr了3.xx刀。原来是因为没钱了。。心痛啊，折腾了那么久的时间的成果就这样没了。痛定思痛之后决定不在用VPS了，去年的时候就了解过Github pages，再次仔细研究了一番，发现挺符合我的需求的，所以就决定用Github pages建站了。

建站过程中参考了很多网上的教程，但是都存在各种奇怪的问题（可能是因为教程创建后，相关组件又更新了，所以根据自己的经历，重新整理一份配置教程，供新入坑的同学参考。这里就不讲这些组件之间的关系了，网上资料很多，直接上实操。

系统环境

MacOS 10.14.2

配置Github pages

参照官网 https://pages.github.com/

下面将假设你假设你的用户名为xiaoming建立的Github Pages仓库为 xiaoming.github.io，请自行替换

自定义域名(optional，不用自定义域名的请忽略)

首先你的有一个自己的域名，然后去域名服务商那里设置域名解析，配置参照如下

然后在你刚刚创建的仓库里面增加一个新的文件CNAME，里面填入你的域名，CNAME只能放一个域名，如果你想www.xxx.com和xxx.com这两个都可以访问这个网站的话，那么CNME填写www.xxx.com，亲测如果填xxx.com，使用www.xxx.com是访问不了的。

将config.toml中的baseUrl改为www.xxx.com (此处替换成你自己的域名)

安装、配置hugo

参照官网 https://gohugo.io/getting-started/quick-start/

下面将假设你的Hugo主目录为blog

Hugo 主题

推荐我正在用的 maupassant，非常简洁，美观。

配置方法：

cd blog
git submodule add https://github.com/skydamon/maupassant-hugo.git themes/maupassant

在config.toml将theme改为 theme = “maupassant” 即可

将Github和Hugo结合起来

在githu上新建一个空的仓库用来放置Hugo，下面假设你建立的Hugo仓库为blog（和Hugo主目录同名） 然后在本地执行（后面的是新仓库的地址）

git remote add origin git@github.com:xiaoming/blog.git
cd blog #这个是前面配置的Hugo的主目录
git push -u origin master

使用hugo -t=ananke -D 来编译你的博客，生成静态网页文件。-D表示草稿也编译

执行完毕后，你会发现你的博客目录下多了一个public，实际上直接将这个public的内容上传到你的githu pages仓库里，再次访问你的github pages就可以看到hugo生成的网页内容了。

但是每次要这样手动copy显然太麻烦了，推荐将github pages的仓库设置为博客仓库的submodule

git submodule add git@github.com:skydamon/xiaoming.github.io.git #githubPages仓库地址
hugo -t=ananke -d xiaoming.github.io #子目录名称，-d表示编译文件的存放目录

然后就是git的操作了，这里不再赘述（建议写一个脚本，完成自动部署，不然每次提交还是挺麻烦的）

评论系统

使用utterance

在config.toml中加入下面的代码即可。（主题需要使用skydamon/maupassant才能支持label)

[params.utteranc]
    enable = true
    repo = "skydamon/xiaoming.github.io"    # 存储评论的Repo，格式为 owner/repo
    issueTerm = "pathname"  #表示你选择以那种方式让github issue的评论和你的文章关联。
    theme = "github-light" # 样式主题，有github-light和github-dark两种
    label = "BlogComments"  # Github Issue的标签,要先在repo里面建立这个标签

在static目录下放入log图片（ico格式），重命名为favicon.ico(实际操作发现不行，用这个名字很奇怪的不行，修改了主题的配置，现在是把文件重命名为favicon-bug.ico即可。