Frankie

Posted on Dec 22, 2024 • Edited on Oct 20

Build a Personal Blog with VS Code + Github

#github #blogger #vscode #cursor

Available Options

Many choices, low barriers to entry.

Existing platforms:

Juejin
Yuque
Zhihu
Jianshu
Blog Garden
WeChat Official Account
SegmentFault
Medium
...

Self-hosted solutions:

WordPress
Hexo
GitBook
VuePress
dumi
...

How to Choose?

Our original intentions for writing personal blogs might include:

Recording pitfalls encountered, problems solved, and life experiences
Building knowledge base and influence
Summarizing and improving writing and expression skills
Content output, sharing opinions, discussions, and improvements
...

What I want:

Edit and publish anytime, anywhere
Excellent Markdown syntax support with image hosting
No content censorship (especially evident in China, where competitor mentions or URLs can easily trigger restrictions/bans)
Good SEO (hoping more people can discover what I write)
Focus on content output
...

In China, Juejin, Yuque, and Blog Garden might be better options. Their user base consists mainly of programmers, which can bring more discussions. Zhihu has poor Markdown support. Jianshu's content review is unfriendly. I wrote on Jianshu for several years, but later left due to their overly robotic review mechanism that would ban content for minor text changes.

Self-hosting requires considering SEO, image hosting, domain filing, and operational costs. Choosing domestic platforms means unavoidable content censorship, where even changing a word requires review. 🙄

In short, each has its pros and cons. Choose what suits you best.

My Choice

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

Using GitHub Blogger as the editor for quick editing and publishing (VS Code WebView Extension)
Using GitHub + jsDelivr as image hosting with CDN acceleration
Using GitHub Repository for article archiving, with every edit being recorded
Using GitHub Issues as the blog post list
Using GitHub Labels for tagging and categorizing blog posts
Using Raycast Quicklinks for quick article search, such as searching by title https://github.com/tofrankie/blog/issues?q=in%3Atitle+{Query}+

GitHub Blogger

Inspired by Aaronphy/Blogger.

After leaving Jianshu, I considered continuing on Juejin, but the overall quality of Juejin has declined compared to before, and it's now filled with clickbait titles and anxiety-inducing content. Later, I discovered Aaronphy/Blogger which allows for quiet writing.

After using it for a while, I found some areas that weren't quite convenient and some bugs. The author hadn't updated it for a long time. So I did some secondary development, fixed some bugs, and added new features, giving birth to GitHub Blogger.

You can read about the original author's design approach in "Writing Blogs in VSCODE"

I made some adjustments based on the original:

Adjusted UI theme
Adjusted Markdown theme presentation to maintain consistency with GitHub
Support for more Markdown formats, such as mathematical formulas, charts, etc.
Support for title and multi-tag search
Support for search panel
Support for opening articles in GitHub
Support for article backup, with every edit and save being recorded to your blog repository
Fixed the issue where tag search couldn't paginate
Fixed the issue where creating new articles with tag selection couldn't be created
Fixed the issue where Labels could only display the first 20

In mid-2025, it was completely refactored with an interaction experience consistent with native GitHub. Now it looks like this 👇

If you happen to like it too, welcome to try it~ 👋

How to Use GitHub Blogger?

Since GitHub Blogger internally uses jsDelivr for image hosting, and the latter doesn't support private repositories (more details), your blog repository must be public, otherwise images won't display.

It's simple:

You need to register a GitHub account (skip if you already have one)
You need to install VS Code, Cursor, or other editors (theoretically, editors based on VSCodium are supported)
Install the GitHub Blogger extension in your editor, or search for the frankie.github-blogger extension within the editor
Prepare your GitHub Personal Access Token (needed for calling GitHub API)
Use Command + Shift + P or Ctrl + Shift + P to open the command palette:
1. Type "Configure GitHub Blogger" to complete initial setup (you can choose an existing public repository)
2. Type "Open GitHub Blogger" to open the editing interface, and you're ready to start.

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 the main branch, which determines which branch images and article archives are committed to. Usually, blog repositories don't have multiple branches like actual projects, so no special setup is needed - just use the repository's main branch.

Can be used together with github-issue-toc, which can generate a table of contents on the right side of GitHub Issue pages.

GitHub Flavored Markdown (GFM) supports not only standard CommonMarkdown syntax but also many unique formats. See here for more details.

DEV Community