Gitee + Hexo build personal blog

Posted by tvance929 on Tue, 08 Mar 2022 15:36:45 +0100

Installing Hexo

Before installing Hexo, you need to install the following two tools:

Install Git

  • Windows: Download and install git.

  • Mac: Using Homebrew, MacPorts : brew install git ; Or download erection sequence Installation.

  • Linux (Ubuntu, Debian): sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS): sudo yum install git-core

  • Linux (Arch Series): sudo pacman -S git


    Due to the wall, it's best to hang an agent to download git for windows from the above link, otherwise the download speed is very slow. You can also refer to This page , including the download address stored in Baidu cloud.


    If you are on a CentOS server, you can use it directly HexoOneClickInstallation This script quickly installs Hexo.

Install node js

Install node JS is the best way to use nvm.


$ curl | sh


$ wget -qO- | sh

After installation, restart the terminal and execute the following commands to install node js.

$ nvm install stable

Or you can download it erection sequence To install. (it's best to download the version with LTS)


In Chinese mainland, as everyone knows the Internet, it is recommended to use. Taobao NPM image:

npm install -g cnpm --registry=

Use cnpm install instead of all npm install instructions.

Start installing Hexo

After installation, you can use npm to complete the installation of Hexo.

$ npm install -g hexo-cli

If the installation is too slow, you can use the Taobao image above

$ cnpm install -g hexo-cli

Start and beautify Hexo

First create a folder. Enter the folder, right-click and select git bash here (Note: this command is available only when Git is installed), and then enter the following command to install Hexo in this folder.

$ hexo init

Run Hexo

$ hexo g 
$ hexo s

Enter in the browser http://localhost:4000/ You can see that Hexo is deployed locally

Detailed explanation of Hexo command

If you know this part, you can skip it by yourself

Here are some basic commands of Hexo.

hexo init [folder]

This command is the Hexo initialization command. [folder] indicates the folder you want to initialize. If you want to initialize the local, go directly to hexo init.

hexo new [layout] <title>

This command is used to create a new article or page. Where [layout] represents his template (i.e. page or article), < title > represents the title.


  1. hexo new post 001 indicates that a new article with the title 001 has been created.
  2. hexo new page 001 indicates that a new page with the title 001 has been created.

If you don't want to create a new article or page in the terminal, you can directly in the blog root directory / source/_ Create a Markdown file in the post / directory to write articles. Or create a folder in the blog root directory / source / directory, and then create index in the new folder MD write the page.


When you create a new page, the link of the page is the name of the folder where your page is located.

For example: I created a new folder named test under the blog root directory / source /, and then wrote the Markdown file under the test folder, then the link of this page is the website / test.

$ hexo server (Can be abbreviated as hexo s)

You can use this command when you want to view the website locally.

Default in http://localhost:8080/ Here, it may be different. Just pay attention to the prompt information.


If you want to change the port number (8080 above is the port number), you can enter the hexo s -p port number in the terminal.

$ hexo generate (Can be abbreviated as hexo g)

This command is used when generating static files of the website. After generation, the web page will be placed in the public folder under the root directory.

$ hexo deploy (Can be abbreviated as hexo d)

This command is used to deploy the website. Using this command will deploy the generated page (i.e. the content in the public folder) to the specified place.

$ hexo clean (Can be abbreviated as hexo cl)

This command is used to empty the public folder.

$ hexo version

This command is used to output the current version number of Hexo you are using.

Configuration Hexo

Note: if you use the 'Volantis' theme modified by Blackstone, you can understand the content of this part without configuration


This section may be out of date, see Hexo official documents.

Yes, it's in the Hexo root directory_ config.yml is configured in this file!


In YAML syntax, there must be a space after the colon to continue writing.


# Site
titleWebsite title
subtitleWebsite subtitle
descriptionWebsite description
keywordsWebsite keywords
authorAuthor's name
languageLanguage of the website
timezoneWebsite time zone: see Time zone list


## If your site is put in a subdirectory, set url as '' and root as '/child/'
permalink: :year/:month/:day/:title/
  trailiing_index: true
rootSite root
permalinkPermanent link format for articles
permalink_defaultsDefault values for sections in persistent links
pretty_urlsRewrite the value of permalink to beautify the URL
pretty_urls.trailing_indexWhether to keep the index at the end in the permanent link HTML, removed when false


If your website is in a subdirectory, such as: , set your url to And set root to / blog /.

For example:

# For example, the permanent link of a page is
  trailing_index: false
# The permanent link of the page changes to


# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
source_dirResource folder
public_dirPublic folder
tag_dirLabel folder
archive_dirArchive folder
category_dirCategory folder
code_dirInclude code folder
i18n_dirInternationalized folder
skip_renderSkip rendering of files. The matched files will be copied directly to the public directory. You can use glob Expression to match the path.


Generally, this part does not need to be modified.

For example:

skip_render: "mypage/**/*"
# 'source / mypage / index HTML ` and ` source / mypage / code JS ` output to the 'public' directory without change
# You can also use this method to skip the rendering of the specified article file
skip_render: "_posts/"
# This will ignore the 'test post Rendering of MD '


# Writing
new_post_name: # File name of new posts
default_layout: post
auto_spacing: false
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
  enable: true
  field: site
  exclude: []
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
  enable: true
  line_number: true
  auto_detect: false
new_post_nameFile name of the new article
default_layoutPreset layout
auto_spacingAdd a space between Chinese and English
titlecaseConvert title to title case
external_linkOpen in new label
external_link.enableOpen link in new tab
external_link.fieldApplicable to the whole website or articles only
external_link.excludeExclude host names. Specify subdomains where applicable, including www
filename_caseConvert the file name to (1) lowercase or (2) uppercase
render_draftsShow draft
post_asset_folderstart-up Asset folder
relative_linkChange the link to the relative address of the root directory
futureShow future articles
highlightCode block settings
highlight.enableTurn on syntax highlighting
highlight.auto_detectIf no language is specified, automatic detection is enabled
highlight.line_numberDisplay rows
highlight.tab_replaceReplace tabs with n spaces; If the value is empty, tabs will not be replaced

Classification & Labeling

# Category & Tag
default_category: uncategorized
default_categoryDefault classification
category_mapCategory alias
tag_mapTag alias

Date / time format

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
date_format: YYYY-MM-DD
time_format: HH:mm:ss
use_date_for_updated: true
date_formatDate format
time_formatTime format
use_date_for_updatedIf the update date is not provided previously, use post The release date in updated. Typically used with Git workflows.


Hexo use Moment.js To parse and display time.


# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
per_pageNumber of articles displayed per page (0 = turn off paging)
pagination_dirPage Directory


# Extensions
## Plugins:
## Themes:
themeThe name of the current topic. Disable theme when value is false
theme_configThe profile for the topic. The configuration placed here will overwrite the configuration under the theme directory_ config. Configuration in YML.
deployDeployed settings
meta_generatorMeta generator label. When the value is false, Hexo will not insert the label in the header.

Use the Volantis theme modified by Blackstone

Give the original link first:

Own configuration * * (it is recommended not to use my configuration unless you are yourself. Go to the original link above and use the boss's configuration step by step)**

Enter the blog root directory and right-click Git Bash Here to open Git

Download theme

git clone themes/volantis-heson

Change theme

Open root directory_ config.yml file

theme: volantis-heson

Installation dependency

Change the package under the root directory JSON file

  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  "hexo": {
    "version": "5.1.1"
  "dependencies": {
    "hexo": "^5.1.1",
    "hexo-abbrlink": "^2.2.1",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-json-content": "^4.2.3",
    "hexo-generator-tag": "^1.0.0",
    "hexo-related-popular-posts": "^5.0.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-wordcount": "^6.0.1"

Then enter the following command to preview locally

npm install && hexo cl && hexo g && hexo s

Modify theme configuration

In the theme directory of config ☆ symbol found in YML

These are items that must be modified, and the content of modification has been explained in it


Q1: how to add the header of the home page article?

A1: add the headimg: link address in the frontmater at the head of the md article

How to add labels and Q2?

A2: enter command:

hexo new page categories
hexo new page tags
hexo new page bb
hexo new page links          
hexo new page guestbook

Then, in the generated two indexes Add layout: category and layout: tag and layout: bb and layout: friends to the frontmate in MD

commandCorresponding template
hexo new page categorieslayout: category
hexo new page tagslayout: tag
hexo new page bblayout: bb
hexo new page linkslayout: friends
hexo new page guestbooknothing

Q3: how to call links?

A3: I use gitee dynamic call. The advantage is that I can apply for approval directly without moving the code and adding links.

I have to call the code:

{% issues sites | api=https://gitee. com/api/v5/repos/heson525_ admin/links/issues? sort=created&direction=asc&labels=active&state=open&page=1&per_ Page = 100 | group = group: technology leaders, friends%}

Among them, the api should be replaced with its own gitee link. In my link, heson525_admin is my user name, links is the warehouse name, followed by group is the group, and active is the label to judge whether to display.

Q4: how to add categories and labels on the categories and Labels page?

A4: in article XXX Add tags: tag name categories: category name to frontmate in MD. For example:

# A label and classification
title: Initial installation Git Configuration of
author: Colzry
tags: Git
categories: Git
headimg: Link address

# Multiple labels and classifications
title: Raspberry Pie 4 B Power on without display
author: Colzry
- Linux
- Raspberry pie
- Raspberry pie
headimg: Link address

Deploy to Gitee

open Gitee

Add ssh public key to Gitee (Baidu)

Create a new warehouse

The warehouse name and path must be consistent with the user name

Click on the Gitee Pages of the service

Check force HTTPS and start

Install deployment plug-ins

$ npm install hexo-deployer-git --save
$ npm install hexo-server --save

Configure Git

If you just installed git but haven't configured your git, the first thing you need to do now is to set your git user name and email. Execute the following two commands in Git Bash to configure your user name and mailbox. It is recommended that your user name and mailbox be consistent with your GitHub user name and mailbox.

$ git config --global "Your_user_name"
$ git config --global


Each Git submission will be accompanied by these two pieces of information, which are used to record who submitted the update, and will be recorded in the history along with the update. In short, it is used to mark your identity

Configure site_ config.yml file

  type: git # Type fill in git
  repo: <repository url> # Your Gitee warehouse address (both https and ssh)
  branch: master # Branch name.
  message: # Submission information can be customized. If it is not filled in, it will be the submission time by default

Publish to Gitee

In the root directory of the local Hexo site, execute the following command to deploy to GitHub Pages.

$ hexo clean && hexo d -g


If you need to log in to GitHub for the first time, a login box will pop up.

Then go to the Gitee Pages page, click the update button and redeploy it

Recommendation: to learn more about Hexo's tutorials and contents, please open Easy Hexo

Topics: hexo