preface

Some students may feel that it is troublesome to set up a blog, which requires not only the purchase of domain name registration, but also the purchase of server configuration, as well as the cost to maintain them. That’s okay. Even if you don’t have any of these things, you can still start your own blog. All you need is a GitHub account.

This article is summarized as follows:

Okay, now let’s start building a blog using Hexo

Set up the blog

Install hexo

npm install -g hexo-cli

Initialize the project

Now we have the hexo installed. Next, use Hexo to initialize the blog project.

// Initialize the blog project Hexo Init Blog

Configure the topic

The default theme for hexo is _landscape, now we configure the theme to keep. _

NPM install hexo-theme-keep NPM install hexo-theme-keep NPM install hexo-theme-keep NPM install hexo-theme-keep NPM install hexo-theme-keep NPM install hexo-theme-keep NPM install hexo-theme-keep NPM install hexo-theme-keep Keep // Preview the site Hexo Server

Open in a browserhttp://localhost:4000As shown in figure

Add the article

new

Now, let’s create a new blog post

// In the Blog project, execute the following command: Create a new post, Hexo New Post

As shown in the figure, the newly created blog is stored in Markdown format in the blog/source/_posts directory.

The editor

To add text

Now let’s open the “recipe for the day. MD” and write down our recipe for the day.

And then save it. Refresh the link to http://localhost:4000. You can see the latest article that we just updated. As shown in figure

Add categories and labels

Next, we will add categories and tags to the article: Open “Recipe of the Day. MD” and modify it as follows



Then, open the terminal and execute the following commands separately.

hexo new page categories
hexo new page tags

As shown below, Hexo creates a categories and tags folder in the souce directory, each containing an index.md file.





Now we can visit each of the following addresses in the browser and see the categories and tags we added separately. Click on the “Food” category and the “Recipes” TAB to see their articles.

http://localhost:4000/categories/

http://localhost:4000/tags/

In order to access tags and categories directly from the main page, we can make the following changes to the node_moduels/hexo-theme-keep/_config.yml configuration file:



Refresh againhttp://localhost:4000As shown in figure

Published a draft

If you don’t want your article to be publicly accessible for a while, you can create a draft first. The following

Hexo New Draft today

The refreshhttp://localhost:4000We are not able to access our newly created article yet. If we want to access this article, we need to publish it by executing the following command

// Hexo Publish Draft

This article has now been moved from the _draft directory to the _post directory.



Then, we refresh againhttp://localhost:4000, you can see the article

The deployment of blog

Now we use the GitHub page to deploy our blog. First, you’ll need to have a GitHub account. If you don’t have one, you’ll need to sign up first.

The new warehouse

1. Let’s opengithub, and then click the New Repository button, as shown in the figure

2. Create a name namedusername .github.ioWhere username is your username on GitHub



3. After successfully creating the long repository, copy the HTTPS address of the repository, as shown in the figure below

The deployment of

// Confirm that the directory has been switched to the blog. If not, NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save NPM install hexo-deployer-git-save Type: git repo: https://github.com/one-cheese/one-cheese.github.io.git branch: master // Deploy the site to the repository Hexo Deploy

After the deployment is complete, we refresh the One-Cheese. github. IO repository and all the static resources in the locally generated public are uploaded to the repository, as shown in the figure.



Now, visit the GitHub page address One-cheek.github. IO to see the successful deployment of the blog.