[Hexo] Use hexo-theme-next (NexT) in Hexo

Posted on Edited on In , , Views: Word count in article: 2.4k Reading time ≈ 2 mins.

hexo-theme-next

NexT is a high quality elegant theme for Hexo. It is crafted from scratch, with love.

Make sure that you have installed Hexo and created a site(such as hexo-site) with it successfully, because the following documents require you to operate in the site root directory.

Prerequisites

  • Hexo - https://hexo.io/

    Hexo is a fast, simple & powerful blog framework. It use plugins to provide features powerful APIs for limitless extensibility. Various plugins are available to support most template engines (EJS, Pug, Nunjucks, and many others). Easily integrate with existing NPM packages (Babel, PostCSS, Less/Sass, etc).

    To learn more about all the features of Docker, see Hexo - https://hexo.io/.

Installation

Open your Terminal, change to Hexo site root directory and install NexT theme:

1
2
3
4
5
$ cd hexo-site

$ npm install hexo-theme-next

$ hexo clean

Configuration

Config Next Theme

At present, NexT encourages users to use the Alternate Theme Config. It’s a feature of Hexo and the documentation is here: Configuration | Hexo - https://hexo.io/docs/configuration.html#Using-an-Alternate-Config.

1
2
# Installed through npm
$ cp node_modules/hexo-theme-next/_config.yml _config.next.yml

The traditional approach is to store some options in site config file and other options in theme config file. But it is not smooth to update NexT theme from pulling or downloading new releases.

1
2
# Installed through Git
$ cp theme/next/_config.yml _config.next.yml

Configuration | NexT - https://theme-next.js.org/docs/getting-started/configuration.html

Enabling NexT

Like all Hexo themes, after you download it, open site config file, find theme section, and change its value to next (or another theme directory name).

1
2
3
# hexo/_config.yml

theme: next

Now you have installed NexT theme and enabled it. The following steps will help you verify whether NexT is enabled correctly.

Run

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ hexo s
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.2.1
Documentation: https://theme-next.js.org
========================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Now you can open http://localhost:4000 in your browser, and check whether the site works correctly.

References

[1] NexT - Theme for Hexo - https://theme-next.js.org/

[2] Getting Started | NexT - https://theme-next.js.org/docs/getting-started/

[3] Configuration | Hexo - https://hexo.io/docs/configuration.html#Using-an-Alternate-Config

[4] Hexo - https://hexo.io/