使用 GitHub Issues 來寫 Blog 的構想

之前自己做了由 Markdown 生成部落格的程式，雖然對品質十分滿意，但還是有一個十分困擾的點：沒有方便好用的 Markdown 編輯器。

當然純文字的話 Markdown 寫起來和呼吸一樣，最主要的問題是寫部落格的話會非常頻繁的需要使用「圖片」。

以往在 VSCode 寫 Markdown，把圖片放進 repo 之後手動將圖片路徑的過程是最大的麻煩。

這時就會很想要像在 Notion 或 Medium 那樣直接拉一張圖片進來就好的舒暢操作。

但基於不想要任何多餘負擔和不追蹤訪客行為的想法，市面上的服務還是無法滿足我。

這時閃過了一個念頭：是不是可以拿 GitHub 的 Issues 來用呢？

來看一下 GitHub 的 Issue 功能

好用熟悉的編輯器，到哪都可以方便使用
方便的圖片上傳功能，拖曳進去就自動上傳和生成 markdown
有 tag 功能，也能方便做文章分類
可以取得 Markdown 甚至 HTML 格式內容

使用官方的 octokit 取得資料也是極為方便

import { graphql } from "@octokit/graphql";

const { repository } = await graphql(
  `
    {
      repository(owner: "octokit", name: "graphql.js") {
        issues(last: 3) {
          edges {
            node {
              title
              number
              createdAt
              body
            }
          }
        }
      }
    }
  `,
  {
    headers: {
      authorization: `token secret123`,
    },
  }
);

透過像這樣的程式碼就可以取得標題、Issue編號、創建時間和內容。對於做部落格的索引和文章內容都足夠了！由此看來實現這個構想應該是可行的。

使用服務如下：

以 GitHub Issue 作為資料來源
用 Next.js SSG，並部署到 Vercel 上。（優點：免費 Image Optimization）

一些問題與解決方法：

不要在 local 開發或預覽時去呼叫 GitHub API，而應使用 Mock 或 Cache 減少 GitHub API request 的頻率。如果超過 GitHub API 限制的頻率，是會被停權的。
Vercel 會在 GitHub 有 push 時 deploy。但沒有我們的資料來源變更（編輯或新增 GitHub Issue）時的觸發事件。想到的解決方法是可以利用 GitHub Actions 在 issues 變更時跑一個 workflow 去新增一個 commit，就會觸發 Vercel deploy。（已經驗證可行）
取得 issue 時可以過濾 tag 來達成草稿的目的。可以過濾作者以避免有人跑到你的 repo 擅自開 Issue （如果是公開repo的話）
溫馨提醒，如果被 GitHub 判定濫用是會鎖帳號的。雖然我認為這在合理使用範圍，但要實踐的話建議避免使用你重要的工作帳號。

鴨鴨工程

使用 GitHub Issues 來寫 Blog 的構想