Skip to content

Getting started

Prerequisites

Installation

This section will help you install the theme on an existing Hexo Blog project.

Step 1 - Installing theme package

In your console, go to the root directory of your Hexo project, then run the following command to install the theme:

shell
yarn add hexo-theme-aurora hexo-plugin-aurora
yarn add hexo-theme-aurora hexo-plugin-aurora
shell
npm install hexo-theme-aurora hexo-plugin-aurora --save
npm install hexo-theme-aurora hexo-plugin-aurora --save

Step 2 - Generate theme config

Config file _config.yml now need to be added in the root folder of your Hexo blog. You simply create a _config.aurora.yml to change the theme.

To get a default theme template, for Linux (MacOS/Linux OS) users simply run the following command. For Windows users you can copy the template below into _config.aurora.yml.

shell
# Linux copy template command
cp -rf ./node_modules/hexo-theme-aurora/_config.yml ./_config.aurora.yml
# Linux copy template command
cp -rf ./node_modules/hexo-theme-aurora/_config.yml ./_config.aurora.yml

Or copy this template into the _config.aurora.yml file in project root.

Step 3 - Setting theme

Next update the theme config in _config.yml inside project root to aurora

  1. Open the _config.yml in your hexo root direction.
  2. Change theme to aurora
yml
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: aurora
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: aurora

Due to the use of Vue-router, the default Hexo generated pages and posts' permalink will cause the Vue router fail to find the route, therefore you need to change the Hexo default permalink configuration.

  1. Open the _config.yml in your hexo root direction.
  2. Change permalink to /post/:title.html
yaml
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://tridiamond.tech
permalink: /post/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://tridiamond.tech
permalink: /post/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Step 5 - Setting up code highlight

TIP

Since version 2.5 the theme had changed to use Shiki as the code highlight engine. Shiki support using the themes exported from VSCode. The color tokenization is the same as VSCode!

First we need to disabled both highlight and prismjs inside _config.yml

yaml
highlight:
  enable: false
prismjs:
  enable: false
highlight:
  enable: false
prismjs:
  enable: false

Then add the following config into the theme config _config.aurora.yml

yaml
#! ---------------------------------------------------------------
#! Highlighter Shiki
#! ---------------------------------------------------------------
shiki:
  enable: true
  backgroundColor: '#1a1a1a'
#! ---------------------------------------------------------------
#! Highlighter Shiki
#! ---------------------------------------------------------------
shiki:
  enable: true
  backgroundColor: '#1a1a1a'

Step 6 - Creating the about page

The theme enables about page by default, therefore we should create it before using the theme. To create a default about page, use the following Hexo command:

shell
hexo new page about
hexo new page about

After that, you will see a new folder had been created:

shell
.
└── source
    └── about
        └── index.md
.
└── source
    └── about
        └── index.md

You can feel free to edit the markdown file inside the about/ folder, the content will be displayed in your about page.

Step 7 - Run local server

To run the local server and check out your blog, simply run the following command.

shell
hexo clean & hexo g & hexo server
hexo clean & hexo g & hexo server

TIP

Any configuration changes will require you to regenerate all the Hexo static files!

After all the files finish generating, you will be able to visit your blog on localhost:4000.

What is next?

There are two places you should check out next:

  1. Setting up your Page
  2. Advance configurations document

Released under the MIT License.