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

配图源自 Freepik

搭建个人博客的方案

现在,搭建个人博客的方式有很多,门槛也很低。

可以选择已有平台:

  • 掘金
  • 语雀
  • 知乎
  • 简书
  • 博客园
  • SegmentFault
  • ...

也可以选择一些主流的博客框架,自行搭建。

  • 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 以打开编辑界面,就可以愉快地进行创作了

该扩展配置 settings.json 如下:

{
  "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-repo/archives 目录中,按年份收纳。
  • 上传的图片会保持至 your-repo/images 目录,按年份、月份分类。

除此之外,要注意由于图床使用 Github + jsDelivr 方式进行访问的,jsDelivr 对私有仓库不支持,因此你的博客仓库不能设为 Private。

The end.

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容