换博客了。

从 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 免费版只支持开源仓库,你也可以使用 CircleciJekins 或者 Netlify 等服务,无非就是下载 Hugo -> 生成站点 -> 推送到仓库三步而已。


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

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