我刚开始建博客的时候用的是WordPress,后来觉得太笨重了,就切换到了Typecho。后来Typecho爆出过几个漏洞,也正赶上Hexo、Hugo这类的静态博客生成器的兴起,我最终选用了Hugo这个静态博客生成器。

之前也用过Hexo,不过它那个node_modules占用了不小的空间和大量的冗余文件,这也是驱使我尝试Go语言写的Hugo的主要原因。

Typecho文章转Hugo

将Typecho的文章转Hugo的Markdown格式,我使用的是Export2Hugo这款Typecho插件。不过导出的压缩包是个损坏的文件,估计是压缩问题。根据作者的提示,可以直接去服务器的/tmp/Export2Hugo里面直接取转换好的文件。

Hugo配置

我目前使用的是PaperMod这款主题,很简洁。Hugo的配置文件如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
baseURL: "https://blog.sunyiming.top/" 
languageCode: zh
defaultContentLanguage: zh
title: Steven Sun's Blog
theme: PaperMod

googleAnalytics: UA-*** # 填入你的统计代码

permalinks:
  # 文章链接格式'/archives/[文章自定义链接名(在文章开头以slug: ***的形式指定])/'
  posts: '/archives/:slug/' 

# 文章顶部目录,
# archives 和 search 这种特殊页面
# 要按文档(https://github.com/adityatelange/hugo-PaperMod/wiki/Features)建立占位页面
menu:
  main:
    - identifier: home
      name: 首页
      url: /
      weight: 10
    - identifier: archives
      name: 归档
      url: /archives/
      weight: 20
    - identifier: categories
      name: 分类
      url: /categories/
      weight: 30
    - identifier: about
      name: 关于
      url: /about/
      weight: 50
    - identifier: search
      name: 搜索
      url: /search/
      weight: 60

# 输出格式,要启用搜索功能 JSON 格式是必选的
outputs:
  home:
    - HTML
    - RSS
    - JSON

# 主题相关的一些参数
params:
  # homeInfo模式下设置博客标题
  homeInfoParams:
    Title: Steven Sun's Blog
    Content: Through the stars There we'll find a place to be
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  description: "Steven Sun's Blog"
  author: Steven Sun
  # 日期格式,根据 Go 语言要求,必须填入 2006 年里的这个固定的时间
  DateFormat: "2006-01-02 15:04"
  # 显示剩余阅读时间
  ShowReadingTime: true
  ShowCodeCopyButtons: true
  ShowFullTextinRSS: true

pangu.js

pangu.js可以为中英文字符之间加上空格,使文章排版更美观。首先在他们的GitHub仓库中下载js文件,放入Hugo中的static文件夹里面,themes\PaperMod\layouts\partials\head.html中填入以下代码即可:

1
2
3
4
5
6
7
8
<!-- Pangu.js -->
<script src="/pangu.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // listen to any DOM change and automatically perform spacing via MutationObserver()
        pangu.autoSpacingPage();
    });
</script>

GitHub Action自动构建并通过SSH/SCP发布至服务器

我目前的Hugo写作流程是这样的:本地hugo new posts/[postname].md -> git push到GitHub的私有仓库里面 -> GitHub Action自动构建并将文件通过SSH/SCP上传至自己的服务器中。

GitHub Action的配置文件如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
name: Hugo CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    steps:
      - name: Checkout master
        uses: actions/[email protected]
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
          
      - name: Setup Hugo
        uses: peaceiris/[email protected]
        with:
          hugo-version: '0.91.2'
          extended: true

      - name: Build Hugo
        run: hugo
        
      - name: copy file via ssh password
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }} # 这个要到仓库 Settings 中自己设置
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          source: public/*
          target: ${{ secrets.REMOTE_LOCATION }}
          strip_components: 1 # strip_components 命令去除目录结构

参考