使用 VS Code + Github 搭建個人博客

配圖源自 Freepik

相關(guān)話題

候選方案

選擇很多,門檻很低。

現(xiàn)有平臺:

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

自行搭建:

  • WordPress
  • Hexo
  • GitBook
  • VuePress
  • dumi
  • ...

如何選擇?

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

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

我想要的:

  • 隨時隨地編輯發(fā)布
  • 良好的 Markdown 語法支持,有圖床
  • 無內(nèi)容審核(國內(nèi)尤為明顯,比如文中有競品字眼或 URL 容易限流/封禁)
  • 良好的 SEO(還是希望寫的東西可以讓更多人看見)
  • 可以專注于內(nèi)容輸出
  • ...

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

自行建站要考慮 SEO、圖床、域名備案、運維費用等。選擇國內(nèi)平臺,無法避免的是內(nèi)容審核,改個字都得審核一下。??

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

我的選擇

我的博客:種一棵樹,最好的時間是十年前。其次,是現(xiàn)在。

  • 使用 GitHub Blogger 作為編輯器,可以快速編輯、發(fā)布(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.

此前離開簡書,考慮過到掘金上續(xù)寫,但現(xiàn)在掘金的整體質(zhì)量不如以前,而且充斥著各種標題黨,販賣焦慮的味太濃了。后來遇到了 Aaronphy/Blogger 可以靜靜地寫了。

用了一段時間,發(fā)現(xiàn)有些地方不太順手、有一些 Bug,作者也很久沒更新了。然后就二次開發(fā)了,修了一些 Bug,加了一些新功能,于是 GitHub Blogger 誕生了。

原作者的設(shè)計思路如下圖,源自《在 VSCODE 中寫博客吧》。

[圖片上傳失敗...(image-aa4a26-1752831046680)]

在原有基礎(chǔ)上調(diào)整了一些地方:

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

2025 年中,完全重構(gòu)了,交互體驗跟原生 GitHub 一致。現(xiàn)在長這樣 ??

如果剛好你也喜歡,歡迎來試試~ ??

如何使用 GitHub Blogger?

由于 GitHub Blogger 內(nèi)部使用 jsDelivr 的圖床方案,后者不支持私有倉庫(更多),因此你的博客倉庫必須是公開的,否則圖片無法顯示。

很簡單:

  1. 你需要注冊一個 GitHub 賬號(已有忽略)
  2. 你需要安裝 VS Code、Cursor 等編輯器(理論上基于 VSCodium 的編輯器都支持)
  3. 在編輯器上安裝 GitHub Blogger 擴展,亦可在擴展處搜索 Frankie.github-blogger
  4. 準備好你的 GitHub Personal Access Token(調(diào)用 GitHub API 需要用到)
  5. 使用 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 分支,它決定圖片、文章存檔提交到哪個分支。通常博客倉庫不像實際項目有多個分支,一般無需特別設(shè)置,是倉庫主分支就行。

可配合 github-issue-toc 食用,它可以在 GitHub Issue 頁面右側(cè)生成目錄。

GitHub Flavored Markdown(GFM)除了支持標準的 CommonMarkdown 語法之外,還更多特有格式,詳見這里。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容