Teach you how to use hexo to build your own blog site-a complete and detailed version in history (based on GitHub for mac)

One, install Node.js

Download link : https://nodejs.org/en/

1.1 After downloading the installation package, install it directly.

1.2 Open the terminal and switch to the root user.

1.3 Check the version of node

1.4 Check the version of npm

Because the installation of hexo requires node to support, therefore, this step is a pre-step.

Two, install hexo

  In the installation hexo when help is needed npm package manager to install, but the country due to the speed mirroring is slow, it is generally use before using npm install a CNPM .

2.1 Install cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

As shown:

2.2 View cnpm

2.3 View the version of cnpm

This shows that cnpm has been installed successfully! ! !

2.4 Use cnpm to install hexo blog framework globally

command:

cnpm install -g hexo-cli

As shown:

2.5 Verify that hexo is installed successfully

When you see the existence of this information, you can know that hexo has been installed.

Third, use hexo to formally build a blog framework

3.1 Create an empty folder named: LyfdeBlog

3.2 Enter LyfdeBlog directory

3.3 Really use hexo to generate blog!

① Initialize a blog

sudo hexo init

As shown in the figure:

②Look at the files generated in this folder

ls -l 

As shown in the figure:

③You can also look at the generated things in finder:

④Start the blog

hexo s 

Where s is the abbreviation of start, which means to start the blog.

⑤ Then, open http://localhost:4000 in the browser, and you can see the following effects:

⑥ Press ctrl + c to disconnect, and then create a new article.

hexo n "我的第一篇博客"

As shown in the figure:

⑦Enter source/_posts/this directory

cd source/_posts/

As shown in the figure:

Then, we will find that we created the file successfully.

⑧ 我的第一篇博客.mdWrite a blog in this md file, here is the vimcommand to write.

⑨ Back to the LyfdeBlogdirectory again , the command is as follows:

cd ../..

As shown in the figure:

⑩First hexo clean up

hexo clean

As shown in the figure:

⑪ Then, hexo is generated, the command is as follows:

command:

hexo g

Among them, g is short for generate

As shown in the figure:

⑫ Restart again

command:

hexo s

As shown in the figure:

⑬ Then, refresh the address http://localhost:4000 again, and the newly created blog post will appear.

As shown:

3.4 Deploy the blog to GitHub

①Open your own Github first, and then create a new warehouse. The steps are as follows:

②After creating this warehouse, go back to the terminal and install a git deployment plugin. The command is as follows:

cnpm install --save hexo-deployer-git

As shown in the figure:

If the above warning message appears, don't worry, just continue to the next step.

③Setup _config.ymlfile

command:

vim _config.yml 

As shown in the figure: the

modified content, as shown below:

The link https://github.com/Chasing987/Chasing987.github.io.gitcorresponds to your address link on github, as shown below:

④Deploy to remote

hexo d

As shown in the figure:

Note: If you are required to enter your account and password at this time, just enter your github account and password directly!

⑤ Then, you will find that your github warehouse has the following contents:

At this time, you can do an operation and Chasing987/Chasing987.github.iotake out this link to directly visit. That is:

Then, you will find that the hexo blog we just built has the blog we wrote before, as shown in the figure below: In

  this way, your blog has been successfully deployed to your github, and you can directly https://Chasing987.github.ioYou can directly access your personal blog site through this URL, and you do not need localhost：4000to access it through the port.

Fourth, change the blog theme

4.1 Recommend a topic

The link is: https://github.com/litten/hexo-theme-yilia , click on the link, and you will be able to enter the following interface:

  Here is a reminder : all the operations we do are based on the files created before For example, I did it in the LyfdeBlog directory. If you have any problems with any operation or don’t like this folder, you can delete the folder and start again.

4.2 Download themes

Back to the terminal, use the following command to download this theme.

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

As shown below:

4.3 View the downloaded file

Because it is downloaded to the theme directory, we can go to this directory to see if there is such a file.

Similarly, you can also go to the themes directory in the LyfdeBlog directory on your computer to see if there is a yilia folder.

If you can see the above file, it means the download was successful! ! !

4.4 Configure yilia theme to your blog

① Go back to the terminal and use the following command to return to the upper level directory and display the files under the directory.

cd ..
ls -l

As shown in the figure:

②Configure _config.ymlthis file

Terminal command:

vim _config.yml

As shown in the figure:

③Then modify the file and change the subject from landscapeto yilia.

④Re-hexo clean up

command:

hexo clean

As shown in the figure:

⑤ Then, hexo is generated

hexo g

As shown in the figure:

⑥Hexo start it

hexo s

As shown in the figure:

Then http://localhost:4000refresh this local 4000 port again, and you will find that the style of the previous blog has changed, as shown in the figure:

⑦Push it to the remote

Press ctrl+c to terminate the previous process, and then push the following command to the remote end:

hexo d

As shown in the figure:

⑧ Then, we https://chasing987.github.io/can also see the results of the above blog changes through the previous link of our own blog .
As shown in the figure: In

this way, we have completed the construction of the entire personal blog!

If you feel the writing is okay, let's have a one-click triple-link, hehehehe! ! !