Hugo博客发布篇

Thu, Dec 19, 2019 2-minute read

在 GitHub 创建个人主页仓库,仓库名称必须设置为 .github.io,这个仓库仅存放生成的静态内容。与你github账号名字相同最好,我不一样时候出现错误好几次,比如网址特别长的问题。

在 GitHub 创建一个项目仓库 hugo-blog 并添加为我们本地项目文件夹的远程仓库。这个仓库用来维护站点配置和原始的文章内容。

假设我们在已经通过上文的步骤在 public 文件夹中生成了想发布的静态内容,运行:

git submodule add -b main https://github.com//.github.io.git public

在 public 目录中创建一个 git 子模块,之后这个目录将以 https://github.com//.github.io 作为远程仓库。

确保配置文件中的 baseUrl 已经设置为了 .github.io。

Hugo 为我们接下来的部署操作提供了一个自动化的 Shell 脚本:

#!/bin/sh

# 任一步骤执行失败都会终止整个部署过程
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# 构建静态内容
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# 切换到 Public 文件夹
cd public

# 添加更改到 git
git add .

# 提交更改
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
  msg="$*"
fi
git commit -m "$msg"

# 推送到远程仓库
git push origin main

cd ..

将如上内容保存到 deploy.sh 文件中,并执行 chmod +x deploy.sh 为其添加可执行权限。接着执行部署脚本:

./deploy.sh

大功告成!稍等几分钟就可以在 https://.github.io 看到我们的个人博客了。

通过 GitHub Actions 自动部署

目前我们的「创作-发布」流程如下:

在项目仓库编辑原始内容并进行版本管理。

执行自动脚本生成静态站点并推送到个人主页仓库完成发布。

这套流程已经很流畅,但还有一些改进空间:我们可以使用 GitHub Actions,在每次向远程的项目仓库推送原始内容更改时自动执行第 2 步进行发布。

GitHub 上有许多这类自动化部署任务的开源 Actions 项目,我们选择了其中一个简单易用的 GitHub Actions for Hugo。具体的操作步骤截图和详细配置项可以查看该项目的 README。下面简单介绍下配置过程:

在项目文件夹中添加目录和文件:.github/workflows/gh-pages.yml,gh-pages.yml 文件内容如下:

name: github pages
   
on:
  push:
    branches:
      - main  # 每次推送到 main 分支都会触发部署任务
   
jobs:
  deploy:
    runs-on: ubuntu-18.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: '0.79.1'
          extended: true
   
      - name: Build
        run: hugo --minify
   
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: <USERNAME>/<USERNAME>.github.io  # 替换成上文所创建的个人主页仓库
          publish_branch: main
          publish_dir: ./public

这个文件所定义的 workflow 基于项目仓库运行,但我们需要将运行过程生成的静态文件推送到个人主页仓库 .github.io 完成发布,因此在 Deploy 任务中按照文档的 Deploy to external repository external_repository 一节做了专门的配置。

在本地生成 SSH 部署密钥:

ssh-keygen -t rsa -b 4096 -C "username@users.noreply.github.com"
# 将在当前目录生成如下密钥文件:
#   gh-pages.pub (公钥)
#   gh-pages     (私钥)

公钥(.pub后缀,如id_rsa.pub)

前往.github.io,Settings > Deploy keys > Add deploy key,复制到对应框中。

名字随意,但务必勾选Allow write access。

在新的环境继续工作 新的电脑上工作就可以把之前同步到GitHub上的博客源文件同步下来继续工作。

在安装好环境(Go+git+Hugo)后,在终端进入想要放置博客的目录,使用git命令拉去远程仓库,将submodule初始化并更新。

git clone && cd git submodule init git submodule update 在新的环境中,两个子模块的仓库不在任何分支上,需要进入到对应的目录,然后使用git checkout main将分支切换到main上面。

cd public git checkout main cd ../themes/ git checkout main 接下来就可以在新的环境继续工作了。

主题客制化

免费图标 http://www.fontawesome.com.cn/
压缩SVG https://jakearchibald.github.io/svgomg/
制作图标 https://realfavicongenerator.net/