This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

A personal blog site built with Hexo + Shoka theme + Vercel

GitHub repo: cos_blogs

Yes, I’m tinkering again, but this time I’m moving toward something simpler. The reason is that a project at work recently used Vercel. I tried the personal plan and there was no going back!

If you encounter any issues or find errors in blog posts, you can now report them directly via GitHub Issues~

Deployed via Vercel — highly recommend it! The personal plan includes 100GB of monthly bandwidth, more than enough for a small site~

Writing articles in Markdown is absolutely wonderful!

Why Switch to Vercel

Previously, I used GitHub Pages to host my blog, and over time several drawbacks became apparent:

• Messy directory structure — the public folder was deployed directly to the root with no proper organization
• Required a separate repository for backing up the entire Hexo source files, which was cumbersome
• GitHub Pages has slow access speeds in China, and DNS configuration is needed (though not particularly difficult)
• Every time a new blog post was published, I had to run hexo g -d to delete old files and regenerate everything
• The repository had to be public (not really a downside since it’s meant to be public anyway)

The advantages of Vercel are:

• Fast access speeds even in China, with easy custom domain management
• Every commit, branch, and merge generates a URL with a full history — rollbacks are super easy
• Serverless development model — simple and convenient
• Import repositories directly from GitHub — both private and public ones work

In Settings, you can configure Vercel settings, override defaults, bind new domains, etc.

Deployment results can be viewed in the Deploy section:

The way each branch/commit generates deployment URLs is documented here: Generated URLs

Some Tutorials

For details on deploying with Vercel + Hexo, check out these blog posts:

• Deploying a Static Blog with Vercel
• Deploying with Vercel -> How to Build a Blog with Vercel + Hexo
• Shoka theme official tutorial -> Hexo Theme Shoka Documentation
  • Quick Start -> Plugin Dependencies -> Basic Configuration -> Display Settings -> Special Features
• My own configuration notes for the Shoka theme: Hexo Blog Shoka Theme Configuration Guide

Directory Structure

cos_blogs
├─ package.json
├─ README.md
├─ scaffolds    Templates for generating drafts/posts/pages
│  ├─ draft.md
│  ├─ page.md
│  └─ post.md
├─ source
│  ├─ about     About page
│  ├─ friends   Friends/links page
│  ├─ img       Static image assets: post header images, etc.
│  ├─ musics    Music playlist page
│  ├─ _data     Translation files for article translations
│  │  └─ languages.yml     Custom menu display text
│  ├─ _drafts   Draft articles (not published)
│  └─ _posts    Published articles
├─ themes  Theme directory
│  └─ shoka     Shoka theme
│     ├─ languages     Language files
│     ├─ layout        HTML templates, etc.
│     ├─ source        Theme source code
│     └─ _images.yml   Random image gallery list
├─ yarn.lock
├─ _config.shoka.yml     Shoka theme configuration
└─ _config.yml           Hexo configuration file