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

Mon, 01 Aug 2022 00:00:00 +0000

安裝 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 hugo@0.100.2

# 安裝擴展版本
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 官方文件

Freenom on Wayne's blog | 偉恩的部落格 | 技術博客

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

安裝 hugo

homebrew (MacOs)

scoop (Windows)

Chocolatey

apt-get (Linux)

利用 hugo 建立網站

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

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

設定自定義網址

註冊一個網址

前往 Cloudflare 後台

Cloudflare 後台設定強制使用 SSL

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

設定 github actions 做 CI/CD

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

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

準備材料3：取得 Global API Key

準備材料4：生成 API token

材料準備完畢，開始設定 `secret`

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

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

github-actions.yml 內容

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

Freenom on Wayne's blog | 偉恩的部落格 | 技術博客

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

安裝 hugo

homebrew (MacOs)

scoop (Windows)

Chocolatey

apt-get (Linux)

利用 hugo 建立網站

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

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

設定自定義網址

註冊一個網址

前往 Cloudflare 後台

Cloudflare 後台設定強制使用 SSL

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

設定 github actions 做 CI/CD

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

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

準備材料3：取得 Global API Key

準備材料4：生成 API token

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

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

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

github-actions.yml 內容

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

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

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

材料準備完畢，開始設定 `secret`

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

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