foreword
There are generally two options for setting up a personal blog. One is to use WordPress, but you need to build the blog on the server. However, it is convenient to write articles after setting up, and it is suitable for people who have no programming foundation. The other is to use Hexo, which is relatively simple and efficient. It does not require a server. It can be deployed locally or deployed to GitHub Pages. It supports Markdown syntax.
The first time I used Hexo to build a personal blog, I was really in a hurry. I recorded the process here, I hope it can be helpful to everyone.
(Note: This article is a building tutorial for Windows platform only)
You can click here to see what the Hexo blog Demo looks like; if you are interested, you can also click here to see my personal blog.
How to play
This tutorial is divided into 3 chapters:
- The first chapter is the installation environment and local construction
- The second chapter is the personalized configuration of the blog
- The third chapter is deploying the blog to GitHub Pages
Please select chapters according to your needs to save time:
- If you want to build a personal blog from scratch, you can start from the first chapter ;
- If you are too lazy to build it yourself, please clone this project locally. This project is a brand new Hexo blog Demo, and the Next theme has been installed and configured. Also, please:
- You have built a personal blog locally. If you want to know how to deploy your blog to GitHub Pages, you can start from Chapter 3
In addition, since the configuration files of Hexo and its themes are all in English, this project adds Chinese comments to some configuration files, and those who are interested can copy them separately.
1. Installation environment
- Install Node.js
- Install Git
- Install Hexo
1.1 Install Node.js
Hexo is a fast, concise and efficient static site generation framework based on Node.js. If you want to install Hexo, you need to install Node.js first. There are two installation packages on the official website, one is the installer .msi file, and the other is the installation package. It is a .zip compressed package, select the .msi file here, and the environment variables will be automatically configured after installation.
1.2 Install Git
I won't say much about Git. As a developer, I have more or less contacted it. Just go to the official website to download the installation package. There are also a lot of operation tutorials online, so I won't go into details here.
If the environment variables of Git and Node.js are configured, you can confirm the installation result in cmd.
git --version
node -v1.3 Install Hexo
Once Node.js is installed, you can use npm to install Hexo
npm install -g hexo-cliAfter the installation is complete, you can hexo versionconfirm whether the installation was successful by passing.
2. Start building a personal blog
A journey of a thousand miles begins with a single step. After installing all the environment, we can finally start the first step of building a blog.
2.1 Initialize the Hexo project
The first is to choose a folder to store various files for our personal blog. Then enter the path of the folder and open the cmd command window. There are two ways to open it:
- Hold down Shift and right-click to select
在此处打开命令窗口. - Type in the address bar above and press
cmdEnter to quickly open the command window.
Of course, you can also open the command window directly Win+Rand then enter cmdit, but you need to switch the path to the folder you specified through the cd command.
Then enter the command to initialize your blog
hexo initAfter successful initialization, you will see
Start blogging with Hexo!
2.2 Generate static page files
Next, execute the command
hexo g_This command is used to generate static page files to the public directory. Hexo will ignore the files or folders named with an underscore ( ) and hidden files in the source folder except the posts folder . Markdown and HTML files are parsed and placed in the public folder, and other folders are copied there.
Finally, we just need to start the Hexo server.
2.3 Start the Hexo server locally
hexo s --debugHexo starts the server very fast, and soon you can see
Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
http://localhost:4000/Congratulations, your personal blog has been successfully set up. Next, you can access your blog locally by typing in the browser .
You can also start the server here hexo s, but add --debugparameters. If there is an error during operation, you can see the error message.
2.4 Shut down the Hexo server
To shut down the server, you only need to press it in the command window Ctrl+C. This key combination is not only used to shut down the server. In fact, any command you are executing in the cmd window can use this key combination to end the command. Press this key combination twice to not even enter Y or N.
3. Common commands
hexo new "postName" #新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 启动服务器(默认端口4000，'ctrl+c'关闭server)
hexo deploy # 项目部署
hexo help # 查看帮助
hexo version # 查看Hexo的版本
hexo clean # 清除Hexo的缓存Some of the above commands can be abbreviated using
hexo n
hexo g
hexo d
hexo s3.1 Local debugging three-link
hexo clean
hexo g
hexo s --debug3.2 Remote deployment of three companies
hexo clean
hexo g
hexo dNote: When using the deployment command, you need to install the hexo-deployer-git plugin with npm first:
npm install hexo-deployer-git --save4. Write your first blog post
It is not difficult for Hexo to write blog posts. There are two types of posts and drafts. Posts are stored in the source/_posts directory, and drafts are stored in the source/_drafts directory.
The difference between post and draft is that the former will be posted to the blog, while the latter will not.
4.1 The first article
hexo n post "my-first-post"Hexo will automatically create a new .md file named my-first-post in the source/_posts directory; open the file and you can see:
---
title: my-first-post
date: 2018-04-21 23:11:30
tags:
---This is the YAML file header automatically generated by the post template, title is the title of this post, you can change it to My First Post; date is the date of creation; tags are the tags of the post, you can add custom tags:
---
title: My First Post
date: 2018-04-21 23:11:30
tags:
- demo
- first-post
---Then perform local debugging three times, and you can see the blog post you just wrote.
hexo clean
hexo g
hexo s --debug4.1 First draft
The creation command is similar to the previous one:
hexo n draft "my-first-draft"Also the draft header file is undated:
---
title: my-first-draft
tags:
---Draft files are not generated by the hexo gcommand to the public directory.