1. Effect display

2. Install Git, Nodejs, and Hexo

Git

Git and Github

Nodejs

Nodejs can be downloaded from nodejs.org/en:

After installation, check whether the output version information is normal:

Hexo

All of the commands in this article can be executed in Git bash, but they are slow; It’s faster if you want to do it in CMD, but make sure git has been added to your environment variables! You can see the git version information by executing git –version in CMD.

Hexo is a fast and concise blogging framework that renders MD documents as static HTML pages with a wide selection of themes and plugins to choose from. The installation process is as follows:

npm install -g hexo-cli 
Copy the code

After installation, check whether the output version information is normal:

3. Create a site

Initialize the site folder

hexo init <floder>
Copy the code

Using this command will pull the Github Hexo source code and default theme source code to the local folder, which is the site root directory:

Install the Hexo dependency module

All subsequent commands are executed in the site root directory, so on the command line go to the folder created by Hexo in the previous step:

cd <floder>
Copy the code

Then execute this command to install the dependency module of Hexo:

npm install
Copy the code

The Hexo site has been successfully created!

Start site services locally

hexo s
Copy the code

Using this command, Hexo launches the Web service on local port 4000 for browser access:

Accessing local sites

Use your browser to visit http://localhost:4000:

What is the use of launching and accessing the site locally?

Local preview!

After the article is written, you can first generate the page locally and start the service, and then preview it in the browser, confirm that there is no problem and then push it to the server, which is very convenient.

Modifying site Configurations

All custom configurations for the site are configured in the _config.yml file in the root directory of the site, which will be collectively referred to as the site configuration file:

To open the file with VS Code, first emphasize the syntax:

There are a lot of configuration items, which we will cover in the future. In this article, we will start with the first configuration:

These configuration items can be modified by themselves. Pay attention to the syntax and perform the following operations after modification:

  • Clear the old build page
hexo clean
Copy the code
  • Generate a new HTML page
hexo g
Copy the code

Then restart the service to see the effect locally:

hexo s
Copy the code

For more exciting articles and resources, please pay attention to my wechat official number: “McUlover666”.