如何用Github actions部署Hugo博客到gh-pages

发表于 November 24, 2020 分类于折腾

其实这是一篇重建博客的文章，新的方式只为更稳定更快更方便更少的调试。

为何会再次用这个方式部署博客？因为

Blogdown 生成的博客环境在 Rstudio 中时灵时不灵，我不可能每一次重装都要把 Blogdown 折腾一遍，真是太过分了；
Blogdown安装在 CentOS 7 下面有个巨大的坑（这个随后提到如何解决），我就是要避免安装Blogdown，快速开始写字；
博客写作环境可以更简单点的，虽然用Blogdown+Netfliy+Github你可以成功，但是不够灵活和通用；
方法都是现成的，要做的就是优化流程；开始前你需要了解什么是Github、Actions、gh-pages、Git以及Hugo以及这样折腾下来一套流程对你是不是适用。本文主要用来记录这样重建过程。

详细流程

1. Github 设置

1.1 创建两个GitHub仓库

创建名为 yourID.github.io.source 的仓库，我们称之为源码仓库，你也可以将源码仓库设置为 Private，看个人需求。

创建名为 yourID.github.io 的仓库，我们称之为发布仓库，且只能为public公开；

1.2 分别为两个仓库绑定 SSH Key

当通过Git提交源码之后，Github Actions会编译生成静态文件并通过Git Push到 yourID.github.io的发布仓库，这一步需要 Git 账户认证，因此你需要先设定公匙（Public Key）和私匙（Private Key）。在你电脑的Terminal窗口进行操作

git config --global  --list
git config --global user.name "xxx" # 你的github用户名
git config --global user.email "xxx@gmail.com" # 你的github邮箱
ssh-keygen -t rsa -b 4096 -C "xxx@gmail.com"  # 记得替换成你的邮箱

你可以为密匙设定密码或者回车跳过，按照Terminal窗口中的位置找到名为id_rsa.pub和id_rsa的文件，用文本工具或者cat命令即可打开浏览，然后将以 pub 结尾的公匙添加到 yourID.github.io 发布仓库，将id_rsa私匙添加到yourID.github.io.source 源码仓库。

在 yourID.github.io.source 源码仓库，将id_rsa添加到 Settings – Secrets，务必命名为 ACTIONS_DEPLOY_KEY；

在 yourID.github.io 发布仓库，将id_rsa.pub添加到 Settings – Deploy keys，命名为hugo_keys或其他名字都可以；

2. 本地加载Hugo并调试运行

将 yourID.github.io.source 仓源码库克隆到本地，并用你安装的或者Rstudio初始化Hugo；现将步骤罗列如下；

2.1 如果你用的是Rstudio

install.packages("devtools")
devtools::install_github("rstudio/blogdown")
blogdown::install_hugo()
blogdown::hugo_version()
# 0.78.2

两次新建，分先后顺序，分别为

新建1

File -> New Project -> Version Control -> Git -> Repository URL

Repository URL 请在你的源码仓库查看，一般为形如 https://github.com/yourID/yourID.github.io.source.git 的地址，Project Directry name 可以为空；

新建2

File -> New Project -> New Directory -> Website using blogdown -> Directory name

Directory name 不能为空，需要填入自定位的文件夹名称，如001，Hugo Theme 位置填入提前看好的Hugo主题的github位置，如 https://github.com/olOwOlo/hugo-theme-even 就填入 olOwOlo/hugo-theme-even，其他默认即可。

然后用Rstudio上的Build按钮查看拥有even主题的Hugo博客。

2.1.1 Hugo博客中 config.yaml 文件设置

主页的修改以及调整都依赖于config.yaml文件，以下修改为大多数情况下会用到的修改，其他具体请参看对应Hugo主题的配置说明

baseURL: /
languageCode: zh-cn #en-us
title: xx的博客
theme: hugo-theme-even
relativeurls: true 
ignoreErrors: ["error-remote-getjson"]
ignoreFiles: ["\\.Rmd$", "\\.Rmarkdown$", "_cache$", "\\.knit\\.md$", "\\.utf8\\.md$"]

修改完之后，Build -> Clean All -> Build All 即可看到运行结果。

2.2 如果你不经过Rstudio

# 选取一个目录
cd ~/Desktop/
  # 克隆 source 仓库
  git clone git@github.com:yourID/yourID.github.io.source.git
# 进入仓库
cd yourID.github.io.source/
  # 在当前目录生成 Hugo 源码
  hugo new site .
# 为当前博客选取一个主题，你可以不执行这一命令使用默认的主题
git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/hugo-theme-even
# 编辑 config.toml 配置文件，使 beautifulhugo 主题生效
echo 'theme = "beautifulhugo"' >> config.tomlecho 'theme = "beautifulhugo"' >> config.tom

# 此时你就可以运行预览效果
hugo serve

3. 上传本地调试好的Hugo博客

git add .
git commit -m "first commit"
git push -u origin master

4. 设置Github Actions 自动化发布

前往 yourID.github.io.source 源码仓库配置Actions， Actions -> New workflow 直接将以下文件贴进去，修改远程仓库即可，其他的基本上不用更新;

name: Deploy Hugo Site to Github Pages on Master Branch

on:
  push:
  branches:
  - master

jobs:
  build-deploy:
  runs-on: ubuntu-18.04
steps:
  - uses: actions/checkout@v1  # v2 does not have submodules option now
# with:
#   submodules: true

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

- name: Build
run: hugo --minify
# 这里我修改了运行参数，初始默认是--minify，但是只更新md文件的时候无法更新时间，经过查找添加以下更多参数
# --gc --minify --cleanDestinationDir --theme=hugo-theme-noteworthy

- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
  deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 这里的 ACTIONS_DEPLOY_KEY 则是上面设置 Private Key的变量名
external_repository: yourID/yourID.github.io # Pages的远程仓库 
publish_dir: ./public # 推送特定文件夹到远程仓科
keep_files: false # remove existing files
publish_branch: master  # deploying branch
commit_message: ${{ github.event.head_commit.message }}

然后稍等片刻你会在 https://yourID.github.io/ 下看到你的博客内容，和你在本地生产的一样的；

Hugo的文章内容都保存在content目录下面，所以你之后所有的文章写作和更新其实都是在content文件夹下添加markdown文件，以*.MD或者.RMD*结尾的文件，所以你完全可以只写作内容，然后编译和发布交给Github和Github Actions，这样就方便很多了。

接着按往常的更新操作即可瞬间更新博客了啊！！！

WAIT ！！！换电脑换环境了怎么，我要重新做一遍么？？？

其实到这里还有一个非常重要的技能点，用git命令行只更新content文件内容，只对特定文件或文件夹进行pull或者push操作，这样我就可以真正在云端写内容了！

来看一看效果吧,顺便看下另一篇文章吧，会有收获的！

补充：未来如何更新你的主题？

最简单的方式是克隆你的博客source code 到本地，然后手动删除主题文件夹，再次拉取主题的Github文件即可。可能你在Rstudio下的blogdown下预览不成功，但是不要紧，进入public文件夹，直接打开index.html能正常打开预览到博客即可上传你的主题更新；

git clone https://github.com/kimcc/hugo-theme-noteworthy.git themes/hugo-theme-noteworthy

补充：如何回退到指定版本的git？

打开你项目的 GitHub commit 主页，知道你要回退的commit版本，然后命令行操作；

git log
git reset --hard <commit ID>
git push -f origin master
# git push -f origin <branch name>