cirry

Chinese official website: hexo

Install hexo#

Prerequisites:

1. Own server
2. Domain name
3. Install nodejs
4. Install git

# Switch source, use cnpm to install packages later, can be used when unable to install packages normally
npm install -g cnpm --registry=https://registry.npmmirror.com 

cnpm install hexo-cli -g 
hexo init blog # This will create a blog directory in the current directory
cd blog
cnpm install
hexo server # Can be abbreviated as hexo s

Enter localhost:4000 in the browser to see that the blog is running normally in development mode.

Configure hexo#

In the _.config.yml file in the root directory, configure the following content:

# Site  
title: Cai Xiao Niu's Blog  # Website title
subtitle: A true master always has the heart of an apprentice  # Website subtitle
description: Cai Xiao Niu's blog  # Website description, mainly for SEO
keywords: Cai Xiao Niu Cirry  # Website keywords. Supports multiple keywords
author: Cirry  # Your name
language: zh-CN  # Set to Chinese
timezone: 'Asia/Shanghai' # Change to domestic timezone

# URL  
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'  
url: http://cirry.cn # Change to your blog address

...

highlight:   # Enable code highlighting
  enable: true  
  line_number: true  
  auto_detect: true

...

mathjax: true # Add this line if it doesn't exist, enable math formula support, mathjax support also needs to be enabled in the corresponding article

The other parameters do not need to be modified. After saving, you need to run hexo server again (of course, you can also use npm run server to restart the application), and refresh the page to see the latest effect.

Basic Commands#

Common command examples:

hexo new post --path hexo/hexo.md "hexo" # This will create a hexo.md document in the source/_posts/hexo/ folder, with the title "hexo"
hexo new page test  # This will create an index.md document in the source/test folder

hexo new draft "Draft"  # This will create draft.md in the source/_drafts folder, files in the draft folder will not be rendered on the page
hexo new publish "Draft" # This will publish the draft to the _posts folder, and it will be rendered on the page after publishing

Use git to manage blog articles#

You can first create a git repository on GitHub, Gitee, or in your own git repository.

You can submit code according to the commands prompted after the repository is created.

git init
git add . 
git commit -m "first commit"
git remote add origin [url] # Replace with your repository url
git push -u origin master

Basic git commands#

By following the above command sequence, you can normally submit and update the blog repository.

Install Maupassant theme#

Here I found a nice theme for demonstration Maupassant.

git clone https://github.com/tufu9441/maupassant-hexo.git  # Download the theme code to an appropriate location

For easier management, rename the _config.yml in the downloaded files to _config.maupassant.yml and place it in the root directory of the blog. You can configure the theme here later. For why this operation, refer to the official website Using a replacement theme configuration file.

Place the languages, layout, and source from the downloaded files into the blog themes/maupassant. If the corresponding folder does not exist, create it.

Next, install the npm packages required by the theme:

cnpm install hexo-renderer-pug --save    
cnpm install hexo-renderer-sass-next --save

Configure the theme#

In the _config.maupassant.yml file, find the corresponding properties:

menu:  
  - page: home  
    directory: .  
    icon: fa-home  
  - page: archive  
    directory: archives/  
    icon: fa-archive  
  - page: about  
    directory: about/  
    icon: fa-user  
  - page: history  
    directory: timeline/
  - page: guestbook  
    directory: guestbook/  
    icon: fa-comments

After configuration, restart the project. If you find that there are no "About Me" and "Guestbook" pages, we can create them using the following commands:

hexo new page guestbook # Create guestbook page
hexo new page about # Create about me page
hexo new page history # Create timeline page

Note: The content of the timeline page should be filled in the timeline property under _config.maupassant.yml. Additionally, the front-matter of the timeline page should be as follows:

---  
title: Timeline  
date: 2022-08-28 13:02:01  
layout: timeline  
comments: false  
---

Set website icon#

To set the website Favicon, you can place favicon.ico in the source folder of the Hexo root directory, recommended size: 32px*32px.

To add an Apple device icon for the website, place an image named apple-touch-icon.png in the same location, recommended size: 114px*114px.

You can check the icon style compatibility with various browsers at this website favicon-checker.

Set article template#

We already know that the command to create an article is hexo new post "hello", but how should we understand the post parameter?

In the official documentation, it is described as layout, which defaults to using default_layout in _.config.yml. I prefer to understand it as an article template. In the articles we create using the command, we will find that there is already some content inside. Where does this content come from?

Open the scaffolds folder in the project root directory and you will find that it already has three default files: draft.md, post.md, page.md. If you take a closer look, the content in post.md is actually the same as the content in the hello.md we created.

So this folder actually contains article templates, which you can use to customize common content you need, such as article tags, categories, and toc, etc. Then in the articles created in the future, these contents will be included by default. Modify post.md as follows:

title: {{ title }}  
date: {{ date }}  
tags:  
category:  
- []  
mathjax: true  
toc: true

Note: The category can use an array, and tags can be written directly as tag labels, similar to: tags: hexo blog. The custom permalink must end with a /, similar to: permalink: /hexo/install/1/.

Article summary#

The homepage by default displays the article summary instead of the full text. You can set the summary you want to display by filling in a description: item in the article's front-matter, or directly insert <!--more--> in the article content to hide the subsequent content. If neither is set, the first paragraph of the article will be automatically extracted as the summary.

Using hexo new post hello, create a hello.md document with the following content:

hello.md
---
title: hello
date: 2022-08-18 18:44:43
tags: hexo
toc: true
description: What about the reality
mathjax: true
---
# Hello
There's that word again. 'Heavy.' Why are things so heavy in the future? Is there a problem with the Earth's gravitational pull?
## world
Knowledge could be more valuable than gold, more deadly than a dagger.
$$ f(x)=sin(x) + 12 $$

Note: title is the article title, toc is to enable the article directory, description is the article summary content, and mathjax is to enable math formula support.

$f(x)=sin(x) + 12$

After saving and running, you can see that the article is displayed normally, and you can smoothly write articles now.

Deployment#

When it comes to deployment, you will need to use the server you prepared earlier, and have already installed nginx or caddy or other reverse proxy web services. If you find it troublesome, you can directly use GitHub Pages to deploy the blog. For specifics, refer to # Deploy Hexo to GitHub Pages.

There are many ways to deploy hexo. For now, we will choose a relatively simple deployment method SFTP. If more people need it later, I can write about other deployment methods, such as drone automatic deployment, etc.

After using an ssh tool to connect to the server, first create a user and the corresponding blog directory:

$ useradd -m -s /bin/bash hexo # Create user
$ passwd hexo # Set password

# Log out and log back in using the hexo user
$ cd ~
$ mkdir blog # Create blog directory to place deployment files

First, you need to install this plugin:

npm install hexo-deployer-sftp --save

Then at the end of the _config.yml in the root directory, add the following configuration:

deploy:  
  type: sftp  
  host: 159.75.81.123  
  user: hexo  
  pass: 123456  
  remotePath: /home/hexo/blog  
  port: 22

Use the command hexo g -d to automatically deploy the blog to the server.

I use caddy as the web reverse proxy, modify the caddy configuration file Caddyfile, and restart caddy to correctly open the webpage:

cirry.cn{
 root * /home/hexo/blog
 file_server
}

Thus, the basic configuration and deployment functions of the blog have been completed. The next article will discuss theme configuration.