Obsidian發佈到github.io

#🆒

前言

前陣子弄好了Obsidian自動發佈到vercel，
成果也還不錯，但就是偶爾有點問題，
因為是免費用戶，所以會碰到無法更新。
有天一怒之下，就自己改成用github了。

正文

首先前面還是一樣160.Obsidian發佈網站，
步驟要先設定好從Obsidiant傳到你的github。
193-fig.1.png

當你在Obsidian選擇publish時，會將內容傳到public_vercel 這個repository。
193-fig.2.jpg

所以，接下來的流程是，在public_vercel 使用github action，
將obsidian的內容編譯成html，再轉到github的網站上面。

  1. 到github建立個人網頁
    到github，建立一個自己使用者的子網域，
    repository的名稱會是 user.github.io 這種名稱，
    只有user這個字可以改。
    建立完後，可以先弄個index.html到github裏面，
    然後訪問剛剛建立的網址，
    我建立的名稱為daimom.github.io
    193-fig.3.jpg
    所以網址就是 daimom.github.io

    ref. github_page

  2. 將npm轉成pnpm
    其實這一步也可以不做，
    那就是寫github action的時候，不能用pnpm只能用npm，
    程式應該也要小改一下，
    但pnpm會比較快，我就順便改一改了。

到 public_vercel的資料夾底下，執行下面三行，參考從 npm 遷移到 pnpm，
有些步驟我測試是不需要，
重點是 pnpm import，要將package-lock.json 轉成 pnpm-lock.yaml。

# 刪除npm package
rm -rf node_modules 
# 安裝pnpm
npm install -g pnpm
# 轉換相關檔案
pnpm import

完成後，上傳到github。

  1. 建立github action
    資料夾結構如下
    193-fig.4.jpg
    能改檔案名稱的只有build-site.yaml以及 install-pnpm，
    但後者要改的話，程式內容也需要改，不熟的話不建議更改。

build-site.yaml的程式如下

name: 'Build Sites'

on:
  workflow_dispatch:
    inputs:
      deployment-version:
        description: 指定版本
        required: false
  schedule:
    - cron: '0 10 * * *'
jobs:
  build-site-test:
    runs-on: ubuntu-latest
    steps:
      # [Checkout]
      - name: Checkout code repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      # [執行腳本] 構建 pnpm 及 Node 環境
      - name: '[Macro] Prepare environment'
        uses: ./.github/actions/install-pnpm

      # [執行腳本] 構建html
      - name: '[Macro] Build sites '
        shell: bash
        run: pnpm build

      - name: Push to HTML Repository
        run: |
          git config --global user.email $
          git config --global user.name "daimom"
          git config --list
          git clone https://$@github.com/daimom/daimom.github.io.git temp-html-repo
          cp -r dist/. temp-html-repo/
          
          cd temp-html-repo
          git add .
          git commit -m "Update from Build Repository"
          git remote -v
          git push origin main

install-pnpm/action.yaml的程式如下

name: 'prepare'
description: 'Prepare environment'

runs:
  using: 'composite'
  steps:
    - name: Setup pnpm
      uses: pnpm/action-setup@v2
      with:
        version: 8
    - name: Setup node.js
      uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: 'pnpm'

    - name: Install dependencies
      shell: bash
      run: pnpm install
簡易說明

這邊的設定是每天的UTC 10:00 執行一次，
如果要自定時間的話，可以參考Crontab 中文線上 編輯器
測試的時候可以先把

  schedule:
    - cron: '0 10 * * *'

改成

push:
  branches:
	- 'main'

這樣只要推上去main就會觸發動作了(注意排版)。

ref. 以 GitHub Action 來發推文

或者是直接手動部署，
在public_vercel的github action選擇你的Action ，再選 Run workflow
193-fig.6.jpg

程式裏面的 $ 是要到repository裏面設定。
193-fig.5.jpg
也可以直接輸入你的email，反正email這東西應該已經...。
但重點是底下的 $ ，
這個一定要用secret隱藏，而且不能外流。
產生的方式，詳閱， 160.Obsidian發佈網站#建立github token
再來將產生的token，新增到sercret裏面。

ref.