Build a Personal Blog with VS Code + Github

Introduction

Relevant discussions:

• Why should programmers insist on writing technical blogs?
• Is it still meaningful to create a personal blog nowadays?
• Where do tech experts usually write blogs?
• Why have many personal blogs stopped updating?
• As a programmer, which platform is best for blogging? Is CSDN worth it?
• Can personal blogs no longer register with ICP in China?

Blogging Options

There are numerous ways to start a personal blog, and the barriers to entry are very low.

Use Existing Platforms:

• Juejin
• Yuque
• Zhihu
• Jianshu
• CSDN
• WeChat Official Accounts
• SegmentFault
• Medium
• ...

Build Your Own:

• WordPress
• Hexo
• GitBook
• VuePress
• dumi
• ...

How to Choose?

The purpose of writing a personal blog often includes:

• Documenting challenges and solutions encountered
• Building a personal knowledge base
• Improving summarization, writing, and communication skills
• Sharing, discussing, and refining ideas and content
• Establishing personal influence
• ...

My requirements for a blogging platform are:

• Ability to edit and publish anytime, anywhere
• Strong Markdown support (including image hosting)
• Minimal content censorship (especially for domestic platforms, where even mentioning a competitor or a specific URL can result in throttling or bans)
• Good SEO to reach more readers
• A platform that lets me focus solely on content creation
• ...

In China, platforms like Juejin, Yuque, and CSDN are better choices because they cater mostly to programmers, leading to more discussions. Zhihu’s Markdown support is inadequate, and Jianshu’s content moderation is too strict—articles are frequently banned for trivial reasons. I wrote on Jianshu for several years but eventually left due to its overly restrictive and frustrating review mechanism.

If you’re building your own site, you’ll need to consider SEO, image hosting, domain registration, and operational costs. On domestic platforms, content moderation is unavoidable; even minor edits require reviews.

Ultimately, each option has pros and cons. Just pick the one that suits you best.

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

My Current Setup

I currently use:

• Github Blogger as an editor for fast creation and publishing (a VS Code WebView extension).
• Github + jsDelivr as the image hosting solution, with CDN acceleration.
• Github Repository to archive all articles, with each edit logged.
• Github Issues to serve as the blog list.
• Github Labels to tag and categorize articles.
• Alfred Web Search for quick article searches. For instance, searching by title with https://github.com/toFrankie/blog/issues?q=in%3Atitle+{query}+. I may integrate this into the plugin later.

Github Blogger

Github Blogger was inspired by Aaronphy/Blogger.

After leaving Jianshu, I considered switching to Juejin. However, Juejin’s overall content quality has declined, and it’s now filled with clickbait titles and anxiety-inducing content. Then, I came across a solution using Github Issues and found the Aaronphy/Blogger plugin, which lets me write blogs quietly.

After using it for some time, I noticed a few issues and bugs. Since the original author hadn’t updated it for a while, I decided to fork and build upon it—fixing bugs and adding features—resulting in Github Blogger.

The original author’s design concept is shown below, from 在 VSCODE 中写博客吧:

Instead of forking and modifying the existing code, I rewrote it from scratch. Based on the original functionality, I made several improvements and additions:

• Updated the UI theme
• Improved Markdown rendering to align with Github’s style
• Added support for more Markdown formats (e.g., math formulas, charts)
• Enabled title and multi-tag searches
• Added a search panel
• Supported opening articles directly on Github
• Introduced article backups—every edit is recorded in your blog repository
• Fixed pagination issues in label-based searches
• Fixed issues when creating new articles with labels
• Addressed the limitation of displaying only the first 20 labels

Here’s how it looks 👇

If you’re interested, feel free to give it a try! 👋

How to Use Github Blogger

It’s simple. Just follow these steps:

1. Install Github Blogger (a VS Code extension).
2. Prepare your Github Personal Access Token. It uses the Github API to create and update Issues/Labels.
3. Use Command + Shift + P (macOS) or Ctrl + Shift + P (Windows/Linux) to open the command palette:
   • Type Config Github Blogger to complete the initial setup.
   • Type Open Github Blogger to open the editor and start creating content.

Here’s the configuration you’ll need:

{
  "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 specifies the branch of your blog repository (default: main). It is mainly used for archiving articles and images.

• Articles are stored in the your-blog-repo/archives directory.
• Images are saved in the your-blog-repo/images directory.

Note: Your blog repository must be public, as the image hosting solution Github + jsDelivr does not support private repositories. Otherwise, your images won’t load properly.

Consider using github-issue-toc alongside it. This generates a table of contents for your GitHub Issues.

Github Issues support standard Markdown syntax as well as some additional features. For details, see: About writing and formatting on GitHub.

The end.