Back

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-stackusername.github.io 这个Repository保存的是静态网站文件,不要混淆。

my-hugo-stackActions 中,新建一个 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
  • 加了个访问量统计 不蒜子
Built with Hugo
Theme Stack designed by Jimmy