懒惰了好多年，最后还是决心把所思所感记录下来。更何况，写的过程就是最好的思考过程。

从一开始就没考虑使用线上的blog服务，作为一个有开发经验的人，总希望自己架设服务做更多的定制化。不考虑传统的CMS或Blog系统，因为要部署DB、Web服务器等，对服务器资源要求较高，而且易存在安全性隐患。进入最终选择范围的是4个静态站点生成应用，分别是hexo，gatsby，hugo，zola。他们都具备安装简单，采用CLI管理，支持github page，netlify-cms等环境自动更新部署等特点；

具体差别如下：

	开发语言	优点	缺点
hexo	node.js	1. 架设过程简单方便； 2. 主题多而且都比较精美； 3. 默认模板采用ejs，需要自定义模板时，学习成本很低； 4. 中文版文档，但比较简单；	1. 安装时会自动下载一个github上的项目用于初始化，在命令行环境没有翻墙的情况下，过程有时很慢； 2. 静态站点生成速度较慢，特别是在文章较多或者模板复杂时； 3. 可订制性相对较弱，但在4个工具中也是即插即用性最好的，有利有弊；
gatsby	node.js + react	1. 架设过程简单方便； 2. 主题较多，官方称之为starter； 3. 文档详实(英文)； 4. 社区活跃，扩展插件众多； . 使用了graphQL, webpack等现代化工具，项目源码可视做JavaScript全栈开发的范例；	1. 安装时需要指定一个starter theme，安装过程会从github上下载，在命令行环境没有翻墙的情况下，过程有时很慢； 2. 官网提供的各类starter主题模板，安装后都需要做一些自定义的修改，需要具备react知识； 3. 生成静态站点速度较慢，曾安装了一个较复杂的starter后，在只有2篇文章的情况下，生成站点耗时80s+；
hugo	go	1. 生成静态站点速度极快； 2. 文档详实(英文)；	1. 官网主题库普遍较丑，数量不如hexo和gatsby多； 2. 采用go语言的模板语法，对前端开发者有学习成本，这应该也是主题较少较丑的原因； 3. 扩展插件少，不过系统本身功能已经很丰富；
zola	rust	1. 生成静态站点速度极快； 2. 文档较详实、清晰；	1. 模板太少太丑； 2. 模板语言采用tera，类似python的Jinja2，前端开发者需要学习；

言而总之，如果不想折腾，强烈推荐hexo，选择一个合适的主题就基本完毕了。想折腾的，选hugo、gatsby，折腾强度参见我列举的顺序。毕竟有很多人只是想写写文章，并不想花时间在建站上。至于zola，虽然开发者比较勤奋，但该项目还在完善中，暂不推荐使用。无论是个人站点还是企业站点，这几个工具都适用。主要还是看负责建站和管理的人的知识结构和经验。

实际上，hexo和gatsby在通过webhook+docker(或netlify等第三方托管服务)实现自动化部署后，那种等待站点生成的煎熬过程就完全不存在了。本人最终选择了hugo，只因对系统执行性能有种偏执的热衷。选择了“ezhil”这个非常简洁的主题，简单又耐看。

hugo的安装，请见官方安装说明。文档是英文的，但很简单。网上hugo的中文资料也不多，如果决定了要在hugo上折腾，看官方文档是必不可少的。要注意的是官方列举了不同操作系统上的安装方法，如果本地测试使用的是MacOS，而真正要部署的环境是Linux，就要注意区别了。

这里主要说一下要注意的几点。

1. 本地测试尽量要用“hugo server -D”命令启动服务，所有改动都会立即起效，避免受草稿文档的影响。
2. 如果要对主题的源代码进行修改，而且也不打算把代码提交合并到官方库，建议下载zip包后复制到themes目录下，而不是按官方的“git clone”方式安装。
3. 每个主题自带的config.toml都不是完整的配置，比如语言相关配置一般都默认是en。想了解完整的配置，还是要看官方的最新文档。要注意的是第三方托管服务使用的hugo版本会滞后，比如netlify，所以会出现最新版hugo新增的配置无法生效的情况。
4. 每个主题包都包含一个“exampleSite”目录，即样例站点，用来看demo效果。配置冲突出错时，也可以用来参考。
5. 主题目录下的“archetypes/default.md”，是”hugo new xxx/xxxx.md”命令采用的模板，修改它就能让之后新建的文档使用最新的描述格式，专业名词叫做“front-matter”，具体参考官方文档。
6. 使用”hugo new xxx/xxxx.md”命令新建文档时，可以使用不同的目录路径，程序会自动在content目录下创建相应的子目录。新建子目录后，如果目录下会有多篇文章，还需执行“hugo new xxx/_index.md”命令创建一个空文档，即通知系统进行目录索引，上述例子中的xxx为目录名。

