折騰Hugo | GitHub Pages | Github Actions自動構建發佈免費我的網站

以前也折騰過我的博客，從大學時候玩的 Wordpress、Ghost，最近又開始折騰博客。因爲我我的是比較喜歡經過Github來作博客系統的，對比了目前市面上比較主流的博客系統，好比Hexo、Hugo， 順便推薦一下國內比較活躍的 Java 開源博客系統 Halo，更多可移步：https://github.com/halo-dev/halo

這一次我選擇了 Hugo，一方面是爲了下降維護成本，最實際的則是下降服務器成本。至於對Github pages速度太慢的問題我將採用CDN加速解決。

首先來將一下整個流程的大體原理：

本地添加文章，提交到Github，以後會自動觸發Github Actions幫助咱們把剛剛添加的文章經過Hugo發佈到Github Pages進行託管。以後便可經過 Github 給 Pages 生成的 URL 訪問便可。我將Hugo源碼和Pages分別用兩個倉庫來管理，Github Actions會將Hugo倉庫（JaredTan95.github.io.source）源碼編譯成靜態資源推到Pages倉庫（JaredTan95.github.io）

詳細步驟

• 建立 JaredTan95.github.io.source 倉庫：

我將源碼倉庫設置爲了 Private，看我的需求。

• 建立 JaredTan95.github.io 倉庫：

• 爲兩個倉庫綁定 SSH Key：

由於當咱們在經過Git提交源碼以後，Github Actions會編譯生成靜態文件並經過Git Push到 JaredTan95.github.io，所以這一步須要 Git 帳戶認證。

咱們先生成一對SSH Key，生成的Public Key和Private Key都會用到，我採用以下方式生成：

注意：上圖紅框標註的這裏覆蓋了默認的生成路徑，這樣就不會影響到電腦中舊的SSH Key。

這一步比較重要，咱們要將生成的 Public Key 添加到 JaredTan95.github.io 倉庫：

而後將 Private Key 添加到 JaredTan95.github.io.source 倉庫：
這裏 Secrets 變量名要必定是： ACTIONS_DEPLOY_KEY, 後面會用到。

• 將 JaredTan95.github.io.source 倉庫克隆到本地，開始初始化 Hugo 系統：

# 選取一個目錄
cd ~/Desktop/

# 克隆 source 倉庫
git clone git@github.com:JaredTan95/JaredTan95.github.io.source.git

# 進入倉庫
cd JaredTan95.github.io.source/

生成 Hugo 源碼並進行配置：

# 在當前目錄生成 Hugo 源碼
hugo new site . 

# 爲當前博客選取一個主題，你能夠不執行這一命令使用默認的主題
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo 

# 編輯 config.toml 配置文件，使 beautifulhugo 主題生效
echo 'theme = "beautifulhugo"' >> config.tomlecho 'theme = "beautifulhugo"' >> config.tom

# 此時你就能夠運行預覽效果
hugo serve

若是你以爲滿意沒問題以後，便可推送到 Github

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

• 最後一步，配置 Github 自動構建發佈 Actions 便可：

能夠經過 Github 自動爲咱們倉庫生成，注意是爲 JaredTan95.github.io.source 倉庫配置 Actions。

直接將如下文件貼進去，修改遠程倉庫便可，其餘的基本上不用更新：

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.62.2'
          # extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 這裏的 ACTIONS_DEPLOY_KEY 則是上面設置 Private Key的變量名
          external_repository: JaredTan95/JaredTan95.github.io # Pages 遠程倉庫 
          publish_dir: ""
          keep_files: false # remove existing files
          publish_branch: master  # deploying branch
          commit_message: ${{ github.event.head_commit.message }}

修改好以後，點擊右上角 commit 提交便可。咱們能夠手動觸發打包動做也能夠在本地從新commit一次，檢查流水線是否會被觸發。

觸發以後能夠查看流水線日誌：

自此，整個搭建就結束了，咱們能夠訪問Github爲JaredTan95/JaredTan95.github.io 倉庫生成的域名： https://jaredtan95.github.io/ 查看效果。

總結

本次搭建耗費了很多時間，主要在於Github訪問較慢，克隆Hugo主題也比較慢。目前惟一的不足則是Github Pages訪問較慢，後面經過自定義域名+CDN加快訪問速度。

文章首發在公衆號：摳腚Coding筆記， 歡迎關注！