由于之前Hexo的NexT主题加载实在太慢,关闭加载动画之后还是很慢。索性换一个新的博客框架。

安装Hugo

Hugo Releases 下载适合你的操作系统的版本。

hugo (或者是 Windows 的 hugo.exe) 放到你的 环境变量 PATH 所在的目录,因为下一步我们将会用到它。

更加完整的安装指南请参考: Installing Hugo

配置主题

1hugo new site hugo-blog
2cd hugo-blog
3git init
4git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
5cp -a themes/hugo-theme-bootstrap/exampleSite/* .
6hugo mod npm pack
7npm install
8hugo server

配置作者信息

 1name = "jimyag"
 2avatar = "images/spider-man.jpg" # static/images/spider-man.jpg
 3bio = "Gopher"
 4location = "Shanghai"
 5
 6[params]
 7  #layout = "compact"
 8
 9[social]
10  email = "jimyag@126.com"
11  github = "jimyag"

配置全站信息

这里也顺便配置备案信息

 1baseURL = "https://jimyag.cn"
 2title = "步履不停"
 3theme = "hugo-theme-bootstrap" # install via git submodule
 4copyright = "Copyright © 2019-{year} jimyag. All Rights Reserved. 陕ICP备2020018182号-1" # 备案信息
 5
 6# Multilingual mode
 7defaultContentLanguage = "zh-cn"
 8defaultContentLanguageInSubdir = false # If you use only one language comment this option
 9
10# Pagination
11paginate = 10
12
13enableRobotsTXT = true
14
15enableEmoji = true
16
17pygmentsUseClasses = true
18
19[blackfriday]
20  hrefTargetBlank = true
21
22[mediaTypes]
23  [mediaTypes."application/manifest+json"]
24    suffixes = ["json"]
25  
26[outputFormats]
27  [outputFormats.MANIFEST]
28    name = "manifest"
29    baseName = "manifest"
30    mediaType = "application/manifest+json"
31
32[outputs]
33  home = ["HTML", "RSS", "JSON", "MANIFEST"]
34
35[taxonomies]
36  category = "categories"
37  series = "series"
38  tag = "tags"
39
40[build]
41  writeStats = true

配置友情连接

自定义一个友情链接的菜单,

属性 类型 描述
name String 菜单名称。
identifier String 菜单 ID。
weight Number 菜单的权重,用于升序排序。
parent String 上级菜单的 identifier
url String 菜单的 URL。
pre String 菜单名称的前置字符串。
post String 菜单名称的拖尾字符串。
params Object 菜单参数。
params.divider Boolean true 表示分隔符。
 1[[main]]
 2  name = "友情链接"
 3  identifier = "friends"
 4  weight = 40
 5  pre = '<i class="fas fa-fw fa-chevron-circle-down"></i>'
 6[[main]]
 7  name = "xieash"
 8  identifier = "xieash"
 9  parent = "friends"
10  url = "https://xieash.work/"
11  weight = 1
12[[main]]
13  name = "sunnysab"
14  identifier = "sunnysab"
15  parent = "friends"
16  url = "https://sunnysab.cn/"
17  weight = 2
18[[main]]
19  name = "wanfengcxz"
20  identifier = "wanfengcxz"
21  parent = "friends"
22  url = "https://wanfengcxz.cn/"
23  weight = 3
24[[main]]
25  name = "zhangzqs"
26  identifier = "zhangzqs"
27  parent = "friends"
28  url = "https://zhangzqs.cn/"
29  weight = 4

配置社交连接

1email = "jimyag@126.com"
2# facebook = "yourfacebookusername"
3github = "jimyag"

迁移hexo的博客内容

hexo的永久连接的字段是addlink,但是hugo是不支持这个字段的。

大佬的永久链接生成方案是直接对时间 + 文章名生成字符串做一下 md5 然后取任意 4-12 位。想了一下,这样的 hash 冲撞概率还是挺小的,我觉得可以!

那么接下来说说怎么把这个方案应用到 Hugo 中

Hugo 在永久链接中支持一个参数:slug。简单来说,我们可以针对每一篇文章指定一个 slug,然后在 config.toml 中配置permalinks包含slug参数,就可以生成唯一的永久链接。我们的目的就是对每篇文章自动生成一个 slug

修改archetypes/default.md添加如下一行:

1---
2#...
3slug: {{ substr (md5 (printf "%s%s" .Date (replace .TranslationBaseName "-" " " | title))) 4 8 }}
4#...
5---

这个其实就是hugo的博客的模板,可以在里面添加自己预设的内容。

这样在每次使用hugo new的时候就会自动填写一个永久链接了。

之后修改config.toml添加如下行:

1[permalinks]
2  posts = "/post/:slug"

支持letex公式

Hugo原生是不支持数学公式的这时候需要手动引入数学公式的库,

/themes/theme-name/layouts/partials中添加mathjax.html文件,

 1<script type="text/javascript"
 2        async
 3        src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 4MathJax.Hub.Config({
 5  tex2jax: {
 6    inlineMath: [['$','$'], ['\\(','\\)']],
 7    displayMath: [['$$','$$'], ['\[\[','\]\]']],
 8    processEscapes: true,
 9    processEnvironments: true,
10    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
11    TeX: { equationNumbers: { autoNumber: "AMS" },
12         extensions: ["AMSmath.js", "AMSsymbols.js"] }
13  }
14});
15
16MathJax.Hub.Queue(function() {
17    // Fix <code> tags after MathJax finishes running. This is a
18    // hack to overcome a shortcoming of Markdown. Discussion at
19    // https://github.com/mojombo/jekyll/issues/199
20    var all = MathJax.Hub.getAllJax(), i;
21    for(i = 0; i < all.length; i += 1) {
22        all[i].SourceElement().parentNode.className += ' has-jax';
23    }
24});
25</script>
26
27<style>
28code.has-jax {
29    font: inherit;
30    font-size: 100%;
31    background: inherit;
32    border: inherit;
33    color: #515151;
34}
35</style>

然后在head.html中加入如下语句

1{{ partial "mathjax.html" . }}

重新安装依赖

1hugo mod npm pack
2npm install
3hugo server

部署博客

Github Actions

起初想通过GitHub actions进行部署,使用rsync进行同步下面是action的配置文件

 1name: deploy
 2
 3on:
 4  # push事件
 5  push:
 6    # 忽略某些文件和目录,自行定义
 7    paths-ignore:
 8      - '.gitignore'
 9      - '.gitmodules'
10      - 'README.md'
11    branches: [ master ]
12
13  # pull_request事件
14  pull_request:
15    # 忽略某些文件和目录,自行定义
16    paths-ignore:
17      - '.gitignore'
18      - '.gitmodules'
19      - 'README.md'
20    branches: [ master ]
21
22  # 支持手动运行
23  workflow_dispatch:
24
25jobs:
26  # job名称为deploy
27  deploy:
28    # 使用GitHub提供的runner
29    runs-on: ubuntu-20.04
30
31    steps:
32      # 检出代码,包括submodules,保证主题文件正常
33      - name: Checkout source
34        uses: actions/checkout@v2
35        with:
36          ref: master
37          submodules: true  # Fetch Hugo themes (true OR recursive)
38          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
39
40      # 准备 mode
41      - name: Setup Node.js
42        uses: actions/setup-node@v2
43        with:
44          node-version: 14
45
46      # 准备Hugo环境
47      - name: Setup Hugo
48        uses: peaceiris/actions-hugo@v2
49        with:
50          hugo-version: 'latest'
51          # extended: true
52
53      # Hugo构建静态站点,默认输出到public目录下
54      - name: Build1
55        run: hugo mod npm pack
56
57
58
59      - name: Build2
60        run: npm install
61
62      - name: Build3
63        run:
64          hugo -D
65      # 将public目录下的所有内容同步到远程服务器的nginx站点路径,注意path参数的写法,'public'和'public/'是不同的
66      - name: Deploy
67        uses: burnett01/rsync-deployments@5.1
68        with:
69          switches: -avzr --delete
70          path: ./public/
71          remote_host: ${{ secrets.REMOTE_HOST }}
72          remote_port: ${{ secrets.REMOTE_PORT }}
73          remote_path: ${{ secrets.REMOTE_PATH }}
74          remote_user: ${{ secrets.REMOTE_USER }}
75          remote_key: ${{ secrets.REMOTE_KEY }}

其中的secrets.REMOTE_HOST等五个参数需要在setting/secrets/actions中添加,可以自行添加。这有一个好处就是它是增量更新的,只有在第一次同步的时候是全部更新,之后只更新改变的或增加的。坏处就是腾讯云一直提醒服务器在国外被登录,每一个同步都要发邮件提醒,很烦。

SCP

scp命令使用很简单

1scp -r 本地文件路径 username@ip:/远程文件路径

例如

1scp -r public/* username@ip:/public/jimyag.cn/

将当前文件中的public目录中所有的文件拷到远程主机的/public/jimyag.cn/文件夹中。

配置https

以下均在服务器中执行。

安装nginx

1yum install nginx -y

启动nginx

1systemctl start nginx

设置开机自启

1systemctl enable nginx

修改默认配置文件,注释掉所有的

 1user root; #修改用户
 2worker_processes auto;
 3error_log /var/log/nginx/error.log;
 4pid /run/nginx.pid;
 5
 6# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
 7include /usr/share/nginx/modules/*.conf;
 8
 9events {
10    worker_connections 1024;
11}
12
13http {
14    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
15                      '$status $body_bytes_sent "$http_referer" '
16                      '"$http_user_agent" "$http_x_forwarded_for"';
17
18    access_log  /var/log/nginx/access.log  main;
19
20    sendfile            on;
21    tcp_nopush          on;
22    tcp_nodelay         on;
23    keepalive_timeout   65;
24    types_hash_max_size 4096;
25
26    include             /etc/nginx/mime.types;
27    default_type        application/octet-stream;
28
29    # Load modular configuration files from the /etc/nginx/conf.d directory.
30    # See http://nginx.org/en/docs/ngx_core_module.html#include
31    # for more information.
32    include /etc/nginx/conf.d/*.conf;
33    # 删除多余的内容
34}

/etc/nginx/conf.d中新建文件jimyag_cn_http2https.conf,将所有的http请求rewrite到https

1server {
2        listen       80 default_server;
3        listen       [::]:80 default_server;
4        server_name  jimyag.cn;
5        rewrite ^(.*) https://$server_name$1 permanent;
6}

/etc/nginx/conf.d中新建文件jimyag_cn.conf,监听443端口

 1server {
 2        listen       443 ssl http2;
 3        listen       [::]:443 ssl http2;
 4        server_name  jimyag.cn;
 5
 6
 7        ssl_certificate /etc/ssl/certs/jimyag_cn/jimyag.cn_bundle.crt; # 证书所在文件
 8        ssl_certificate_key /etc/ssl/certs/jimyag_cn/jimyag.cn.key; # 证书所在文件
 9        ssl_session_cache shared:SSL:1m;
10        ssl_session_timeout  10m;
11        location /{
12                root /public/jimyag.cn/;  #博客文件所在
13                index index.html;
14        }
15}

证书需要在云服务器商中申请,申请成功后下载nginx版本就可以了,将其中的.crt.key文件拷到证书所在位置即可

参考

快速入门 - Hugo Bootstrap (razonyang.com)

Hexo 迁移到 Hugo 记录 - Reborn’s Blog (mallotec.com)

HUGO迁移 :: shaosy’s blog (siyangshao.github.io)