最后介绍一下免费的第三方托管服务。hugo除了支持GitHub、 GitLab,、Bitbucket这些源码管理提供的Page服务外，还支持Netlify,、Render这些第三方站点托管服务。完整的支持列表见官方文档。这里只介绍Netlify，其提供免费的托管、SSL证书和Netlify-CMS管理后台，并支持GitHub实时自动部署。

基础准备

• 注册GitHub账号，并将完整的Hugo站点提交到GitHub上进行源码管理，项目建议用Private仓库；
• 登录Netlify账号，官方网站地址，支持GitHub、GitLab、Bitbucket的SSO登录，这里选择与hugo站点使用的源码管理服务；

操作步骤

Netlify的建站流程做得非常好，第一次使用只要跟着页面提示就能完成。这里还是做一下简单介绍，以下所有步骤均以使用GitHub为例，其他源码托管服务差别不大，请按照每步骤页面中的提示操作即可。

STEP 1: 登录Netlify后，点击页面上的“New site from Git”或者“Get start for free”，开始建立站点，首先选择hugo站点正在使用的源码管理服务，我们这里选择了GitHub，如下图所示：

[图1]

STEP 2: 在输入框中填写hugo站点项目在GitHub上的名字，回车后从下方列表中选择正确的项目，然后点击该项目即可进入下一步，如下图所示：

[图2]

STEP 3: 选择要构建的分支和部署的目录，默认是获取git项目的master分支，部署目录是hugo站点下的public子目录，如果没有特殊要求，这一步不用修改，直接点击“Deploy Site”进入下一步，如下图所示：

[图3]

STEP 4: 到这里一个Netlify站点已经建立完毕，在页面上可以看到站点的名称，也就是站点的子域名，举例名字是“random-ball-4567”，那你现在就可以用”random-ball-4567.netlify.com”来访问你的网站了。当然这个名字是可以修改的，点击页面上的“Site Settings”进入站点设置，然后在Site Detail页面选择“Change Site Name”，在弹层里输入新的名字即可，这里仅支持字母、数字、横杠。点击“Save”后，就可以用新域名访问站点了。步骤如下图所示：

[图4]

[图5]

[图6]

STEP 5: 接下去我们来设置持续集成，这样以后只要把任何新的改动（包括新建文章）push到GitHub仓库，Netlify都会自动拉取最新文件并完成部署，完全不用操心了。首先需要创建一个Webhook，用于接收请求来触发构建流程。选择左侧菜单路径“Build & Deploy -> Continuous Deployment”，然后在右侧页面下拉找到“Build hooks”，随便给webhook取个名字，然后点击“save”即可获得一个webhook地址。步骤如下图所示：

[图7]

[图8]

STEP 6: Netlify的页面保留不要动，新开一个窗口访问GitHub。进入hugo站点项目首页，选择“Settings”，然后在左侧菜单选择“Webhooks”，再点击右侧页面上的“Add Webhook”，在新页面的“Payload URL”栏里粘贴刚才Netlify页面上生成的Webhook地址，其他都不用改，直接提交即可。步骤如下图所示：

[图9]

[图9]

[图11]

STEP 7: 在GitHub上添加Webhook后，默认会发起一次请求，触发Netlify获取最新代码进行构建。现在也可以push一些新改动到GitHub上，如果是新文章注意页头的draft属性需要设为false。在Netlify的Deploy菜单下就能看到每次构建的日志，点击还能看详情，如果出错，也会显示错误信息。如下图所示：

[图12]

如果你想用自己的域名，那么接着往下看。

STEP 8: 先去自己的域名管理后台，添加一笔域名解析记录，注意记录类型必须选择CNAME，代表指向另一个域名而非IP。这里以阿里云为例，如图所示：

[图13]

STEP 9: 上述解析生效一般需要几分钟。然后再进入Netlify的域名管理页面，填写刚才新建的域名，点击“Verify”系统会校验域名是否有效，如果失败，可能是解析还没生效，可以等5-10分钟后再试。校验成功后会再一次确认域名是否正确，选择Yes提交。如图所示：

[图14]

[图15]

[图16]

STEP 10: 添加域名成功后，页面会自动跳转到HTTPS设置。如果使用域名管理服务提供的SSL证书，则可跳过这一步。要添加的SSL证书属于Let’s Encrypt，整个添加过程完全自动，只需验证DNS配置，点击“Verify DNS Configuration”，只要前面新增的域名没有错误，一路确认下去就完成配置了。现在新域名已经默认改为https访问了。如下图所示：

[图17]

到此，已经完成了一个基于GitHub和Netlify的自动化构建的站点，而且拥有一个带SSL的二级域名(xxx.netlify.com 或者你自己的域名)。

下一篇再介绍如何使用Netlify-CMS和Netlify Identity