🎢 Use the pages function of hexo+github to build a simple version of personal blog! 🐼

Come and try!

1, Preparation for construction

1. Configure and install Node.js and Npm(NPM follows Node.js by default)

   Official recommendation (Node.js version should be no less than 10.13, and Node.js version 12.0 or above is recommended)

1. Configure Git environment

2, Build and hexo common commands

1. Install hexo

npm install -g hexo-cli

2. Initialize hexo. First, enter the folder where you want to create a blog and start powershell

hexo init [folder]

folder is the name you want to create. You can customize it here. I use blog
hexo init blog

3. Enter the initialized hexo. Then use npm to install the supporting components. Then go to the folder created in step 2. Here is the blog folder. You will see the following file structure.

npm install
# blog/ file

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
#We'll talk about this later

4. Start creating your first hexo blog

hexo g #Compile and generate static files, that is, combine md files with other files to generate html+css+js files
hexo s # Start local debugging

5. Use the browser to open localhost:4000

**Surprise !** Your first hexo has been completed.

6. If you don't like the theme given by the official, let's complete the theme change together

a. Go to the official or github/gitee to download your favorite theme and save it in the themes file.

# I'll use the next pure theme here as a demonstration
cd themes/
git clone git@gitee.com:mirrors_cofess/hexo-theme-pure.git

b. Modification_ config.yml file (under the blog folder, which is called the client configuration file here), and there is also one in the theme file, which I call the theme configuration file

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
#Modify the themes here to the file name after you clone
#eg:
theme: hexo-theme-pure

Note that there is a "space" between them and the value“

c. Re execute build file

hexo clean #Clean up the cache to better use the theme
hexo generate #You can also use hexo g directly
hexo server #You can also use hexo s directly
#Reopen, surprise!

The specific beautification and modification can be seen in the official documents. Click here to enter the official document
In addition, do not install the hexo generator Baidu sitemap plug-in on the official document. This plug-in will cause the program to report errors.

7. Profile introduction

_config.yml

Website to configure (please click for details) information, you can configure most parameters here

package.json

Information about the application. EJS, Stylus and Markdown renderer is installed by default, and you are free to remove it.

package.json{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

scaffolds

Template folder. When you create a new article, Hexo will create a file based on scaffold.

The template of Hexo refers to the content filled in the new article file by default. For example, if you modify the front matter content in scaffold/post.md, this modification will be included every time you create a new article.

hexo n "blogName"

The default template used here is post

source

The resource folder is where users' resources are stored. Except_ Outside the posts folder, it starts with_ (underlined) files / folders and hidden files will be ignored. Markdown and HTML files will be parsed and placed in the public folder, while other files will be copied.

After we use the hexo n "blogName" command to generate a new document.

md files are stored in source/_post/ down

8. How to configure the deployment of github/gitee

1. Create a github/gitee warehouse with the name of [user name].Github io. And you should start the github pages service

ps: domestic gitee needs real name verification to start, but I don't know why I have been shown in the audit.

1. Install the deploy plug-in

npm install hexo-deployer-git --save

3. to configure _config.yml file

deploy:
  type: git
  repo: Corresponding warehouse address 
  branch: #github is main and gitee is master

1. Deploy to github/gitee

hexo d

Congratulation ! It's done

3, Solve some small problems

1. How to configure and realize that both local Typora and webpage can display pictures normally?

1. install hexo-asset-image , a plug-in that can upload local pictures

npm install https://github.com/EricGerry/hexo-asset-image-0.0.5.git --save

Note that = =0.0.5 version must be used here==

1. Configuration_ config.yml enable file management plug-in

#Using the find function in files
post_asset_folder: false
#Change to
post_asset_folder: true

1. Regenerate file

hexo n "test"

1. And then you'll find out in souce/_ The test.md and test folders appear in the post/ directory at the same time. Just throw the image resources you need into it
2. The last step is to configure Typora.

You must check the priority to use relative path here

1. Test it, Congratulations!

More information can be paid attention to

My personal blog