接近完美的 Blog 服務

接近完美的 Blog 服務

三月 08, 2022

Blogger

Last updated: 2023-06-08 03:10:38

2023/06/08 補充說明

Github 圖檔上傳機制似乎有調整，導致存在 Private repository 的 issue 中的圖檔無法讓任意人觀看；這個是一個補強性的功能，讓 private 的人必須擁有對應權限才可觀看，因此若打算使用我和一樣使用 Github 做為 Blog 服務則可選一個 Public repository 內開一個 issue ，將圖檔上傳至該處後將產生的圖檔 url 搬到原本的 issue 裡。 (本已是 Public 則可略過，因為是只有在 Private 轉到 Public 內容會發生)

前言

現在 Blog 選擇有

  1. Google - Blogger
  2. 城邦媒體子公司 - 痞客邦
  3. Medium
  4. 方格子
  5. 自架 Blog 需要準備 Server - Wordpress 、 Ghost
  6. 自架 Blog 需要準備可放 Web 的空間 - Hugo 、 Hexo 、 Jekyll
  7. 借用 6 加上第三方 CMS

此篇以分享文 透過 Github Issue 更新 Blog 內容 (Firebase 版) 為改造，使用 Github 服務打造 一站式 Blog 服務 。

(一) 準備環境

  1. Git service (版控)
  2. 放置 Web 內容的空間
  3. CI/CD 服務
  4. 開立 Repository

以下範例使用 Github 、 Github Pages 、 Github Actions 和 Hexo。

(二) 取得 Personal access token

  • 創立新的 Personal access token
  • 勾選 Repository 授權範圍 (Public 只需選 public_repo ，Private 則需所有控制權) Personal access token options
  • 記下此次新建立的 Token

(三) 安裝 Blog framework (Hexo 為例)

需要安裝步驟可參考之前的分享文 [Hexo] Gtihub 上架 Blog

(四) 設定 Github 的 CMS

  1. 選擇撰文的 Repository (可和 Blog 的網頁在不同 Repository)
  2. 設定撰文的 Github Actions
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    name: <Action 的名稱>
    on:
      issues:
        types: [opened, edited, closed, reopened, deleted]

    jobs:
      publish:
        runs-on: ubuntu-latest

        steps:
          - name: Checkout code
            uses: actions/checkout@v2
            with:
              repository: <Blog 的 Repository 位置 (如 ivanwei/blog)>
              ssh-key:  <設定訪問 Repository 的 ssh key (建議透過 ${{secrets.XXXX}})>

          - name: Setup User Information (設定代理人，可以不設定)
            run: |
              git config --global user.email "[email protected]"
              git config --global user.name "WorldEarthBot"
          - name: Setup Node.js
            uses: actions/setup-node@v2
            with:
              node-version: '16'
          - name: Install @ivanwei/git-issue-hexo-cli
            run: npm install -g @ivanwei/git-issue-hexo-cli

          - name: Refresh blog
            run: git-issue-hexo-cli refresh --git-token <放 Personal access token (建議透過 ${{secrets.XXXX}})> --label <篩選 issue 的 lable> -rep <撰文的 Repository name (如 blog-issue-source)> -u <Github name (如 ivanwei)> -o <匯出的位置 (如 ./source/_posts/zh-tw)>

          - name: Add commit to blog repository
            run: |
              git add .
              git commit -m "Refresh blog's contents"
              git push
  3. 設定 Hexo 內容更新
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    name: Publish
    on:
      push:
        branches:
          - main

    jobs:
      publish:
        runs-on: ubuntu-latest

        steps:
          - name: Checkout code
            uses: actions/checkout@v2
          - name: Setup ssh-agent
            uses: webfactory/[email protected]
            with:
              ssh-private-key: ${{secrets.SSH_PRIVATE_KEY}}

          - name: Setup User Information
            run: |
              git config --global user.email "[email protected]"
              git config --global user.name "WorldEarthBot"
          - name: Setup Node.js
            uses: actions/setup-node@v2
            with:
              node-version: '16'
          - name: Install Hexojs and packages
            run: |
              npm install -g hexo
              yarn install
          - name: Deployment
            run: npm run deploy

後記

過去使用 Hexo 架 Blog 的主要缺點是必須開啟 IDE 之類工具撰寫完後再將內容推至 Github ，後來 Netlify CMS 出現很大程度解決撰文環境的不便，但始終覺得需登入到另一個服務有些不便，因此開始思考是否有符合以下條件的撰文介面 1) 使用 Markdown 、 2) 圖片可以透過複製貼上上傳 、 3) 能暫存 、 4) 能即時預覽 ，最後能有權限管理更完美，而 Github 的 issue 功能滿足所有條件，只差能不能取得 markdown 內容！

很幸運地翻閱 Github API 文件確定透過 API 可以取得 issue 的 markdown 內容，看似完美也有隱藏的內容需要注意， Github issue 使用中文撰寫時有機會出現 <0x8x> 的 ascii code ，在 Hexo 一些轉化成 XML 檔的套件會失效，文字也會出現特別符號，好在 Preview 能看出來，也算是有方便的解方。

補充