Build a Personal Blog with VS Code + Github

introduce

Related discussions:

Blog options

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

Use existing platform:

• Juejin
• Yuque
• Zhihu
• Jianshu
• CSDN
• WeChat public account
• segfault
• medium
• …

Build your own:

• WordPress
• Herso
• Book of Git
• visual press
• warm
• …

How to choose?

The purposes of writing a personal blog usually include:

• Document challenges encountered and solutions
• Build a personal knowledge base
• Improve summarizing, writing and communication skills
• Share, discuss and refine ideas and content
• Build personal influence
• …

My requirements for the blog platform are:

• Edit and publish anytime, anywhere
• Powerful Markdown support (including image hosting)
• Minimal content censorship (especially for domestic platforms, even mentioning a competitor or a specific URL may result in restrictions or bans)
• Good SEO can attract more readers
• A platform that allows me to focus on content creation
• …

In China, platforms like Juejin, Yuque, and CSDN are better choices because they are mainly geared toward programmers, thus sparking more discussion. Zhihu’s Markdown support is insufficient, and Jianshu’s content review is too strict—articles are often blocked for trivial reasons. I wrote in Jianshu for many years, but eventually left due to its overly restrictive and frustrating censorship mechanisms.

If you’re building your own website, you’ll need to consider search engine optimization, image hosting, domain registration, and operating costs. On domestic platforms, content moderation is inevitable; even minor modifications require review.

Ultimately, each option has advantages and disadvantages. Just choose the one that suits you best.

My blog: The best time to plant a tree was ten years ago. Secondly, it’s now.

my current setup

I currently use:

• Github Blogger As an editor for rapid build and publish (VS Code WebView extension).
• Github + jsDelivr As an image hosting solution, with CDN acceleration.
• Github repository Archive all articles and log every edit.
• Github issues As a blog list.
• Github tags Tag and categorize articles.
• Alfred web search For quick article search. For example, search by title https://github.com/toFrankie/blog/issues?q=in%3Atitle+{query}+. I may incorporate this into a plugin later.

Github Blogger

Github Blogger was inspired by Aaron Fei/Blogger.

After leaving Jianshu, I considered changing careers to Juejin. However, the overall content quality of Juejin has declined and is now filled with title bait and anxiety-inducing content. Then I came across a solution using Github Issues and found Aaron Fei/Blogger Plug-in allows me to blog quietly.

After using it for a while, I discovered some issues and bugs. Since the original author hasn’t updated it in a while, I decided to fork and build upon it – fixing bugs and adding features – and here’s the result Github Blogger.

The original author’s design concept is shown below, from Let’s blog on VSCODE:

Instead of forking and modifying the existing code, I rewrote it from scratch. On the basis of the original functions, I have made some improvements and additions:

• Updated UI theme
• Improved Markdown rendering to be consistent with Github’s style
• Added support for more Markdown formats (such as mathematical formulas, charts)
• Enable title and multi-label search
• New search panel added
• Support opening articles directly on Github
• Introduced post backups—every edit is recorded in your blog repository
• Fixed pagination issue in tag-based search
• Fixed an issue when creating new articles using tags
• Resolved limitation of only showing first 20 tags

This is what it looks like 👇

If you are interested, please feel free to try it! 👋

How to use Github Blogger

It’s very simple. Just follow these steps:

1. Install Github Blogger (VS Code Extension).
2. prepare your Github personal access token. It uses the Github API to create and update issues/tags.
3. use Command + Shift + P (macOS) or Ctrl + Shift + P (Windows/Linux) Open the command panel:
   • type Config Github Blogger Complete initial settings.
   • type Open Github Blogger Open the editor and start building content.

This is the configuration you 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
}

Branch specifies the branch of the blog repository (default: master branch). It is mainly used for archiving articles and images.

• Articles are stored in your-blog-repo/archives Table of contents.
• The image is saved in your-blog-repo/images Table of contents.

NOTE: Your blog repository must be public as an image hosting solution Github + jsDelivr Private repositories are not supported. Otherwise, your images will not load correctly.

Consider using github issue directory next to it. This will generate a directory for your GitHub issues.

Github Issues supports standard Markdown syntax and some additional features. For more information, please see: About writing and formatting on GitHub.

Finish.