Create a free static Blog with Hexo+ Code cloud + Git

Original address: www.xksblog.top/quickly-bui…

As a front-end geek with a passion for technology, I was also excited to try blogging. I quickly found a bunch of ways to set up a personal Blog on the Internet, compared them, and finally went for Hexo. With Github/ Code Cloud’s Page service, it’s easy to set up a cool and elegant static Blog (and it’s totally free).

Preparatory work

Go to Git’s official website to download and install itGit(Version Control System)
Go to node. js official website, download and installNode.js(Built-in NPM package management tool, plus Hexo is based on Node.js)
Sign up for aCode cloud or Github account(Provide page service)
There is one that oftenRead official documentsGood habits (some simple installation go to see the official tutorial, here will not be verbose)

Why Hexo+ code Cloud

Hexo is fast, simple and efficient, and the installation process is simple, but the key is that its template theme is gorgeous (which is probably why Hexo attracts so many female programmers).

Take a look at Hexo’s official definition: Hexo is a fast, concise and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds.
As for the code cloud vs Github, as a domestic website, the access speed is naturally faster than Github, and it is easier to be included by SEO to improve the exposure rate of the blog.

Step 1: Hexo installation and testing

1. Install Git and Node.js

2. Install Hexo: Use the CMD command line to enter the following command

$ npm install -g hexo-cli
Copy the code

3. Specify a folder to store your Blog files (the root directory)

$ hexo init <folder>  # < Folder > replaces your folder address with the Hexo initialization file generated in this address
$ cd <folder>  Enter this folder
$ npm install  Automatically install the various modules that Hexo relies on within the folder
Copy the code

After the above three steps, Hexo is successfully initialized, so let’s do a local test

4. Generate static pages

$ hexo generate
Copy the code

5. Local test: Start the server

Hexo 3.0 separates the server into modules, so we have to install hexo-Server before we can use the server

$ npm install hexo-server --save
Copy the code

After the installation is successful, we only need to use the following command to start the server, the default website access address is: http://localhost:4000

$ hexo server
Copy the code

In five simple steps, a primitive local Hexo blog has been set up. Enter http://localhost:4000 to see something similar to the following.

Step 2: Pre-deployment preparations for Hexo

Localhost :4000 Fresh enough? Next comes the real thing, which is to use the code cloud for Blog deployment (Github uses a similar approach).

1. Create a login code cloud project.

If you want to access BOLG in the form of a first-level domain name like http://xuek.gitee.io, you need to create a project with the same name as your personal address, such as https://gitee.com/xuek, which should be named xuek when creating the project.

2. In clone/Download, copy the link in HTTPS.

3. Locate the _config.yml file in the local root directory of the Blog, locate the deploy field, copy the link from the HTTPS field to the end of the repo, change the value of type to git, and save.

After the above three steps, we have the code cloud connected to the local Blog, so how do we deploy the Blog to the code cloud? Don’t worry, git comes next.

Step 3: Use Git to version control your Blog

1. Right-click in the root directory of your Blog and choose Git Bash here

Git bash is a small mock Linux command line

2. If you are using Git for the first time, you should first configure the basic information about Git

$git config --global user.email+ space + your email address $git config --global user.email+ space + email addressCopy the code

Next, you can initialize Git in Git Bash to turn the Blog root directory into a Git managed repository

$ git init
Copy the code

In this way, you can use Git to manage your Blog version. See Liao Xuefeng’s Git tutorial for more information on how to use Git

Step 4: Deploy Hexo to the code cloud

Everything is ready except the east wind. Do you see a connection between git\hexo\ code cloud? Ok, now we will use Git to deploy Hexo on the code cloud

1. Install Hexo’s Git deployment plug-in in the Blog root directory

$ npm install hexo-deployer-git --save
Copy the code

2. After installing the Git deployment plug-in, we can enter the command to deploy with one click

$ hexo deploy
Copy the code

A dialog will pop up asking us to enter the account and password for the code cloud (later we will configure SSH for the site so we don’t have to enter the account password every time).

Step 5: Use the page service of the code cloud

1. Enter our code cloud project, you will find that the static file of the Blog has been uploaded to the project

2. Choose Services – >Gitee Pages, we use the Master branch, and then directly click “Start” to start the Page service. For more information about the code Cloud page, please refer to the code Cloud Gitee help documentation

And you’re done! Click on the website address to enter your own Blog!

But we’re not done yet, this is just the beginning…

Step 6: Configure SSH

Now that we have a free server (Page), we can bind it to our personal computer, so we don’t have to input your account password to communicate with Git all the time.

Without further elaboration, the most perfect SSH configuration tutorial can be found on the website: Generate and deploy SSH Keys

Step 7: Install the theme

Hexo users can’t get enough of its cool themes, but there aren’t enough of them on the official Hexo website. What are some interesting Hexo themes?

The theme of Hexo is basically a point-and-shoot installation, just copy the theme file to the Themes folder at the root of your Blog and modify the _config.yml site configuration file:

Here we use the Next theme. For details on how to install and use it, see the Next Documentation on the official website

Step 8: Create a new article

1. Use the following command to generate a new article

$ hexo new "title"
Copy the code

2. The generated new articles are in \source\_posts\title.md directory, after opening pay attention to understand the template parameters at the top, other self-editing can be.

Categories: text // Categories: [a, B,c] categories: text // Categories: [b, C] [Hexo,text] // Article label -- // The body of the article is written with markdown. <! --more--> // If the read full text option is set, the content below the MORE TAB will be hidden by the "Read full Text" word on the home pageCopy the code

3. After modification, the article can be previewed in the local http://localhost:4000 according to the previous method (restart sever each time). As for official update to the website, we still need to see the next step.

Step 9: Update your Blog

1. Clear cache files (db.json) and generated static files (public)

$ hexo clean
Copy the code

2. Regenerate static files and automatically deploy them to the website

$ hexo generate --deploy  # can be shortened to hexo G-d
Copy the code

conclusion

These are the basics of building a Blog based on Hexo. This tutorial is just to straighten out the idea, as a share, if there are mistakes in the article also please give advice.

The process of setting up a Blog may seem simple, but the knowledge involved is quite extensive, and it takes some time to peruse the various official documents, not only to know how to use them, but also to know why, which is what we will continue to study next.

This is the first step in a long journey, and now comes the interesting but challenging task of personalizing our Blog ————. Blog theme beautification and personalization, is a huge project, online about the Next theme optimization advanced tutorial is very much, interested can try, here temporarily do not discuss, there is a need to make another article in the future.