Start blogging with Hexo (Part 2)

1.Abstract

Before we proceed, in the previous blog Start blogging with Hexo (Part 1) we had successfully publish to GitHub pages, but here we insist to use custom domain and deploy to Vercel.

2.Deploy to Vercel with Custom Domain

2.1 Deploy to Vercel

Intro to Vercel: Vercel builds a frontend-as-a-service product. It will ease engineers to deploy and run the user facing parts of their applications.

  1. First, register a Vercel account with GitHub account, so that it will be easy to host directly from GitHub repo.
  2. On the top right of the Vercel > Add New > Project and import <username>.github.io project and press Deploy to start deploying Hexo into Vercel
  3. Wait until deploy complete and press Continue to Dashboard and you can access Hexo blog through Domains.

2.2 Custom domain

Now our Hexo blog are using username.github.io and Vercel have one username-github.io.vercel.app. Where we can buy a custom domain and resolve it.

I had bought eugeneewe.com from Cloudflare.com

  1. On the Vercel dashboard, click Domains button to check what are the doamin currently have it on Vercel.
  2. Here we will add eugeneewe.com Domain into Vercel, it will recommend us to add www as well.
  3. Follow the Vercel instructure, create A and CNAME dns record on Cloudflare.

    However there is some issue with the Cloudflare proxy, please refer to 2.3 Cloudflare and Vercel integration

  4. Go to _config.yml file top update url into new domain name
  5. Dont forget Github page, we can custom domain as well. Back to Github, open username.github.io repo and find Settings > Pages > Custom Domain update same domain name. Here I use eugeneewe.com and click save
    Wait until DNS resolve finish, you will be able to access Hexo project with custom name.

2.3 Cloudflare and Vercel integration

Follow the blogs to use Cloudflare proxy with Vercel

3. Install Custom Theme

安知鱼主题 modified from Butterfly theme which this is the purpose I setup Hexo blogging

  1. Go to Z:\blog\hexo-blog path install Anzhiyu theme, here I use 
    1
    git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
  2. Apply Anzhiyu theme
    Open _config.yml 
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: anzhiyu
  3. Install pug and stylus render module which is require by Anzhiyu to generate page 
    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save

4. Override Config

  1. Go to Z:\blog\hexo-blog\themes\anzhiyu\_config.yml file to hexo root path and renamed it to _config.anzhiyu.yml
    • _config.anzhiyu.yml config file will be priority, anything config inside _config.yml will no longer valid
    • Everytime theme update might update config file as well, please take note on the changelog and it could require manual update _config.anzhiyu.yml
  2. Publish hexo to GitHub 
    1
    hexo cl && hexo g && hexo d
    Wait for a while and you will see update on eugeneewe.com

5. Page Setup

Before proceed, Anzhiyu themes had a Front-matter that need to understand.
> Something like page metadata
/scaffolds path had two front-matter template fo

  • page.md Front-matter for webpage
  • post.md Front-matter for blog post

page.md template, for reference

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

post.md template, for reference

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

Note: Here will use [BlogRoot] to act as default Hexo Path [Z:\Blog\hexo-blog]

5.1 Setup Tag Page

  1. Go to Hexo root folder, use Git Bash to execute following command 
    1
    hexo new page tags
  2. Under [BlogRoot]\source\ it will generate a folder named tags and file named index.md
  3. Edit [BlogRoot]\source\tags\index.md like following 
    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2025-01-12 00:25:33
    type: "tags"
    ---

5.2 Setup Categories Page

  1. Go to Hexo root folder, use Git Bash to execute following command 
    1
    hexo new page categories
  2. Under [BlogRoot]\source\ it will generate a folder named categories and file named index.md
  3. Edit [BlogRoot]\source\tags\index.md like following 
    1
    2
    3
    4
    5
    6
    7
    ---
    title: categories
    date: 2025-01-12 01:31:08
    type: "categories"
    top_img: false
    aside: false
    ---

5.3 Setup Friend Link Page

Official docs

5.4 Setup About Page

Official docs

5.5 Setup Equipment Page

Official docs

5.6 Start your first blog

1
hexo new "<title>"

5.7 Create new page tag

1
hexo new page "<tag>"

6. Blog post pinned module

It will help user to pin the blog post as priority

Install module

1
npm install hexo-generator-topindex --save

Pinned Blog Post
To pinned blog post add the top attribute like following

1
2
3
4
5
6
7
8
9
---
title: Blog title 1
date: 2025-01-23 11:41:48
top: 1 # If more than 1 pinned post, largest value in top will get more priority
categories:
- CTF
tags:
- HTB
---

7. Extra Module

It will help user to search through Hexo

Install module

1
npm install hexo-generator-search --save

_config.anzhiyu.yml

1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:

7.2 Word Count

Word count for the post

Install module

1
npm install hexo-wordcount --save

_config.anzhiyu.yml

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

8. To-Do List

References

  1. Vercel and Cloudflare Integration
  2. Update GitHub Page with Custom Domain
  3. Hexo博客搭建基础教程(二)
  4. Hexo博客搭建基础教程(三)