目前我的開發環境，包含這個 Blog 都是在單一一台個人電腦內進行
然而考慮到未來撰寫的環境不同，以及設備可能更換
因此想著把整個 blog 搬動到 Github 上面，並透過自動化進行部署

在一開始，先附上我最後完成的流程圖

  
@startuml Converter CLI
Actor "local" as us
queue "hugo-dev" as hgd #96CEB4
queue "Hugo-main" as hgm #96CEB4
queue "Web-dev" as webd #B7E0FF
queue "Web-main" as webm #B7E0FF
participant "Website" as web #E78F81
group#Gold #LightBlue Local operation
us -> hgd: git clone 或 git fetch
hgd -> us: 讓local與雲端同步
hnote over us 
修改hugo內容
透過 "hugo" 更新 public
"git add ."
"git commit -m "xxx""
endhnote
us -> hgd: git push
end
group#Gold #pink Github operation
hgd -> hgm: 手動 merge
hgm -[#red]> webd: Githug Action trigger when commit, pull request
webd -> webm: 手動 merge
end

group#Gold #E5D9F2 Cloudflare page function
webm -[#red]> web: Trigger when commit, auto build
end
@enduml

盤點了我所需要的內容之後，我有以下需求：

我的 Hugo 專案要上 Github 的 repo，這樣我才可以在各種環境 push 上去
我的 Hugo 專案可以有一個方式，把 “public” 推到我的 blog 網頁 repo 內
blog 網頁 repo 有更新後，會自動部署

Hugo 專案上 Github Repo，時常與 local 同步

一開始想說這個滿簡單的，不就是直接把整個資料夾搬上去就好了嗎？
而當我把檔案放上 Github 之後
另外在 local 用另外一個環境把他 git clone 下來時
發現了一個最重要的問題 – 我的 theme 資料夾下的主題被清空了 造成我在修改以及 build 時都沒辦法調整在研究之後，發現主要是因為我原本 local 內的 Hugo 主題是使用 addmodule 的方式加入
因此當我在將資料夾 push 上去時，addmodule 不會被一起上傳上去，而當再次 git clone 時造成地端不同步

解決方法

很土法煉鋼XD
把檔案重新整理，手動在桌面複製 theme 下主題的所有檔案
然後把 local clone 下來的 repo 內 theme 刪除
重新建立 theme 資料夾後再把主題放進去(用桌面copy的，而不是用 git addmodule) 再次測試上傳就沒問題了

在此之後，我就可以隨時用任何一個 device，透過 git clone 或 fetch 來與我的 github 同步
並且在修改完成之後放上去

Github action 自動同步 Puclic 資料夾

由於我要接下來的目標是從 hugo-blog -> webpage 這兩個 Repo 的資料交換
經過構思後，實際的需求為

當我的 hugo-blog 的 main 有 commit 時
自動把 hugo-blog/public 內的檔案同步到 webpage 的 dev

因此我們可以透過 Github Action 完成此想法進行 Github Action 包含以下步驟：

在自己的 Github account 內建立一組 github token
在要進行的 Repo 內，保存 token 變數為 PAT
在 repo 內新增一個 github action，撰寫以下內容

name: Sync Public Folder to Website-page

on:
  push:
    branches:
      - main

jobs:
  sync-public:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout hugo-blog repo
        uses: actions/checkout@v2
        with:
          path: hugo-blog

      - name: Checkout page repo
        uses: actions/checkout@v2
        with:
          repository: githubname/Website-page
          token: ${{ secrets.PAT }}
          path: Website-page
          ref: dev
          
      - name: Sync public folder
        run: |
          rm -rf page/*
          cp -r hugo-blog/public/* page/
          cd page
          git config user.name githubname
          git config user.email [email protected]
          git add .
          git commit -m "Sync public folder from hugo-blog"
          git push origin dev

如此一來可以觸發當我 hugo-blog 的 main 有變動時，會自動把 public 底下的檔案全部當作變動
推到我的 Website-page 中的 dev，屆時我在手動 merge 即可

Blog 網頁自動部署

這部分反而是最簡單的
我直接找了 Cloudflare Page 當作我的 Serverless solution
並直接抓取我的 Website-page 的 main
也因此當我有 merge 時就會自動 deploy
另外直得注意的是，為了節省每個月 build 的次數，我是直接把 preview 關掉

結論！全自動化的開心

完成自動化的成就感滿讚的
能減少許多手動的流程，可以減少許多時間以及流暢度
這樣的自動化我解決了以下問題

只能在固定的電腦上修改 hugo 專案
hugo 更新後要手動更新 public 到雲

不過目前還是保留了 Github 上面手動 commit 到 main 這段步驟
主要是有點覺得…重要決策還是保留給人來進行
謝謝大家收看！有什麼建議或想法也歡迎跟我說喔

更新，Cloudflare page 直接部署

前一陣子看其他的教學時，發現可以直接在 Cloudflare page 部署的時候
直接設定抓取 repo 內指定的資料夾來 Build
因此我就能夠簡化成 我的 hugo-main 有 commit 時，cloudflare page 會自動把 "public" 資料夾內的內容 build 起來
如此以來就不需要額外 maintain 一個 web 的 repo
而我前面花時間研究的 Github action 其實也可以大刀一砍

最後附上更新之後的流程圖，雖然繞了一圈發現做了白工XD
但過程也是有學到東西，等到未來真的要使用 Github action 時能更游刃有餘

  
@startuml Converter CLI
Actor "local" as us
queue "hugo-dev" as hgd #96CEB4
queue "Hugo-main" as hgm #96CEB4
participant "Website" as web #E78F81
group#Gold #LightBlue Local operation
us -> hgd: git clone 或 git fetch
hgd -> us: 讓local與雲端同步
hnote over us 
修改hugo內容
透過 "hugo" 更新 public
"git add ."
"git commit -m "xxx""
endhnote
us -> hgd: git push
end
group#Gold #pink Github operation
hgd -> hgm: 手動 merge
end

group#Gold #E5D9F2 Cloudflare page function
hgm -[#red]> web: Trigger when commit, auto build
end
@enduml

Hugo 專案上 Github ，自動部署建立網站

Github Action 以及 Cloudflare page 的使用