Using hexo to build blog website

Global installation of hexo-cli

npm install hexo-cli -g

npm installation speed is slow, can switch to domestic Taobao NPM mirror image Installation using cnpm command instead of npm command.

After the installation is completed, hexo-v is executed to check whether the installation is completed.

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

Initialization of Blog Project

hexo init blog
cd blog

Install NexT Theme

We have chosen NexT theme instead of the default landscape theme. Of course, you can use the default landscape theme or choose other topics according to your preferences. The way to install the theme is very simple. You just need to clone the theme file into the theme directory of the project directory, and then modify the configuration file _config.yml.

Cloning the latest version of next theme in the project catalog

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

Modify the _config.yml configuration file in the root directory, find the theme field, and change landscape to next.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

Modified to

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Execute the hexo server and start the local server.

hexo server

Visit URL http://localhost 4000/ can see the appearance of blog website using next theme.

Connect local hexo project to git remote warehouse

We use the hexo-test and blog projects we built earlier to demonstrate. The local hexo is the blog directory and the hexo-test is the git remote warehouse. We need to submit the files in the local blog directory to the remote hexo-test warehouse.

First of all, the index.html file we submitted earlier, we no longer need it, first delete it.

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master

blog directory git initialization

cd blog
git init

At this point, we see that the next directory cannot be submitted directly, because the next directory is a submodule.

We need to delete the. git file in the next directory, and the next directory becomes a normal folder so that it can be submitted directly.
Enter the next directory and execute the rm-rf.git command

cd themes/next/
rm -rf .git

At this point, the next directory can be submitted directly.

Execute the following command to submit the contents of the blog directory to the remote hexo-test repository

git add .
git commit -m 'init'
git remote add origin git@github.com:mfaying/hexo-test.git
git push -f origin master 

Note that my local computer and remote git have already configured SSH, so there will be no privilege problems when submitted. If you are connected to your own remote warehouse, you can find out how to configure git ssh.

Finally, we need to configure the deployment path and modify the deploy field of file _config.yml as follows:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:mfaying/hexo-test.git #Your GitHub Pages warehouse address
  branch: master

We need to install the hexo-deployer-git dependency package before we can deploy the website by executing the hexo deploy command

npm install hexo-deployer-git --save 

Execute the following commands

hexo clean # Simplify hexo c, clear cached files (db.json) and generated static files (public)
hexo generate # Simplify hexo g to generate static files
hexo deploy # hexo d, deployment

Where hexo g and hexo d can be combined and written as hexo d-G
Now let's visit the previous links https://mfaying.github.io/hex... A static blog site has been generated.

So far, we have completed the construction of the static blog website, and we will introduce some functions and methods to make the website more complete.

Reference resources

  1. Document |hexo
  2. hexo
  3. NexT uses documents

Focus on front-end reading room