安裝 hugo
homebrew (MacOs)
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
|
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 後台
- 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 的過程。