BACK
Featured image of post 架設部落格之一條龍免費寶典:Hugo 生成靜態網站、Pages 發布網站、設定 custom domain(free 12 months)、Actions 做 CI/CD

架設部落格之一條龍免費寶典:Hugo 生成靜態網站、Pages 發布網站、設定 custom domain(free 12 months)、Actions 做 CI/CD

本篇筆記為:使用 hugo 生成靜態網站,利用 github pages 發布網站、利用 github actions 處理 CI/CD、並註冊 freenom 免費網址(12個月)。


安裝 hugo

homebrew (MacOs)

1
brew install hugo

scoop (Windows)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
# 若未安裝過 Scoop,需先:
# 1. 第一次需先設定,允許遠端腳本
# Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

# 2. 下載並安裝 Scoop
# irm get.scoop.sh | iex

# 透過 Scoop 安裝 Hugo
scoop install hugo

# 如需安裝指定版本
scoop install [email protected]

# 安裝擴展版本
scoop install hugo-extended

Chocolatey

1
2
3
4
5
6
7
8
# 透過 Chocolatey 安裝 Hugo
choco install hugo

# 如需安裝指定版本
choco install hugo --version=0.100.2

# 安裝擴展版本
choco install hugo-extended

apt-get (Linux)

1
sudo apt-get install hugo

利用 hugo 建立網站

1
2
# 進到本地資料夾根目錄後
hugo new site . --force

下載主題模板 (以 hugo-theme-stack 為例)

1
git submodule add git://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

clone 完畢後,把 exampleSite 文件夾中的 config.yaml 複製到站點目錄下,同時刪除此目錄下的 config.toml 文件。

