博客搭建简记

chengleqi 出版于 Hugo

2021-08-01 约 1055 字预计阅读 3 分钟

博客还是简洁一点比较好？

效果

git commit + push即可。

workflow

如下图:

上图是用mermaid画的，flowchart是mermaid高版本的feature，在我使用Feelit主题shortcode的时候还没有得到支持，提了个issue，在这次更新中得到了支持。

mermaid shortcode在手机浏览器中没有得到很好的支持，换回figure shortcode。(2021年 08月 04日星期三 15:30:15 CST)

使用Docker进行本地预览

参考了jojomi/docker-hugo重写了Dockerfile和构建镜像并且启动容器的脚本chengleqi/docker-hugo。

镜像的README

在浏览器中下载最新版hugo binary(extend版本)
将下载好的hugo binary放在项目根目录
执行./build_and_start_hugo.sh 构建镜像并运行容器
打开浏览器 localhost:1313

注意

在docker run的时候挂载了blog目录用于hugo server，并添加了--rm参数，退出容器后直接删除容器。

使用GitHub Actions自动构建并部署

此处参考了Arnab Kumar Shil的文章。配置了GitHub Actions的流水线。脚本如下:

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}
          external_repository: chengleqi/chengleqi.github.io
          publish_branch: main
          publish_dir: ./public
          cname: chengleqi.com

这个脚本使用了peaceiris/actions-hugo@v2和peaceiris/actions-gh-pages@v3两个action分别用于设置hugo环境以及推送至gh-pages。

技巧

存储blog源文件的repo访问github.io repo需要设置personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}
在Deploy job中需要指定CNAME，会自动生成CNAME文件，当然也可以手动添加，参考Hugo官网。

启用algolia搜索

因为algolia需要上传索引文件，主题的作者推荐了一款Algolia Atomic插件用来完成自动化上传。

这款插件需要node和npm，我参考了这篇文章，直接在GitHub Actions分配的VPS中配置不成功。

于是找到了这个方案，作者将atomic-algolia封装进docker容器中，启动立即执行atomic-aloglia。将docker启动命令附加到pipeline脚本中，再次推送，一次成功，只是多出了拉取镜像的时间。我已将镜像同步至Docker Hub进行解耦。