Use Github Pages and Hexo build their own independent blog [super detailed tutorial white]

---
welcome attention to my column: [ "build a personal blog: Hexo + Github Pages"] ( https://blog.csdn.net/qq_36759224/column/info/34316), from landscaping to set up one-stop help you Hexo solve common problems!

Recommended reading: [ "Hexo blog theme personalized"] (https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/)

My blog address: https: //www.itrhx.com/

---
@ [TOC] (article directories)

---

# ● 前言

This is an article about how to use Github Pages and Hexo detailed tutorial to build their own independent blog, and I am undergraduate software engineering, currently only learning C and C ++ programming languages, knowledge of web development is almost zero, which is why I wrote the following to build their own blog first blog, blog started to build when he is also a variety of online Baidu, due they belong to white that, after a lot of hard work was not ready, so take this opportunity to write a small white building truly understand the blog tutorial to teach you step by step to the other side of success!

Recommended Reading: [ "Why do I write a blog"] (http://www.cnblogs.com/jhzhu/p/3893297.html) (By Tomoaki so)
　　　　　[ "Why should you (from now on) to write blog"] (http://mindhacks.cn/2009/02/15/why-you-should-start-blogging-now/) (By Liu Peng not | Mind Hacks)

# ● Getting Started

> <center>Github Pages</center>

Github Pages can be considered user-written, static pages hosted on github's. Use Github Pages can provide a free server for you, eliminating the need to build their own database server and write the trouble. In addition you can also bind your own domain name.

> <center>Hexo</center>

Hexo is a fast, simple and efficient framework blog. Hexo use Markdown (or other rendering engine) analytical articles, in a few seconds, you can use beautiful themes to generate static pages.

# ● install Node.js 
[here] (https://nodejs.org/en/download/) visit the official website, download the appropriate version on demand, the default install it
! [] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY0ODFkMzc0MC5wbmc)

Note: I appear during the installation of Warning 1909, can not create a shortcut, this rarely occurs, if there are such cases in the installation process, please refer to Baidu library (win10 system found feasible): [ "Win7 installer warning 1909 Could not create shortcut "] (https://wenku.baidu.com/view/4ad59110964bcf84b9d57ba5.html)
! [] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY0Yzk5ZjcwOC5wbmc)

# ● install Git 
[here] (https://git-scm.com/download/win) visit the official website, download the appropriate version on demand, the default installation 
references: [ "how to install GIT under windows"] (https://www.cnblogs.com/jytx/p/5602927.html) (By Jun Yu-ting off)
　　　　　[ "Pro Git (Chinese version)" ] (http://git.oschina.net/progit/)

## • verify whether the installation was successful Git

Win press run and R keys to open the window, the input cmd , and enter these commands, the version information is displayed corresponding installation was successful, if not reinstalled correctly can uninstall the software, in addition If successfully installed, right-click on the desktop, you can see the menu more Git GUI Here and Git Bash Here two options, the first a is GUI operation Git , and the other is command line

Git --version $
$ node -v
$ Elevation -v

! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY0ZWU4YTc5NC5wbmc)! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY1MGVjMjA5Mi5wbmc)

# ● Installation Hexo 
to select a disk, create a new folder, own rename the folder (eg: My folder: E \ TRHX_Blog ), blog related files will be stored in this folder, right-click the folder, click on Git Bash here , enter the following command to install npm first command indicates installation hexo, a second command represents mounted HEXO git page deployed to the deployer, is the successful installation shown in FIG.

$ npm install hexo-cli -g
$ npm install hexo-deployer-git --save

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY1M2Q0YjAxOS5wbmc)

## • Hexo initial configuration 
in just the new folder inside a newly built again Hexo folder (such as: My folder: E \ TRHX_Blog \ Hexo ), enter the <color = # DC143C font> Hexo folder right mouse button, click on Git Bash Here , enter the following command, as shown in FIG installation was successful

$ hexo init
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY1NjZiNGI2Yi5wbmc)

: Hexo After installation is complete, the new file will be required in the specified folder, a directory folder Hexo as
[] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY1OGQyZWVlNS5wbmc)!

# ● Check local effect 
Execute the following command, you can log in executing the [http: // localhost: 4000 / ] (http: // localhost: 4000 /) to view the results

$ hexo generate
$ hexo server

The following information describes the successful operation of show:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

Login [http: // localhost: 4000 / ] (http: // localhost: 4000 /) to view the effect:
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY1YjdjNzRkMi5wbmc)

# ● blog will be deployed on Github Pages 
So far, we successfully built a local blog, but now we can only see the blog via local connection, we have to do is to make other people can also visit our blog, which we need to deploy to the blog on Github Pages

## • Register Github account 
[here] (https://github.com) Github visit the official website, click Sign Up Registry Account

## • Create a project code base 
Click New repository to start creating, steps and precautions shown below:
! [] (HTTPS: / /imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY1ZTA5MzBjMi5wbmc)

## • Configure SSH keys 
Only configured SSH after the key, we can achieve by git native code libraries and source operating Github database synchronization, the first time you create a new folder inside (eg: my folder: E \ TRHX_Blog ) Git Bash Here enter the following command:

SSH-keygen -t rsa $ -C "your [email protected]"
// quotes fill in your email address, for example, I was [email protected]

Then there will be:

. Generating public / Private Key pair rsa
the Enter the Save to File in Which at The Key (/c/Users/you/.ssh/id_rsa):
// here you can directly enter the key store file by default

Then there will be:

Passphrase the Enter (empty for NO passphrase):
// here to enter your password, in fact, do not need to lose any password, hit enter on the line
Enter same passphrase again:

The next screen will display:

Identification has been saved in Your /c/Users/you/.ssh/id_rsa.
Your public Key has been saved in /c/Users/you/.ssh/id_rsa.pub.
At The Key Fingerprint IS:
Here is a variety of alphanumeric strings, and ending your mailbox
the key's randomart image is:
string here but also a variety of alphanumeric symbols

Run the following command to copy the contents of the public key to the system clipboard

$ clip < ~/.ssh/id_rsa.pub

## • Add your public key GitHub account 
① landing GitHub, enter Settings :
! [] (HTTPS: // ImgConvert .csdnimg.cn / aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY2MDZlNzU1OC5wbmc)

② 点击 SSH and GPG Keys：
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY2MjJiNDU4OC5wbmc)

③ 选择 New SSH key：
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY2M2ViMWFiMi5wbmc)

④ paste the key:
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY2YmMxZmM4Ny5wbmc)

## • Test 
Enter the following command: Note: [email protected] not make any changes!

$ ssh -T [email protected]

After appears:
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY2ZTNiNDgwMy5wbmc)

