前言

此篇在講如何使用 Hugo 在 Github 上自架 Blog。

安裝 Hugo

關於安裝的部分可以參考這些文章

與文章不同的地方主題我是選擇 PaperMod,由於需要設定 config.yml,建議先參考 PaperMod-Installation

想要完整的設定或理解 PaperMod,最好是完整的看完 PaperMod 的 repo,有不知道的問題可以在 Issues 或者 FAQs 搜尋看看,會比 google 搜尋來得快。

PaperMod

由於 PaperMod 推薦使用 config.yml,因此推薦把原本的 config.toml 刪除。並且去複製官方提供的 config.yml

config.yml

Search Post

先在 config menu main 新增一個 Search 頁面

menu:
    main:
        - identifier: archives
          name: Archives
          url: /archives/
          weight: 5
        - identifier: tags
          name: Tags
          url: /tags/
          weight: 10
        - identifier: search
          name: Search
          url: /search/
          weight: 20

且在最底下此內容。(參考文件

outputs:
    home:
        - HTML
        - RSS
        - JSON # is necessary

最後在專案的 content 底下新增 search.md,即可完成功能。(參考文件

---
title: "Search" # in any language you want
layout: "search" # is necessary
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "placeholder text in search input box"
---

Comments

此功能是參考 Day 20. Hugo Comments System 文章製作出來的。

Github Action

有使用 Custom domain 的話,且 workflows 沒有設定 domain 的話,會造成每次更新文章時,都會清掉 Custom domain,變回原本的 github.io。

GitHub Pages workflow.yml

name: GitHub Pages

on:
  push:
    branches:
      - main # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    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.91.2"
          # extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.HUGO_DEPLOY_TOKEN  }}
          PUBLISH_BRANCH: gh-pages # 推送到 gh-pages 分支
          commit_message: ${{ github.event.head_commit.message }}
          publish_dir: ./public
          cname: wenrongdev.com

只需要新增或替換掉 cname 後面為 domain 即可。

結論

Hugo 或 PaperMod 我都處於摸索階段。

這次架起來的感覺各方面都不錯,不管是讀取 Blog 速度、支援 Markdown、架設 Github 上且保留原始檔,到目前為止沒有明顯的缺點。

目前最大問題就是 SEO,這是我完全沒有接觸過的。問題在於 Google 搜尋不到我的 Blog,所以這是之後要研究的部分。