Laurence10's blog

最近有佛心同事開了 React 教學工作坊
赫然發現自己已經好久沒有寫 UI 相關的程式了
果然是用進廢退
不過上了幾次課之後
一些相關的感覺又慢慢找回一點點

上完課後自己又重新作了一次工作坊上的 lab
忽然想到
若是要給別人看看自己寫的 React app
能否用 GitHub Pages 當作一個 demo site
又想到可以用 GitHub Actions 來佈署 GitHub Pages
基於上述的想法
蒐集了一些資料來玩玩看

首先是將 React app 放到 GitHub Pages 上
主要是參考西打藍 Siddharam 這篇文章 - 將create-react-app佈署到GitHub Pages
不過裡面是在 local 利用 gh-pages 這個套件
作出發布用的資料夾後
把東西推到自己 repository 的 gh-pages branch 內

設定 dev 相依套件 gh-pages 以及 homepage 屬性

接著要利用 GitHub Actions 作到自動佈署 GitHub Pages
參考找到的 Christoph Michel 這篇 - How to deploy a create-react-app with github-actions
裡面提到要讓 GitHub Actions 能夠作 git push
必須設定一個 deployment key
文章內有說明步驟
或是參考 GitHub 官方文件也可以很輕鬆完成

設定 deploy keys 跟 repository secrets

不過 Christoph Michel 那篇介紹的是
當每次 git push 到 master branch 時
會自動觸發 GitHub Actions 來發布
但我想要一種情境是
我可以手動選擇要發布的 branch
例如我可能作了兩個版本
個別放在 branch A 與 branch B
我想要隨時可以手動發布 branch A 或是 branch B 到 GitHub Pages
參考 Adam McArthur 這篇 - How to Manually Trigger a GitHub Actions Workflow
學到了一個手動觸發的 event - workflow_dispatch