Input yes is displayed after:
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY3MDJjNDZkNi5wbmc)

At this point represents the settings are correct

## • Configure Git personal information

Git will be recorded according to the user's name and email submission, GitHub is also set by the processing of personal information, enter the following command to do this information rights, replacing the name and email to your own name can not GitHub nickname, but In order to facilitate memory, recommendations are consistent with GitHub

$ Git config --global user.name "here fill in your user name"
$ git config --global user.email "here fill your mailbox."

SSH Key configuration success so far, the machine has successfully connected to Github

# ● The local Hexo file updates to the Github repository 
① Login to open their Github project your name.github.io 
! [ ] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY3MjBjY2FlMC5wbmc)

② 鼠标移到 Clone or download 按钮，选择 Use SSH
![](https://img-blog.csdnimg.cn/20190816220246218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzU5MjI0,size_16,color_FFFFFF,t_70)

③ a duplicate address key
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY3NmNiM2RhNC5wbmc)

④ open your created Hexo folder (such as: E: \ TRHX_Blog \ Hexo ), right-Notepad (Notepad ++ or VS code and so can be) open in the folder _config.yml file
! [] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY3OGI4YmEzZS5wbmc)

FIG modification ⑤ Press _config.yml file and save
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY3ZTExZWVkNy5wbmc)

⑥ Run the following commands in the Hexo file folder

$ hexo g
$ hexo d

Or direct execution

$ hexo g -d

After performing will let you enter your Github account and password, if this time reported the following error to show that you did not install successfully deployer

ERROR Deployer not found: git

Need to execute the following command to install it again:

npm install hexo-deployer-git --save

Then execute `hexo g -d` , your blog will be deployed to the Github

⑦ access blog

Your blog address: https: // your username .github.io , for example, I was: https://trhx.github.io , now everyone can visit your blog through this link

# ● published an article on the blog

Blog has been successfully set up, but how can we write a blog it?

① create a new empty article, enter the following command in the project will generate Article Title .md file \ Hexo \ source \\ _ posts , the according to the article title needs to be named

$ Hexo n "article title"

Can also be directly in the \ under Hexo \ source \\ _ posts directory Right new text document, change the suffix as .md can be, which more convenient ways

② article written by editor

md full name Markdown, Markdown syntax in 2004 and designed by John Gruberis developed in plain text format, very simple and practical, common reference numerals few, few minutes to learn , .md file can be used to support Markdown syntax editor, and then save the file to \ Hexo \ source \\ _ posts folder to

