Hugo 折腾记录

Jan 25 2018

从 1 月份开始折腾博客也快一个月了，博客的渲染引擎也从 Hexo 换到了 Hugo，因为第一次体会到了 Go 语言速度的快感和无依赖性的便利。博客的主题是基于Prince修改的Hiruko，因为改的实在太多了，不好意思再叫别人的名字了。这篇文章大概也可以看作是 Hiruko 主题正确的打开方式吧。

安装

安装 Hugo

Hugo 的安装方式非常简单，只需要从 Github 主页的Release页面下载对应平台的二进制文件即可。解压出来就是单独一个文件，可以类比成把 Hexo 当中很多包（如 hexo-generator-sitemap，hexo-generator-tag，hexo-generator-category，hexo-generator-feed 等等）打包成一个不依赖任何环境的二进制文件。

接下来就是按照 Hugo 官方的Quick Start来新建一个网站、切换主题（Hugo 默认是没有主题的，可以先跳过）、添加文章。Hugo 的官方文档非常详细，折腾过程中遇到的所有问题都能在文档中找到。

添加主题

对于主题的管理我使用了 Git 当中的 submodules 功能，这样可以让网站本身的文件尽可能地少，方便在不同的电脑上修改。

安装

git submodule add https://github.com/GenkunAbe/hugo-theme-hiruko.git themes/hiruko

启用

在网站的配置文件 config.toml 中添加 theme = "hiruko".

更新

git submodule update --recursive --remote

可选功能

MathJax

说实话很早之前就知道了 Hexo 这个强大的静态网站渲染工具，但因为错误地认为它不能支持数学公式，就一直没尝试。后来知道 MathJax 后才真正开始考虑静态网站。

对于那些需要加载 MathJax 的文章，只需要在开头添加 mathjax: true 。

在文章中行内公式的写作方式为 `$ $`，行间公式为 ```$$ $$```，这么麻烦就是因为那个经常会被拿出来讨论的 Markdown 和 MathJax 的兼容性问题了。在这方面 Hugo 就没有 Hexo 那么方便，毕竟 Hexo 的 renderer 是一个可以更换的组件，不像 Hugo 已经把 renderer 集成在二进制文件中了。将数学公式加入代码块中之后，Markdown 的 renderer 就不会试图去理解数学公式代码的内容了，直接原样输出到 <code> 标签里面。在这里用到了Yihui Xie的脚本，其检测那些里面长得像数学公式代码的 <code> 标签，把标签去掉，让 MathJax 来渲染。

Disqus

虽然 Disqus 在国内需要科学上网才能加载，但是国内也没什么比较美观同时没有备案风险的评论插件了，最重要的还是这个破站并没有什么评论的需求，所以也不用太麻烦了。

使用方法是在网站的配置文件 config.toml 里面加入 Disqus 的用户名：

[params]
    disqus = "genkun"

竖排（Vertical Layout）

这个奇怪的需求真的可以说是拍脑袋来的了，很久之前看到知乎上楊端憲的一篇回答，当时感觉真是好看啊。制作主题的时候正好第一篇文章是那种全是中文的，便尝试改成竖排看了一下，嗯，效果不错，就这样吧。

在实现网页中竖排的过程中我才发现，原来要想在浏览器中实现文字竖排，坑特别多，虽然 CSS 标准已经有了近乎完美的方案，但是各大浏览器的支持情况各不相同，各有优劣。第一次如此深刻地体会到更新浏览器内核的重要性。

使用的方法就是在文章开头添加 vertical: true 。

在线字体（WebFont）

一直想在网页中随心所欲地使用字体，不需理会终端上该字体是否已经安装。在网页的 UI 上使用非衬线字体，显得更现代化，在文章内容上使用衬线字体，显得更正式一点，于是 Adobe 开源的思源宋体和思源黑体就很完美。然而中文字体体积实在太大了，不可能把字体文件下载好了再显示网页。

于是就发现了font-spider这个强大的工具，可以网页中用到的字符的字形从原始字体文件中提取出来，一般提取之后的字体文件大小在 200KB 左右，虽然在加载的时候是有点慢，但还在接受的范围内了。

另外，由于 font-spider 是用 node.js 写的，然而我很不想安装那么多依赖，于是又用到了nodec将 font-spider 打包成一个单独的二进制文件。（我发现不管多么奇怪的需求，总会一些很厉害的实现。）

部署

部署方式

由于在部署之前有现在本地预览的习惯和需求，并且发布一篇新文章还需要重新构建字体文件，所以没有使用现成的自动部署工具，仅仅是写了一个脚本来将渲染好的静态 HTML 文件通过 Git 的方式更新。

下面是一次完整的渲染、字体压缩、部署的流程，不写脚本的话还挺麻烦的：

# font-spider 的一个 Bug，只能使用绝对的 CSS 路径，所以需要临时改一下。
sed -i.bak "s@\/css\/@$(pwd)\/public\/css\/@" themes/hiruko/layouts/partials/header.html

# 生成 public html
rm -rf public
./hugo

# 完整的字体文件放在 .font-spider 目录下，需要先移到其上一层目录
for file in $(find public/fonts -regex "^.*\.font\-spider\/.+ttf")
do
    echo mv $file ${file/\.font\-spider\//}
    mv $file ${file/\.font\-spider\//}
done

# 重新构建字体
find public -name '*.html' | xargs ./font-spider

# 将新字体放回原位置（这样下次没有更新字体的需求的话可以不用每次都重新构建字体）
rm -rf themes/hiruko/static/fonts
cp -R public/fonts themes/hiruko/static

# 将刚才临时改过去的路径再改过来
mv themes/hiruko/layouts/partials/header.html.bak themes/hiruko/layouts/partials/header.html

# 重新生成 public html
./hugo

# 删除 public 里面的用于备份的完整字体文件，减小网站的体积
find public/fonts -type d -name ".font-spider" | xargs rm -rf

# 将更新的网站复制到用于部署的 Git 目录并 Commit 和 Push
rm -rf .deploy_git/*
cp -R public/* .deploy_git/
cd .deploy_git
git add -A
git commit -a -m "Update Site"
git push deploy master

服务器

其实可以直接部署到 Github 上，使用 Github 自带的Github Pages功能。然后就没什么事了。

然而 Github 的速度实在太不稳定了，墙内的体验不太好，所以一开始我是将网站部署到自己的 VPS 上面的，配合 Nginx。

后来无意中又发现一个很好的网站Netlify，支持自动从 Github 目录中拉取最新代码，支持自定义域名，全球 CDN，免费的 SSL 证书（一键支持 HTTPS），甚至直接支持 Hexo、Hugo、Jekyll 的构建，可以说是十分地完美了，把网站迁移过去的过程十分地轻松，没有任何困难。

最后

折腾网站的进程真的要告一段落了，目前已经到了比较舒适的程度了，接下来好好搭建一下内容才是正事。

Misc , Blog