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
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
Execute the hexo server and start the local 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 email@example.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: firstname.lastname@example.org: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.