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

候选方案

选择很多，门槛很低。

现有平台：

掘金
语雀
知乎
简书
博客园
微信公众号
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 语法之外，还更多特有格式，详见这里。

posted @ 2024-03-17 00:43 越前君阅读(93) 评论(0) 收藏举报

刷新页面返回顶部

越前君