接近完美的 Blog 服務

接近完美的 Blog 服務

三月 08, 2022

Blogger

Last updated: 2022-03-08 13:11:08

前言

現在 Blog 選擇有

  1. Google - Blogger
  2. 城邦媒體子公司 - 痞客邦
  3. Medium
  4. 方格子
  5. 自架 Blog 需要準備 Server - WordpressGhost
  6. 自架 Blog 需要準備可放 Web 的空間 - HugoHexoJekyll
  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/[email protected]
    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/[email protected]
    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/[email protected]
    - 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/[email protected]
    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 能看出來,也算是有方便的解方。

補充