將 exampleSite/content/* 複製到站點目錄下的 content/

剩餘主題的設定與文章內容,可依個人需求自行設定,本篇不再贅述。


github 創建一個 public 的 repo,用於存放發布用的 public 資料夾。

  • 前往 repo 的 Settings -> Pages
  • 設定好欲發布的分支與 root path

設定完畢後,github 會分配給你一個公開的網址:https://{your-account}.github.io/{your-repo-name}/,若不需自定義網址與 CI/CD 流程,到此步驟即可完畢。


設定自定義網址

註冊一個網址

  • 本文使用 freenom 註冊一組免費的網址
  • 註冊完畢後,前往 Manage Domain
  • 選擇 Management Tools -> NameServers 後,此頁面先暫時放置著,待會再回來繼續設定

前往 Cloudflare 後台

  • 登入 Cloudflare 後台,並選擇 網站

  • DNS 設定如圖:
    • 將註冊的 domain 設定指向到 github server ip
      • 185.199.108.153
      • 185.199.109.153
      • 185.199.110.153
      • 185.199.111.153
    • 設定 CNAME www 指向到剛剛 github 分配給你的 domain (path不需要): https://{your-account}.github.io/
    • 將下方兩個 Cloudflare 名稱伺服器複製下來

  • 選擇 Use custom nameservers (enter below)
  • 將剛剛從 Cloudflare 複製的兩個 NameServer,貼到 NameServer 1、NameServer 2

Cloudflare 後台設定強制使用 SSL

  • 點選 SSL/TLS邊緣憑證
  • 打開 一律使用HTTPS

回到 github pages,將網址填寫至 Custom domain,短暫驗證完畢後,即可點選 Save 送出設定

自定義網址已設定完畢,可使用網址打開網站。


設定 github actions 做 CI/CD

準備材料1:生成 github personal access tokens

前往 github 的個人設定 "Settings",下方點選 Developer settings

點選 Generate new token

設定備註、過期時間、權限後即可生成 token

  • 建議過期時間可以設定 No expiration (無過期時間)、權限設定 repo 全部勾選

生成後,token 請複製起來,因為關閉此頁面後,將無法再取得該 token 的明碼

準備材料2:登入 Cloudflare 後台,取得 區域識別碼(Zone)

  • 登入 Cloudflare,選擇自己的 domain
  • 點選 概觀,並於圖中標示處取得 區域識別碼(Zone Id)

準備材料3:取得 Global API Key

  • 概觀 下方點選 取得您的 API Token
  • 點選 檢視,輸入密碼後取得 Global API Key

準備材料4:生成 API token

  • 點選 建立 Token -> 建立自訂 Token

  • 設定 token 名稱、權限、TTL
  • PS:權限必須至少擁有 區域 -> 快取清除 -> 清除,以便 CI/CD 後使用 token 清除 DNS cache
  • 設定完畢後即可建立 token

  • 建立後,也請將 token 複製起來,因為關閉此頁面後,將無法再取得該 token 的明碼

材料準備完畢,開始設定 secret

進入 source code 的 repo,點選 Settings -> Secret -> Actions,並將剛剛的四個準備材料設定到 Actions secrets

此處 Actions secrets 的名稱如需修改,則待會的 github-actions.yml 內的名稱也需跟著修改,否則會抓不到 secrets 中設定的值哦!

於 source code repo 根目錄新增 .github/workflows/github-actions.yml

github-actions.yml 內容
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
name: Auto build and publish to public site repository

# 只有推送到 main 才觸發
on:
  push:
    branches: 
      - "main"
  pull_request:
    branches: ["main"]

jobs:
  hugo-publish:
    name: publish content to public site
    runs-on: ubuntu-latest
    steps:
      # 使用當前 source code 的 repo
      - name: checkout source code repo
        uses: actions/checkout@v3
        with:
          # 因為目前的 repo 有使用到 submodule(hugo themes),所以 submodule 也要一併同步,不然原本的 repo 是沒有 submodule 的內容
          submodules: true
          token: ${{ secrets.ACCESS_TOKEN }}

      # public 網站是放置在另一個 repo 所以這裡也要 clone 一份下來處理
      # 因為我 Hugo 預設是產生檔案到 public 資料夾,所以將 public repo clone 到 ./public/ 內,以便後續 publish
      - name: clone and checkout public repo
        uses: actions/checkout@v3
        with:
          # 這裡是 public 網站在 github 上的 repo 名稱
          repository: {template/template-public-repo-name}
          path: public
          # tip: 需事先產生一把 personal access token 放到 repo 的 secrets 裡
          # 然後 secrets 裡的名稱就叫 ACCESS_TOKEN
          # 參考 https://help.github.com/en/actions/automating-your-workflow-with-github-actions/authenticating-with-the-github_token
          token: ${{ secrets.ACCESS_TOKEN }}

      # 使用別人做好的 Hugo Actions
      - name: setup hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: latest
          extended: true

      # 用 Hugo 產生檔案
      - name: build content to public site
        working-directory: ./
        # --cleanDestinationDir 清除舊檔案
        run: hugo --minify --gc --cleanDestinationDir

      # 將檔案 commit 到 網站 public repo
      - name: deploy and publish updates
        working-directory: ./public
        # user.email 還有 user.name 可以取自己喜歡的,一定要設定不然會出錯
        run: |
          # 當 git 有更動時才進行動作
          if [[ `git status --porcelain` ]]; then
            git config --local user.email "{typing your email}"
            git config --local user.name "{typing your name}"
            git add . -A
            git commit -m "build: auto publish"
            git push origin
          else
            echo "content no changes"
          fi          

      # 清除 cloudflare dns cache
      - name: clear cloudflare cache
        uses: nathanvaughn/actions-cloudflare-purge@master
        with:
          # Using Zone Id
          cf_zone: ${{ secrets.CLOUDFLARE_ZONE }}

          # Using API Token
          cf_auth: ${{ secrets.CLOUDFLARE_API_TOKEN }}

內容 {} 內的資訊請更換成自己的資訊
附上 yaml 範例,詳細 github-actions.yaml 文件請查閱 github 官方文件

建立檔案後,將 commit push 後,即可於 source code repo 的 Actions 頁面查看 CI/CD 的過程。


comments powered by Disqus