使用 Statiq 在Github Page 部屬靜態部落格網站 3 Github Action 使用 Statiq 在Github Page 部屬靜態部落格網站、設定Github Action

Published on Thursday, February 9, 2023

Github Action

承接上一篇: 使用 Statiq 在Github Page 部屬靜態部落格網站 2

在上一篇中我們成功建立了屬於自己的Blog,但是目前只有在本地環境才能看到
今天我們嘗試把內容更新到Github並開啟Github Page

首先我們專案所在的目錄,可以看到目錄底下有一個output資料夾(如果沒有請運行dotnet run,專案會自動輸出)
此資料夾包含由框架將markdown文件轉換成Html網站的成品
所以我們可以直接將此資料夾的內容部屬到任何伺服器上並不限於Github Page
但是每次當我們寫了一篇新文章就必須先下dotnet run命令,之後再手動部屬到伺服器上
這個過程難免有些繁瑣,所以我們可以依靠Github Action自動幫我們編譯程式以及自動部屬

這個流程基本上作者已經實作完成了我們只要直接使用即可,首先我們看一下文檔 github-pages-deployment
在這邊作者有實作一個擴充方法DeployToGitHubPages我們這邊直接修改Program.cs即可

await Bootstrapper
    .Factory
    .CreateWeb(args)
    .DeployToGitHubPages(
        "allengaodev", //修改成自己的帳號
        "allengaodev.github.io", //修改成自己的帳號
        Config.FromSetting<string>("BLOG_TOKEN") //之後建立一個新的Github Token
    )
    .RunAsync();

需要注意BLOG_TOKEN我們待會會在Github上建立,之後再Github倉庫上建立新的secret,Github會直接幫你處理取值的流程 之後在資料根目錄建立以下文件與內容

mkdir .github\workflows
touch .github\workflows\github-actions.yml
name: Deploy Site
on: [push]

jobs:
  build:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@master
        with:
          submodules: recursive
      - uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '7.0.102' # SDK Version to use.
      - run: dotnet run -- deploy
        env:
          BLOG_TOKEN: ${{ secrets.BLOG_TOKEN }}

同樣的這邊的BLOG_TOKEN,Github會直接幫你處理取值的流程,不需要更改
都建立完成後就可以開始設定Github了,總共有以下幾件事需要做:

  • 建立一個倉庫(public or private)存放本專案,名稱可以隨意

  • 建立一個Github Page的專案,名稱需要為自己的帳號名稱.github.io

  • 建立一個personal access token,名稱可以隨意,需要勾選repo區域權限過期時間看個人需求設定,請小心保存此Token StatiqGithubAction-PAT

  • 在剛剛建立的倉庫的setting頁面設定Secrets,名稱需要與剛剛的yml檔內容相同,內容輸入剛剛記錄下來的PAT
    StatiqGithubAction-Secrets

  • Push程式碼

以上動作都完成後可以到倉庫裡的Actions頁面,會發現Github已經在自動執行任務了 StatiqGithubAction-Actions

當任務執行成功時會顯示綠燈,接下來回到自己的Github Page的專案(帳號名稱.github.io)底下的Settings/Pages
注意這邊預設會發布到分支gh-pages,可以直接將讀取的分支修改成gh-pages,也可以再另外發Pull Request在合併到主分支內
使用Pull Request的好處是修改後的內容不會直接讓會員看到,需要手動合併到main分支,這樣可以多一次確認的機會 StatiqGithubAction-Pages


Summary

至此我們已經成功建立了自動發布的流程,接下來只要專心在posts資料夾寫文章就好,其他事情Github Actions會幫你處理,不用我們自己再去操心了

可以在Github Repo查看今天的進度