Frankie

Posted on Dec 22, 2024 • Edited on Jan 15 • Originally published at github.com

Build a Personal Blog with VS Code + GitHub

#github #blogger #vscode #cursor

Candidate Options

There are plenty of choices, and the barrier to entry is low.

Existing platforms:

Juejin
Yuque
Zhihu
Jianshu
Cnblogs
WeChat Official Account
SegmentFault
Medium
...

Self-hosting:

WordPress
Hexo
GitBook
VuePress
dumi
...

How to Choose?

The motivations for writing a personal blog are usually something like:

Document pitfalls you’ve run into, tough problems you’ve solved, life, etc.
Build a knowledge base and influence
Summarize and refine, improving your writing and communication
Output content, share opinions, discuss, and iterate
...

What I want:

Edit and publish anytime, anywhere
Solid Markdown support, plus image hosting
No content review/censorship (especially obvious in China—for example, mentioning competitors or including certain URLs can easily lead to throttling or bans)
Good SEO (I still want what I write to be seen by more people)
Stay focused on creating content
...

If you’re in China, platforms like Juejin, Yuque, and Cnblogs might be better overall. Their user base is mostly programmers, which can lead to more discussion. Zhihu’s Markdown support is terrible. Jianshu’s content moderation is pretty unfriendly—I wrote on Jianshu for years, but later its moderation became so robotic that even tiny edits could get you banned. I eventually couldn’t take it anymore and left.

If you self-host, you need to think about SEO, image hosting, domain registration/filing, ops costs, and so on. If you choose a domestic platform, moderation is basically unavoidable—change a word and you may still have to wait for approval. 🙄

In short, every option has pros and cons—just pick what suits you.

My Choice

My blog: 种一棵树，最好的时间是十年前。其次，是现在。

Use GitHub Blogger as the editor for fast writing and publishing (a VS Code WebView extension)
Use GitHub + jsDelivr as the image host, with CDN acceleration
Use a GitHub Repository to archive posts; every edit is recorded
Use GitHub Issues as the post list
Use GitHub Labels to tag and categorize posts
Use Raycast Quicklinks to quickly search posts, e.g. search by title with https://github.com/tofrankie/blog/issues?q=in%3Atitle+{Query}+

GitHub Blogger

Inspired by Aaronphy/Blogger.

After leaving Jianshu, I thought about continuing on Juejin. But Juejin isn’t as good as it used to be, and it’s now full of clickbait and a lot of “anxiety marketing”. Later I found Aaronphy/Blogger, and finally had a place where I could just write in peace.

After using it for a while, I noticed some rough edges and a few bugs, and the author hadn’t updated it for a long time. So I forked and built on top of it—fixed some bugs, added new features—and that’s how GitHub Blogger was born.

For the original author’s design approach, see “在 VSCODE 中写博客吧”.

On top of the original, I made a few tweaks:

Tweak the UI theme
Adjust the Markdown theme to match GitHub
Support more Markdown formats, such as math formulas and diagrams
Support searching by title and multiple labels
Provide a search panel
Support opening posts on GitHub
Support post backups—every save gets recorded in your blog repository
Fix label-search pagination not working
Fix not being able to create labels when creating a post
Fix Labels only showing the first 20 items

In mid 2025, it got a full rewrite, and the whole UX now feels basically the same as GitHub itself. It looks like this 👇

If you happen to like it too, feel free to give it a try~ 👋

How to Use GitHub Blogger?

Since GitHub Blogger uses jsDelivr for image hosting internally—and jsDelivr does not support private repositories (more)—your blog repository must be public, otherwise images won’t display.

It’s simple:

Create a GitHub account (skip if you already have one)
Install VS Code, Cursor, or another editor (in theory, editors based on VSCodium should work)
Install the extension from VS Code Marketplace or Open VSX. You can also search for the GitHub Blogger extension inside the editor.
Prepare your GitHub Personal Access Token (classic) (needed for calling the GitHub API)
Open the command palette with Command + Shift + P or Ctrl + Shift + P:
1. Type Configure GitHub Blogger to finish the initial setup (you can select an existing public repository)
2. Type Open GitHub Blogger to open the editor, and you’re ready to go.

Extension configuration:

{
  "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
}

The branch defaults to main. It determines which branch your images and archived posts are committed to. A blog repository typically doesn’t have multiple branches like a real project, so you usually don’t need to change it—just keep it as the repo’s default branch.

You can pair it with github-issue-toc, which generates a table of contents on the right side of GitHub Issue pages.

GitHub Flavored Markdown (GFM) not only supports standard CommonMarkdown syntax, but also includes additional GitHub-specific features. See here for details.

DEV Community