用 hugo 和 netlify 搭建blog

距离上一次搭建blog已经超过两年了，这两年并不是懒得写东西，而是实在是懒得折腾hexo了。 在看了好几种方案之后，最终还是选择了hugo。

why hugo?#

比较流行的静态blog生成方案包括：

• jekyll 需要ruby支持，也是gihhub上支持最好的方案。
• Octopress 基于jekyll的增强方案。
• hexo 基于nodejs，也是我之前一直在折腾的方案。
• pelican 基于python。
• hugo 基于Go语言的静态网站生成工具。

选择hexo之前，我一直在用wordpress写blog，wp是一个非常笨重的系统（虽然也很强大）。

需要自己经常去看一下主机的情况，而且修改主题复杂的要命。

hexo解决了哪些问题呢？

• 不需要主机的经费支出
• 基于nodejs，技术栈相对友好，易于二次开发

但在后面的实际使用中，我发现hexo带来了更多的问题。

首先是版本更新，每次hexo发个大版本，更新的时候99.5%都会报错，然后无法渲染页面，这时候就需要到google上去找解决方案，为了这个问题我都把主题重构过好几遍了。

其次是渲染问题，因为静态blog需要本地渲染，所以所有要写作的设备上都需要装一遍hexo（以及npm还有一大堆的包），然后你还得 祈祷 这些hexo的版本是一致的，这样渲染出来的页面才不会报错。

这两个问题实在是太痛苦了！

以至于这两年的文字写作都转移到了简书和微信公众号上。

直到我看到了hugo，不由得眼前一亮！

hugo超级轻量，平台随意安装，没有包管理的问题（就是说你呢，npm）

hugo没有任何主题依赖，安装好之后里面真的 什么都没有。

你会发现这几个文件夹里几乎全是空的。

hugo速度超快，目前为止这个blog中大概有十几篇文章，每次生成全站的速度都不超过10ms，也能做到实时预览，真是爽快！

hugo 第一步#

首先，找到安装包，点这个链接找到你需要的版本，只有 6MB 大，真是感动的要哭了……

当然作为mac用户你也可以选择输入 brew install hugo 来快速安装。什么，你不知道brew，哪你不妨先搜索一下brew吧。

找到对应的文件路径，输入

hugo new site yoursitename

就创建好了文件夹，里面包括了以下的文件结构：

• content 用来放文本和页面内容的地方
• archetypes 用来放 .md 文件的模板
• data 用来放特殊定义的数据（json yaml之类的）
• layouts 用来放页面模板，也是我们后面会魔改的地方
• static 用来放静态文件
• themes 主题
• public 用来存放渲染出来的静态文件

hugo server 

会在本地启动一个服务器，可以访问 http://localhost:1313 看一眼。

当然这个链接里面完全是空的，什么都没有，毕竟文件夹里全部都是空的，没有内容也没有主题。

添加主题#

添加主题其实很方便，首先到hugo的主题官网看一下，挑选一个心意的主题，或者到github上搜一个star数高的也行。

我为了魔改方便，选了一个非常非常轻量的主题 hugo-paper，作为blog的主题。

cd yoursitename/
git submodule add https://github.com/nanxiaobei/hugo-paper.git themes/hugo-paper;

然后修改根目录下的 config.toml ，这是blog中的基本设置，其中有几个比较重要：

baseURL = ""
# 主机名称，后面会提到
title = ""
# blog的标题
theme = "hugo-paper"
# 使用的主题，对应 /themes/你的主题名称

其他还有很多有用的参数，想要了解可以看这里。

有了主题之后，就差添加第一篇文章了！

第一篇文章#

hugo new post/fisrt-post.md

就会在 content/post 下新建一个md文件，只需要编辑里面的内容，比如加一句 hello world ，马上就能在浏览器中看到渲染出来的文章了，速度非常快。

如果想要添加其他的文章，只需要继续新增文章即可。至于怎么新增其他类型的文章，或者应用文章模板，我们后续再说。

github page 够用吗？#

之前用hexo的时候一直在使用github page，算是比较稳定的免费服务，但是体验上比较差的地方在于github page 的页面渲染需要在本地完成然后发 commit 上去。

然而hexo的编译经常出问题，三天两头报错，因此我看了其他的方案。

首先是用 Travis-CI 的方式，通过自动化追踪的方式来部署页面，大概需要这么做：

1. 生成github token
2. 用 travis ci的命令行工具加密token，然后把这个配置到配置文件中。
3. 用 travis ci 向 page 页面的 gh-pages 提交渲染后的静态文件

能配置倒是能配置，就是太麻烦了。

Netlify 闪亮登场！#

通过朋友的介绍，我找到了 netlify 这个服务。

它对自己的定义是：

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning. 一个包含全球部署，持续化集成以及自动 HTTPS 的全能工作流。

使用它很简单，包括三步：

1. 连接 git repo：支持 github gitlab 以及 bitbucket。
2. 添加编译设定：比如设定分支，编译命令，以及输出的文件。
3. 等待自动部署好。

对于免费用户来说，流量和部署速度都没有打折，还是非常贴心的。

Netlify 使用指南#

想要和 hugo 联动也是非常的简单。

首先连接 github 账号，在 repo 列表中找到对应的 repo。

netlify 会读取出来这个 repo 的类型，如果是 hugo 就会自动填写上 bulid command 和 publich directory。

我们不用管这个，直接点最下面的 Deploy site。

稍等一下，页面就会自动部署完，你可以在 Deploys 的页面中看到每一次部署的结果，如果后面有一个 Failed 标志，说明部署失败了。

如果一切正常，那么你之后的每一次 git 提交，都会触发 netlify 重新编译部署一次页面，很快blog 就展示全新的内容了，这种感觉非常爽！

设置自定义域名和 HTTPS#

在 netlify 中当然也可以设置自定义域名，点击 Settings，找到 Domain management，就可以添加自定义域名了。

netlify 本身也会给你生成一个默认的二级域名，也是可以用的。

添加域名的过程其实就是在 DNS 服务中增加一个 A 记录的转发，我使用的是 DNSPOD，在设置中直接新增一条，将根域名 wocai.de 转发到 netlify 提供的 ip 地址上就好了。

netlify 还提供了免费的 https 证书服务，证书由 Let’s Encrypt 提供，一键点击即可，非常之方便。

后记#

在告别了 wordpress 和 hexo 之后，我最终选择了非常轻量的静态生成器 hugo 和优秀的部署服务 netlify，经过合理的组合，终于不用再每次编译提交了。

但超级轻量的 hugo 带来了另外一个问题，太简单了，什么都没有，这意味着所有的功能都需要自己研究然后改造模板。这部分内容留着下次说罢。