使用 VS Code + Github 搭建個人博客詳情 - 博客搭建,github,markdown,前端,博客越前君博客

配圖源自 Freepik

候選方案

選擇很多，門檻很低。

現有平台：

掘金
語雀
知乎
簡書
博客園
微信公眾號
SegmentFault
Medium
...

自行搭建：

WordPress
Hexo
GitBook
VuePress
dumi
...

如何選擇？

我們寫個人博客的初衷，大致會有這些吧：

記錄踩過的坑、解決過的難題、生活等
建立知識庫、影響力
總結歸納，提升寫作表達能力
內容輸出、觀點分享、討論及改進
...

我想要的：

隨時隨地編輯發佈
良好的 Markdown 語法支持，有圖牀
無內容審核（國內尤為明顯，比如文中有競品字眼或 URL 容易限流/封禁）
良好的 SEO（還是希望寫的東西可以讓更多人看見）
可以專注於內容輸出
...

在國內的話，可能是掘金、語雀、博客園會好一些，用户羣體基本都是程序員，可以帶來更多討論。知乎 Markdown 支持度太差了。簡書內容審核很嚴格且傻逼，我在簡書寫了幾年，後來由於審核機制太傻逼，改個文字動不動封禁，忍無可忍就溜了。

自行建站要考慮 SEO、圖牀、域名備案、運維費用等。選擇國內平台，無法避免的是內容審核，改個字都得審核一下。🙄

總之，各有利弊，選擇一個合適自己的就行。

我的選擇

我的博客：種一棵樹，最好的時間是十年前。其次，是現在。

使用 GitHub Blogger 作為編輯器，可以快速編輯、發佈（VS Code WebView Extension）。
使用 GitHub + jsDelivr 作為圖牀，且支持 CDN 加速。
使用 GitHub Repository 進行文章存檔，每次編輯都會被記錄。
使用 GitHub Issues 作為博文列表。
使用 GitHub Labels 對博文進行標籤、分類。
使用 Alfred Web Search 快速搜索文章，比如按標題搜索 https://github.com/toFrankie/blog/issues?q=in%3Atitle+{query}+，以後可能考慮集成插件裏。

GitHub Blogger

Inspired by Aaronphy/Blogger.

此前離開簡書，考慮過到掘金上續寫，但現在掘金的整體質量不如以前，而且充斥着各種標題黨，販賣焦慮的味太濃了。後來遇到了 Aaronphy/Blogger 可以靜靜地寫了。

用了一段時間，發現有些地方不太順手、有一些 Bug，作者也很久沒更新了。然後就二次開發了，修了一些 Bug，加了一些新功能，於是 GitHub Blogger 誕生了。

原作者的設計思路如下圖，源自《在 VSCODE 中寫博客吧》。

在原有基礎上調整了一些地方：

調整 UI 主題
調整 Markdown 主題表現，保持與 GitHub 一致
支持 Markdown 更多格式，比如數學公式、圖表等
支持標題、多標籤搜索
支持搜索面板
支持在 GitHub 中打開文章
支持文章備份，每次編輯保存都會記錄到你的博客倉庫中
修復按標籤搜索無法翻頁的問題
修復新建文章選擇標籤無法創建的問題
修復 Labels 只能顯示前 20 個的問題

2025 年中，完全重構了，交互體驗跟原生 GitHub 一致。現在長這樣 👇

如果剛好你也喜歡，歡迎來試試~ 👋

如何使用 GitHub Blogger？

由於 GitHub Blogger 內部使用 jsDelivr 的圖牀方案，後者不支持私有倉庫（更多），因此你的博客倉庫必須是公開的，否則圖片無法顯示。

很簡單：

你需要註冊一個 GitHub 賬號（已有忽略）
你需要安裝 VS Code、Cursor 等編輯器（理論上基於 VSCodium 的編輯器都支持）
在編輯器上安裝 GitHub Blogger 擴展，亦可在擴展處搜索 Frankie.github-blogger
準備好你的 GitHub Personal Access Token（調用 GitHub API 需要用到）
使用 Command + Shift + P 或 Ctrl + Shift + P 快捷鍵喚起命令面板：
1. 鍵入 Configure GitHub Blogger 完成初始配置（倉庫可以選擇已有的公開倉庫）
2. 鍵入 Open GitHub Blogger 打開編輯界面，就可以開始了。

擴展配置：

{
  "github-blogger.token": "xxx", // Your GitHub Personal Access Token
  "github-blogger.user": "xxx", // Your GitHub Username
  "github-blogger.repo": "xxx", // Your GitHub Repository Name
  "github-blogger.branch": "main" // Your GitHub Repository Branch Name
}

其中 branch 默認是 main 分支，它決定圖片、文章存檔提交到哪個分支。通常博客倉庫不像實際項目有多個分支，一般無需特別設置，是倉庫主分支就行。

可配合 github-issue-toc 食用，它可以在 GitHub Issue 頁面右側生成目錄。

GitHub Flavored Markdown（GFM）除了支持標準的 CommonMarkdown 語法之外，還更多特有格式，詳見這裏。

越前君博客

越前君博客

博客 / 詳情