20220904 - SITCON 2022 - 從 0 到 GitHub Actions，以 Hexo Blog 為例設計專屬的 CI/CD Pipeline

Slide 1

Slide 1 text

主講者 tico88612 從 0 到 GitHub Actions，以 Hexo Blog 為例設計專屬的 CI/CD Pipeline

Slide 2

Slide 2 text

About me ⚫ 梯口 / 楊承昊 ⚫ Username：tico88612 ⚫ 去花蓮寫論文的碩二生 ⚫ 修習高中教育師資學程 ⚫ 科技公司擔任 ITSRE 工讀生 ⚫ 歡迎拿鏡音鈴戳友(O)

Slide 3

Slide 3 text

P a r t 1 前言＆故事

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

⚫ 有後台管理系統 ⚫ 所見即所得（程式碼 Highlight 較難） ⚫ 有網路狀態下編輯、發佈 CMS 內容管理系統 SSG 靜態生成網站 ⚫ 版型自訂較靈活 ⚫ Markdown（程式碼 Highlight 較簡單） ⚫ 只能在單台電腦上編輯、發佈

Slide 8

Slide 8 text

P a r t 2 自動化前的準備

Slide 9

Slide 9 text

貓咪對這是貓咪，貓的演化可以追溯至新生代第三紀古新世演化出的肉齒類，肉齒類動物為所有現代食肉目動物的共同演化祖先。

Slide 10

Slide 10 text

執行 yarn run build 就會產生靜態網頁

Slide 11

Slide 11 text

Deploy 『如果你的建置、部署、測試、發佈流程無法自動化，那它就是不可重複的。』 Image Source: Anne Zhou

Slide 12

Slide 12 text

P a r t 3 設計 CI/CD

Slide 13

Slide 13 text

0. Architecture

Slide 14

Slide 14 text

0. Architecture (cont.) 1. Hexo Source 不要追蹤自動生成的頁面。 2. Hexo Source 如果有用到其他的 Git Repo，請善用 Submodule。 3. CI/CD 是分開的概念： 3.1. CI 持續整合，確定程式碼是可以產生頁面。 3.2. CD 持續部屬，將結果自動推送出去。 4. 保持分支的簡潔，這裡會把產生出來的網頁放到別的 Repo 上。

Slide 15

Slide 15 text

1. 準備 Deploy Key 要準備 deploy key 就要用 ssh-keygen 生成公鑰私鑰 ssh-keygen -t ed25519 -C "" -f deploy 可以替換成你的 GitHub Email 或者照下面填寫 GitHub Actions Bot 的 Email。 ssh-keygen -t ed25519 -C "41898282+github-actions[bot]@users.noreply.github.com" -f deploy 之後就會生成 deploy.pub 跟 deploy 兩個檔案。

Slide 16

Slide 16 text

Deploy Key deploy.pub 公鑰 deploy 私鑰

Slide 17

Slide 17 text

2. Hexo Source 專案中放上私鑰 Secret 名稱要記得 Actions 會使用到

Slide 18

Slide 18 text

3. GitHub Pages 專案中放上公鑰記得要打勾 write access 這樣 Actions 才能自動推送

Slide 19

Slide 19 text

4. 設定 GitHub Actions CI 我們可以回想一下我們要怎麼設計 GitHub Actions 流水線。  git clone  yarn (a.k.a yarn install)  yarn run build  產生好的靜態網站 Upload Artifact

Slide 20

Slide 20 text

GitHub Actions CI 推送時觸發此 Workflow 時區變更為 UTC+8 專案 Checkout 下來

Slide 21

Slide 21 text

GitHub Actions CI (cont.) 安裝 Node v16 安裝相依性套件、產生網頁上傳產生後的網頁放到 GitHub Artifact 上

Slide 22

Slide 22 text

5. 設定 GitHub Actions CD 上個步驟藉由 CI 把 Build 好的結果上傳到 Artifact 上，這裡只要下載回來即可。  Download Artifact  git push 到其他專案 (或者你要 Deploy 到 FTP 上也可以)

Slide 23

Slide 23 text

GitHub Actions CD 下載剛剛上傳的 Artifact 需要完成上個 Job 才能做 Deploy Push 到其他的 Repo

Slide 24

Slide 24 text

GitHub Actions CD (cont.) 紀錄的 Secret name 目的 Repo 資訊目的 Repo 分支

Slide 25

Slide 25 text

6. GitHub Pages 專案中設定 Branch 選擇 branch 就按下 Save 即可

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

以上 Demo 範例程式已經放在 GitHub 上 Hexo Source Repo: https://github.com/tico88612/cicd-hexo-blog-template GitHub Pages Repo: https://github.com/tico88612/cicd-hexo-blog-pages Demo Site: https://cicd-blog.yangjerry.tw/

Slide 28

Slide 28 text

P a r t 4 Slido QA

Slide 29

Slide 29 text

Thank you ⚫ Website: https://yangjerry.tw ⚫ Blog: https://blog.yangjerry.tw ⚫ GitHub: tico88612 ⚫ Instagram: @__tico88612__ ⚫ Discord: @tico88612#0001