Use the recommended Windows MarkdownPad2 or The Little Book Carpenter editor, use the macOS Mou Edit device, the use of the Linux Remarkable editor, use the Web end CSDN , another editor recommendation can refer to my other article: [ "The latest mainstream Markdown editor recommended"] (https://blog.csdn.net/qq_36759224/article/details/82229243)

Article title, tags, categories, cover images, summaries, you can configure the Front-matter inside (Front-matter is the variable document to the top of the region --- separated, is used to specify individual files, the official document: https: / /hexo.io/zh-cn/docs/front-matter), for example:
`` `Markdown
---
layout: page layout (with the theme document uses)
title: name of the article
date: date of the article
comments: whether to open the article comments
photos: articles cover art (only some theme support)
tags:
- a tag
- article tags two
categories: articles Category
description: the article describes, that is, to (partially only theme support) is displayed in the summary Home
---

Here is a summary

Here is the text

Note: description and <-! More -> mode displays a summary of a second election can be, part of the theme does not support the description, each configuration colon back to a space, configured with different themes vary, the specific reference to theme documentation
`` `

When we write a good essay by the editor, you can use the following command to push it to the server

$ hexo g
$ hexo d

The two commands into one or enter the following command:

$ hexo d -g

Now visit your blog can see it written article!

References: [ "the 10 popular Markdown editor"] (https://blog.csdn.net/jinhui157/article/details/73872795) (By xiaoxiao_engineer)
　　　　　[ "dedicated to writers of Markdown Beginner's Guide"] ( https://www.jianshu.com/p/q81RER/) (By Jane book)
　　　　　[ "understanding and Getting Started Markdown"] (https://sspai.com/post/25137) (By Te_Lee)
　　　　　[ "concise Markdown syntax "] (http://ibruce.info/2013/11/26/markdown/) (By inferior)
　　　　　[" basic Markdown syntax "] (https://www.jianshu.com/p/191d1e21f7ed) (By high Hongxiang)
　　　　　[ "Markdown formula Guidebook"] (http://www.liuhaihua.cn/archives/143443.html) (By Harries)
　　　　　
# ● to replace your favorite blog topic

Blog also build a good article will be written, but! ! ! The default theme does not like how to do? Now, we have to replace your favorite theme for your blog

[Click here] (https://hexo.io/themes/) into the theme column Hexo official website, we can see there are many topics for us to choose
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4MDI1YzM3Yy5wbmc)

We have to do is to come clone theme, our theme here Aero -Dual , for example, we can see the point into the theme of the blog, mouse slip in the end, we can see theme words By Levblanc (similar to other topics), click on the author Levblanc , the page will jump to the theme of all the relevant documents in an address on Github, copy the address
[] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4MjNmMTI3NS5wbmc)!
[] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4NDE0Y2VjNi5wbmc)!
[] (HTTPS:! // ImgConvert .csdnimg.cn / aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4NWRiZGYyMy5wbmc)

Then open under Hexo folder themes directory (eg: E: \ TRHX_Blog \ Hexo \ themes ), right Git Bash Here , enter the following:

$ Git clone here to fill in the subject address you just copied

For example, to install the Aero-Dual theme, enter the command:

$ git clone https://github.com/levblanc/hexo-theme-aero-dual

After downloading the wait can be generated in under themes directory hexo -theme-aero-dual folder and open configuration files Hexo folder _config.yml , find the keyword theme , to modify parameters: theme: hexo -theme-aero-dual ( other topics can be modified to an appropriate name), again noting that there is a space after the colon!
! [] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4N2MwYTdlOS5wbmc)

Return Hexo directory, right Git Bash Here , enter the following command to start the deployment of topics:

$ hexo g
$ hexo s

Opens a browser, visit [http: // localhost: 4000 /] (http: // localhost: 4000 /) you can see our theme has been replaced, if you feel satisfied with the results, we can deploy it to Github on

Open Hexo folder, right Git Bash Here , enter the following command:

Clean HEXO $
// role of this command is to clear the cache, if not enter this command, the server may not have updated the theme
$ hexo g -d

At this visit your blog you can see the theme after the replacement, but we still need to make changes to the configuration topics, such as website title, icon, etc., Hexo there are two main configuration file names are _config.yml , all of which are used for site configuration. Wherein, a site located in the root directory (for example, I: E: \ TRHX_Blog \ Hexo \\ _ config.yml ), comprising a main configuration itself HEXO entire station; another located theme directory (such as my: E: \ TRHX_Blog \ Hexo \ themes \ hexo-theme-aero-dual \\ _ config.yml ), this configuration is provided by the theme author the main options for configuring topics related to general _config.yml file has an associated comment, you can modify as needed

References: [ "What nice Hexo theme? "] (Https://www.zhihu.com/question/24422335) (know almost)
　　　　　[" HEXO | Configuration "] (Hexo official (https://hexo.io/zh-cn/docs/configuration.html) documents)
　　　　　[ "HEXO commonly used commands notes"] (https://segmentfault.com/a/1190000002632530) (By brother tone)

# ● configure personalized domain name for your blog Hexo

I am in the allocation of domain names highly problematic, Baidu various methods do not work, always open the site 404, maybe I am too stupid o (╥﹏╥) o, but the good news was finally solved this problem

First we have to buy the domain name, [Ali cloud] (https://www.aliyun.com), [Tencent cloud] (https://cloud.tencent.com) can be, not expensive, hundreds of dollars a year the cheapest a few dollars can buy to Ali cloud, for example, I purchased the domain name is [itrhx.com] (https://www.itrhx.com/), (most start to buy is trhx.top) , the purchase process will not go into details, select aliyun analytical platforms, went to Ali cloud-based management console, click into the list or click DNS to resolve domain name back
! [] (https://imgconvert.csdnimg.cn/ aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4YTFhYjhiOC5wbmc)
method 1: click add records, two records need to be added, two record types are CNAME , recording of the first host @ , the second host record for the www , the recorded values are filling your own blog address (for example, I was: [trhx.github. io] (http://trhx.github.io) ), DNS after saving is complete! (@ And www host record there to ensure that URL did to be able to access www)
! [] (Https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjUvNWM5OGY4YmYzZTI0ZC5wbmc)
Method two: two records of type A , recording of the first host @ , is recorded as the second host www , recorded values are the blog IP address, IP address can cmd enter ping your blog address get (such as my: ping trhx.github.io ), then save DNS is complete!
! [] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMjYvNWM5OTAzY2EwMzg4Yy5wbmc)
difference for understanding the type of record can refer to [ "in DNS A record, CNAME, MX records, NS records the differences and connections"] (https: // blog.csdn.net/it_man/article/details/9017307)

In order to receive our GitHub domain, also you need to add in the root directory of a blog called CNAME file ( careful not to add .txt, no ! suffix ), this file into the Hexo folder source inside, (such as mine is: E: \ TRHX_Blog \ Hexo \ source ), the file which fill your domain name ( plus without www will do ), for example, to fill my domain name, which will write the file: www.itrhx.com or itrhx.com , after the above operation, others can pass [www. itrhx.com] (https://www.itrhx.com), [itrhx.com] (https://itrhx.com), [trhx.github.io] (https://trhx.github.io) three any one of them a visit my blog up! You, too!

Issues relating plus without the www with the following differences:
> If you have not filled out the www, for example itrhx.com, then either visit https://www.itrhx.com or https://itrhx.com, automatically Jump to https://itrhx.com

> If you fill out is the www, for example www.itrhx.com, then either visit https://www.itrhx.com or https://itrhx.com, will automatically jump to https: // www. itrhx.com
>
! [] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pLmxvbGkubmV0LzIwMTkvMDMvMTIvNWM4N2IyODM3YTVlMy5wbmc)

If you purchase a domain name on other platforms, or select [DNSPod] (https://www.dnspod.cn) and other domain name resolution, similar methods of operation, a problem can solve their own Baidu!

References: [ "recommend a few domain name registration service provider"] (https://zhuanlan.zhihu.com/p/27349039) (By Jelly Bool)
　　　　　[ "inventory of the top ten free DNS resolution service: stable and reliable"] (http://www.chinaz.com/web/2015/0122/380042.shtml)

# ● Add blog landscaping and utility functions 
about blog late landscaping, add useful features, you can refer to my other two articles:
[ "optimization of Hexo blog blog beautification"] (https://blog.csdn.net/qq_36759224/article/details/85420403)
[ "optimization of Hexo blog useful features add"] (https://blog.csdn.net/qq_36759224/article/details/85010191)

# ● Conclusion 
meal although a little tired down the operation, but has seen his blog is very rewarding, life is the need to toss, so now you start writing the journey! Continue to accumulate article, you will benefit from a lot of! In addition, this is an article written in white applies to the white of the blog to build tutorials, more detailed, Baidu basis in this area can have a little brief tutorial, the paper pointed out that if an error also requested Gangster correct! Involved in the text references deleted if infringement, please contact me!

Use Github Pages and Hexo build their own independent blog [super detailed tutorial white]

Guess you like