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

by Williamin Program, Toolon Posted on

 

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

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

閱讀時間: 4 分鐘

安裝 hugo

homebrew (MacOs)

1brew 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)

1sudo apt-get install hugo

利用 hugo 建立網站

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

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

1git 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 74name: 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 siteruns-on: ubuntu-lateststeps:# 使用當前 source code 的 repo- name: checkout source code repouses: actions/checkout@v3with:# 因為目前的 repo 有使用到 submodule(hugo themes)，所以 submodule 也要一併同步，不然原本的 repo 是沒有 submodule 的內容submodules: truetoken: ${{ secrets.ACCESS_TOKEN }}# public 網站是放置在另一個 repo 所以這裡也要 clone 一份下來處理# 因為我 Hugo 預設是產生檔案到 public 資料夾，所以將 public repo clone 到 ./public/ 內，以便後續 publish- name: clone and checkout public repouses: actions/checkout@v3with:# 這裡是 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_tokentoken: ${{ secrets.ACCESS_TOKEN }}# 使用別人做好的 Hugo Actions- name: setup hugouses: peaceiris/actions-hugo@v2with:hugo-version: latestextended: true# 用 Hugo 產生檔案- name: build content to public siteworking-directory: ./# --cleanDestinationDir 清除舊檔案run: hugo --minify --gc --cleanDestinationDir# 將檔案 commit 到 網站 public repo- name: deploy and publish updatesworking-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 cacheuses: nathanvaughn/actions-cloudflare-purge@masterwith:# Using Zone Idcf_zone: ${{ secrets.CLOUDFLARE_ZONE }}# Using API Tokencf_auth: ${{ secrets.CLOUDFLARE_API_TOKEN }}

內容 {} 內的資訊請更換成自己的資訊

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

github ci/cd freenom cloudflare