使用 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 对博文进行标签、分类。
• 使用 Alfred Web Search 快速搜索文章，比如按标题搜索 https://github.com/toFrankie/blog/issues?q=in%3Atitle+{query}+，以后可能考虑集成插件里。

Github Blogger

Github Blogger inspired by Aaronphy/Blogger.

此前离开简书，考虑过到掘金上续写，但现在掘金的整体质量不如以前，而且充斥着各种标题党，给人一种贩卖焦虑的感觉。后来看到了一种 Github Issue 的方案，找到了 Aaronphy/Blogger 插件，可以安安静静地写博客。

用了一段时间，发现有些地方用得不顺手、而且有一些 Bug，作者好久没更新了，那干脆就基于此作一个二次开发，修复了一些 Bug，并添加了一些功能，于是 Github Blogger 诞生了。

原作者的设计思路如下图，源自《在 VSCODE 中写博客吧》。

我没有直接 Fork 一个出来改，而是进行了重写。在原有功能的基础上，新增或调整了一些地方：

• 调整 UI 主题
• 调整 Markdown 主题表现，保持与 Github 一致
• 支持 Markdown 更多格式，比如数学公式、图表等
• 支持标题、多标签搜索
• 支持搜索面板
• 支持在 Github 中打开文章
• 支持文章备份，每次编辑保存都会记录到你的博客仓库中
• 修复按标签搜索无法翻页的问题
• 修复新建文章选择标签无法创建的问题
• 修复 Labels 只能显示前 20 个的问题

长这样 👇

如果你恰好也喜欢，欢迎来这里试试~ 👋

如何使用 Github Blogger

很简单，准备好一些几步就行：

1. 安装 Github Blogger（VS Code 扩展）。
2. 准备好你的 Github Personal Access Token，它使用 Github API 来创建、更新 Issue/Labels 等。
3. 使用 Command + Shift + P 或 Ctrl + Shift + P 快捷键唤起命令面板：
   • 键入 Config Github Blogger 完成初始配置。
   • 键入 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 分支，一般情况下无需特别设置。它主要用于图片、文章存档。

• 文章保存在 your-blog-repo/archives 目录。
• 图片保存至 your-blog-repo/images 目录。

请注意，你的博客仓库必须是公开的。原因是图床使用了 Github + jsDelivr 的方案，后者对私有仓库不支持，否则会出现图片无法查看的情况。

可配合 github-issue-toc 使用，它可以在 GitHub Issue 内生成目录。

The end.