Hugo&Stack + Github Pages + Github Actions 建站记录

开端

一个程序员怎么能没有一个属于自己的技术博客呢？念叨这句话很久了，22年的春节我终于新建了文件夹。

技术栈选型

框架 Hugo ，主题 Stack ，托管于 GitHub Pages，域名备案于阿里云。此外使用了 Github Actions 进行自动化部署。

框架

一开始只知道博客可以托管在GitHub Pages上，作为完全不懂前端的我，肯定要选个简单的博客框架，上网查了下主要有Hexo和Hugo。

Hexo？要用 nodejs，先pass。
Hugo？是 go 语言开发的，这我熟，就它了！

Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。Hugo 的速度真的非常快，本地运行后，更新一保存之后马上在浏览器之后就能看到结果。此外还要选个主题，我用的是 Stack。具体看 Hugo 官方文档和 Stack 官方文档。

折腾博客的各种小细节时，基本都在参考这位博主的装修记录。

需要注意一点，Hugo 框架的文件结构和 themes 中主题的文件结构是相同的，在修改样式时需要将主题文件夹中的同名文件复制到外边再做修改。若在主题文件夹中修改，由于自动化部署时是在 GitHub Actions 提供的 runner 上每次重新获取 hugo 和 theme 来生成静态网站，本地的更改就没了。

写博客时，只需先执行

hugo new post/xxx.md

之后修改顶部的 FrontMatter

---
title: "my title"
description: "my description"
date: 2022-02-03T15:01:24+08:00
draft: true
tags:
    - tag1
categories:
    - categorie1
---

再之后就可以开始创作了。

后端

将博客托管在Github Pages上，具体看官网。

新建一个public Repository，名字要是 username.github.io。之后在hugo框架根目录下执行 hugo -D 在 public 文件夹中生成静态网站，再将 public 文件夹中内容 push 到该 Repository 中即可完成部署。

自动化部署

每次部署很麻烦，需要以下步骤：

hugo -D
cd public
git add .
git commit -m "some messages"
git push

而且这样想要用git管理源文件有一点麻烦，自然想到使用 GitHub Actions 来完成自动化部署。

需要先新建一个 Repository 保存博客框架源文件，我取名为 my-hugo-stack。username.github.io 这个Repository保存的是静态网站文件，不要混淆。

在 my-hugo-stack 的 Actions 中，新建一个 workflow ，点击 configure 写入以下内容

name: ci
on:
  push: 
    branches: 
      - master
      
jobs:
  build:
    runs-on: ubuntu-latest 
    steps:
      - name: checkout 
        uses: actions/checkout@v2.3.4
        with:
          submodules: true
          
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.92.1'
          extended: true
          
      - name: Build
        run: hugo -D

      - name: Add CNAME
        run: echo "ziannchen.work" > public/CNAME
        
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} 
          external_repository: cza2000/cza2000.github.io  
          publish_branch: master  
          publish_dir: ./public 
          commit_message: ${{ github.event.head_commit.message }}

此外还需要新建一对SSH密钥。私钥写入博客源文件仓库的 Settings - Actions secrets，命名为 ACTIONS_DEPLOY_KEY，公钥写入静态网站仓库的 Settings - Deploy keys，命名随意。

之后将本地博客源文件 push 至 my-hugo-stack 的 master 分支就会触发 action，自动部署并将生成的 public 文件夹内的内容 push 到 username.github.io 中完成部署。

由于我买了域名，这样做每次都把我的 CNAME 搞没了，我就在 yml 文件中手动加了一个 step，每次重新生成 CNAME 文件。

为了更懒一点，又写了个脚本 deploy.sh:

#!/bin/sh
git add .
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"
# Push source and build repos.
git push

TODO

考虑弄个 CDN
加了个访问量统计不蒜子