Create Your Blog Website with Hexo and Next Theme

Buy your blog website domain

You can buy a domain from the following domain registers:

Installing Hexo

Before installing Hexo, you need installing the following software

  • Node.js (Should be at least Node.js 10.13, recommends 12.0 or higher)
  • Git

Installing Hexo

npm install -g hexo-cli
hexo -v

Uninstalling Hexo

npm uninstall -g hexo-cli

Create your Hexo project

cd hexo-site
hexo init .
npm install
npm install hexo

Configuring Hexo

Configuring basic website information in _config.yml

Setting Description
title The title of your website
subtitle The subtitle of your website. (slogan)
description The description of your website
author Your name

Run Hexo

cd hexo-site
hexo s --debug

Visit http://localhost:4000

NexT Theme

Installation NexT

If you’re using Hexo 5.0 or later, the simplest way to install is through npm.

cd hexo-site
npm install hexo-theme-next

Upgrading NexT

cd hexo-site
npm install hexo-theme-next@latest

Enable NexT

Enable NexT in _config.yml

theme: next

Checking NexT

hexo clean
hexo s --debug

Visit http://localhost:4000


Copy default NexT configuration file to root path

cp node_modules/hexo-theme-next/_config.yml

Enable cache in

enable: true

Enable minify in

minify: true

Set Gemini Scheme in

#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Enable icons and badges in

icons: true
badges: true

Disable motion to load web pages faster in

enable: false

Update codeblock settings in Choose your favorite code block theme on NexT Highlight Theme Preview. Recommend highlight themes: stackoverflow-light, intellij-light.

light: intellij-light
dark: intellij-light
enable: true

Disable line number in _config.yml (Optional)

line_number: false

line_number: false

Enable scroll percent in

scrollpercent: true

Update favicon in

small: /favicon_16x16.ico
medium: /favicon_32x32.ico
apple_touch_icon: /favicon.jpg
safari_pinned_tab: /favicon.jpg

Adding Page

Enable menu home, about, tags, categories, achives in

home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive

Home and Archives pages exist by default.

We need to add tags, categories, and about pages

hexo new page tags && hexo new page categories && hexo new page about

Setting page type

  • source/tags/ type: tags
  • source/categories/ type: categories
  • source/about/ type: about

For example:

title: Tags
date: xxx
type: tags

Re-run your hexo project to see the new theme settings.

hexo s --debug

Add Search Service

Add the Local Search


npm install hexo-generator-searchdb

Configuring Hexo config file _config.yml. Add the following configurations to the _config.yml file

path: search.xml
field: post
content: true
format: html

Configuring NexT config file

enable: true

Deploying your Hexo website

Push your Hexo project to GitHub

Create a new git repository on GitHub

Push your hexo project to GitHub

git init .
git add -A
git commit -m "Initialize Hexo project"
git remote add origin{your-repository-name}.git
git branch -M main
git push -u origin main

Deploying Hexo website to Vercel

Add new project on Vercel

Import Git Repository

Deploy the project

Domain settings for your project on Vercel

Add your domain in Vercel -> hexo project -> Settings -> Domains

Add vercel dns to your domain register

Visit your domain in web browser