World rebuild

我又换博客了。

从 5 月开始到现在一直在不断的刷题忙比赛的事，一直没来得及继续写博客，算算有八个月了，大半年过去了。

最近打算集中火力写一系列文章，所以准备重新把博客弄起来。

然而，我回到 Hexo 重新 rebuild 了一下站点，60s 的生成速度实在是令人难以恭维。正巧在上个月，我听说了 Hugo 这个神器，就准备试用一下。结果这一试用，我就回不来了。花了一整天时间把博客迁移到了 Hugo，这篇文章就记录一下迁移的过程。

1. 安装 Hugo 与建站

这一步没什么难度，由于我用的是 Manjaro，直接：

1

sudo pacman -S hugo

然后就装完了。

站点的生成更简单，直接：

1

hugo new site Blog

就没了。这几步跟着官方做还是挺简单的。

2. 修改与配置主题

主题我用的是 Even，直接把它下载到 themes/even 文件夹即可：

1

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

然后把 themes/even/exampleSite 下面的 config.toml 复制到站点根目录并且修改配置。

下面是我用到的配置项：

1
2
3
4
5

defaultContentLanguage = "zh-cn" # 默认中文
archivePaginate = 20 # 归档页显示的文章条数
mathjaxEnableSingleDollar = true # 允许使用一个 $ 符号声明行内公式
[permalinks]
  post = "/:year/:month/:day/:filename" # 永久链接格式

其他配置项大家按需求配置。

3. 迁移

迁移的过程是比较痛苦的。不过这个痛苦和 Hugo 以及 Hexo 都没什么关系，是 Typora 的锅。

简单来说，Hugo 和 Hexo 支持的 Markdown 是差不多的，都是在开头使用 Toml/YAML 写 Metadata，下面用 Markdown 写正文。而我因为 Typora 的锅，又全文重新修了所有 .md 排版，还好文章不是很多。

文章的组织结构需要谈一下。Hugo 的文章都组织在 content 下面。

• 对于 index.md 文件，Hugo 的匹配路由是当前文件夹名称。比如 post/index.md，路由就是 /post/。
• 对于命名文件，Hugo 的匹配路由是当前文件夹的二级目录。比如 post/hello.md， 路由就是 /post/hello。
• 如果配置了永久链接 (Permalink)，那么 Hugo 直接按照永久链接生成路径。

比如，下面的文件夹结构：

1
2
3
4
5
6
7

.
├── about
│   └── index.md
└── post
    ├── hello
    │   └── index.md
    └── world.md

生成了下面三个路由：

• /about/
• /post/hello
• /post/world

更多的参考官方文档：https://gohugo.io/content-management/organization/。

迁移到 Hugo 之后有两个地方还是需要注意的：

• 永久链接没有插件支持了，还是回到了原来的配置方案。
• MathJax 在 Markdown 之后处理 _ 的问题回来了，在数学公式中使用 \_ 代替 _。

4. 自动构建的配置

由于 Hugo 是二进制发行，不像 Hexo 一样带着诸多依赖，使用 CI/CD 服务来自动构建博客就变得容易多了。我使用的是 Travis CI。

首先是用 git 把博客管理起来。

1

git init

然后是刚才的主题，使用 git submodule 来控制：

1
2

rm -rf themes/even
git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even

然后是生成一个 .gitignore 文件，我是用的是 http://gitignore.io 提供的 Hugo 模板：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

## Created by https://www.gitignore.io/api/hugo
## Edit at https://www.gitignore.io/?templates=hugo

### Hugo ###
### Hugo ###
## gitginore template for Hugo projects
## website: https://gohugo.io

## generated files by hugo
/public/
/resources/_gen/

## executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

## End of https://www.gitignore.io/api/hugo

然后是添加 Travis CI 的配置文件。这个是我的 .travis.yml：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

## .travis.yml
language: go
git:
  depth: 1
install: go get -v github.com/gohugoio/hugo
script:
  - hugo

## push to page service
after_script:
  - cd ./public
  - git init
  - git config user.name "{name}"
  - git config user.email "{email}"
  - git add .
  - git commit -m "Blog builds $TRAVIS_BUILD_NUMBER using Travis CI"
  - git push --quiet --force "https://${GITHUB_ACCESS_TOKEN}@${GITHUB_REPO_URL}" master:master
  - git push --quiet --force "https://{username}:${CODING_ACCESS_TOKEN}@${CODING_REPO_URL}" master:master

env:
  global:
    - GITHUB_REPO_URL: {Your github repo url}
    - CODING_REPO_URL: {Your coding repo url}

把你的信息填上去，保存到根目录。

然后就一股脑的交给 git：

1
2
3
4
5

git add *
git add .*
git commit -S -m "Initialize blog using hugo"
git remote add <Your Repo URL> origin
git push -u origin master

之后我们来到 Travis CI。使用 Github 授权登录之后应该能在 Dashboard 直接看到我们的项目已经 Trigger 了一个 Build。 这个 Build 自然是 Failed，因为两边的 Access Token 都还没有。

生成 Access Token 很简单：

• Github：右上角头像 -> Settings -> Developer Settings -> Personal access tokens -> Generate new token，记得要给到 public_repo 这个权限。
• Coding：右上角头像 -> 个人设置 -> 访问令牌 -> 新建令牌，记得要给到 project:depot 权限。

然后回到 Travis CI，点击我们的仓库，找到主面板右上角的 More options -> Settings，在 Enviroment Variables 里面填上这两个 Token。然后 回到 Current 选项卡，点击 Restart Build，稍等一会儿，是不是就成功了？

以后就直接本地写文章，然后推送到远端仓库，博客就会自动构建了。

当然，Travis CI 免费版只支持开源仓库，你也可以使用 Circleci、Jekins 或者 Netlify 等服务，无非就是下载 Hugo -> 生成站点 -> 推送到仓库三步而已。

博客迁移到这里就结束了。说实话，迁移只花了一天我是没想到的，我原以为可能还需要一两天。Hugo 的生成速度也极快，不到 1s 的时间消耗真的让人心情愉悦。

手上又挖了几个坑，2019 年集中填一波。下篇文章见！