使用 VS Code + GitHub 搭建个人博客

[tofrankie]

相关话题

• 为什么程序员必须坚持写技术博客？
• 现在搭建个人博客还有意义吗？
• 一般技术大牛都在哪里写博客？
• 为什么现在很多个人博客网站没有更新了呢？
• 作为一个程序员，发技术博客推荐什么平台？博客园值得写吗？
• 现在个人博客不能备案了吗？

候选方案

选择很多，门槛很低。

现有平台：

• 掘金
• 语雀
• 知乎
• 简书
• 博客园
• 微信公众号
• 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 对博文进行标签、分类
• 使用 Raycast Quicklinks 快速搜索文章，比如按标题搜索 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 的图床方案，后者不支持私有仓库（更多），因此你的博客仓库必须是公开的，否则图片无法显示。

很简单：

1. 你需要注册一个 GitHub 账号（已有忽略）
2. 你需要安装 VS Code、Cursor 等编辑器（理论上基于 VSCodium 的编辑器都支持）
3. 在编辑器上安装 GitHub Blogger 扩展，也可在编辑器内搜索 frankie.github-blogger 扩展
4. 准备好你的 GitHub Personal Access Token（调用 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 分支，它决定图片、文章存档提交到哪个分支。通常博客仓库不像实际项目有多个分支，一般无需特别设置，是仓库主分支就行。

可配合 github-issue-toc 食用，它可以在 GitHub Issue 页面右侧生成目录。

GitHub Flavored Markdown（GFM）除了支持标准的 CommonMarkdown 语法之外，还更多特有格式，详见这里。