Create Your Blog Website with Hexo and Next Theme

Posted on Edited on In ,

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

Settings

Copy default NexT configuration file to root path

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

Enable cache in _config.next.yml

cache:
  enable: true

Enable minify in _config.next.yml

minify: true

Set Gemini Scheme in _config.next.yml

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

Enable icons and badges in _config.next.yml

menu_settings:
  icons: true
  badges: true

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

motion:
  enable: false

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

codeblock:
  theme:
    light: intellij-light
    dark: intellij-light
  copy_button:
    enable: true

Disable line number in _config.yml (Optional)

highlight:
  line_number: false

prismjs:
  line_number: false

Enable scroll percent in _config.next.yml

back2top:
  scrollpercent: true

Update favicon in _config.next.yml

favicon:
  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 _config.next.yml

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

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: 

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

Installation

npm install hexo-generator-searchdb

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

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

Configuring NexT config file _config.next.yml

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

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

ns1.vercel-dns.com
ns2.vercel-dns.com

Visit your domain in web browser

References