By

Contents
  1. 1. Buy your blog website domain
  2. 2. Installing Hexo
  3. 3. Create your Hexo project
  4. 4. Configuring Hexo
  5. 5. Run Hexo
  6. 6. NexT Theme
    1. 6.1. Installation NexT
    2. 6.2. Enable NexT
    3. 6.3. Settings
      1. 6.3.1. Adding Page
      2. 6.3.2. Add Search Service
  7. 7. Deploying your Hexo website
    1. 7.1. Push your Hexo project to GitHub
    2. 7.2. Deploying Hexo website to Vercel
    3. 7.3. Domain settings for your project on Vercel
  8. 8. References

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

1
npm install -g hexo-cli
1
hexo -v

Uninstalling Hexo

1
npm uninstall -g hexo-cli

Create your Hexo project

1
2
3
4
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

1
2
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.

1
2
cd hexo-site
npm install hexo-theme-next

Upgrading NexT

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

Enable NexT

Enable NexT in _config.yml

1
theme: next

Checking NexT

1
2
hexo clean
hexo s --debug

Visit http://localhost:4000

Settings

Copy default NexT configuration file to root path

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

Enable cache in _config.next.yml

1
2
cache:
  enable: true

Enable minify in _config.next.yml

1
minify: true

Set Gemini Scheme in _config.next.yml

1
2
3
4
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Enable icons and badges in _config.next.yml

1
2
3
menu_settings:
  icons: true
  badges: true

Disable motion to load web pages faster in _config.next.yml

1
2
motion:
  enable: false

Update codeblock settings in _config.next.yml. Choose your favorite code block theme on NexT Highlight Theme Preview.

1
2
3
4
5
6
codeblock:
  theme:
    light: intellij-light
    dark: intellij-light
  copy_button:
    enable: true

Enable scroll percent in _config.next.yml

1
2
back2top:
  scrollpercent: true

Adding Page

Enable menu home, about, tags, categories, achives in _config.next.yml

1
2
3
4
5
6
menu:
  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

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

Setting page type

  • source/tags/index.md: type: tags
  • source/categories/index.md: type: categories
  • source/about/index.md: type: about

For example: 

1
2
3
title: Tags
date: xxx
type: tags

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

1
hexo s --debug

Add Search Service

Add the Local Search

Installation

1
npm install hexo-generator-searchdb

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

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

Configuring NexT config file _config.next.yml

1
2
local_search:
  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

1
2
3
4
5
6
git init .
git add -A
git commit -m "Initialize Hexo project"
git remote add origin git@github.com:tagnja/{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

1
2
ns1.vercel-dns.com
ns2.vercel-dns.com

Visit your domain in web browser

References

Contents
  1. 1. Buy your blog website domain
  2. 2. Installing Hexo
  3. 3. Create your Hexo project
  4. 4. Configuring Hexo
  5. 5. Run Hexo
  6. 6. NexT Theme
    1. 6.1. Installation NexT
    2. 6.2. Enable NexT
    3. 6.3. Settings
      1. 6.3.1. Adding Page
      2. 6.3.2. Add Search Service
  7. 7. Deploying your Hexo website
    1. 7.1. Push your Hexo project to GitHub
    2. 7.2. Deploying Hexo website to Vercel
    3. 7.3. Domain settings for your project on Vercel
  8. 8. References