win10 use Hexo + GitHub to build personal blog

I. Introduction

Use github pages to build blog service has the following benefits

Full of static files, fast access speed
Free and easy, you do not need to have your own server
Free to bind their own domain name
Absolute data security, version management based on GitHub, want to restore to which version will do
Blog content can be easily packaged, transferred, published to other platforms

Ready to work

There is a GitHub account, if not to register a https://github.com/
Install git for Windows (or other clients)
Install node.js, npm

Node.js and install npm

Official website to download the appropriate installation version, I was under win64 the msi file
directly installed after the download, you can customize the installation path, all the rest according to the default configuration select the installation path step, all the way to next (Note: msi file installation steps above will automatic configuration environment variable, if the will is before downloading the zip file, you need to manually configure the environment variable)
verify the installation, enter cmd in or Git Bush
node -v
if appropriate version number appears, then the installation was successful! ! ! Since the new version of nodejs have integrated npm, so npm together before also installed, type the command line
npm -v
if the appropriate version number appears, then the installation was successful! ! !
Modify npm default installation location
if you do not modify the default position npm download module, the default installation path is: C: \ Users \ npm and npm-cache \ under Administrator AppData \ Roaming, all modules are installed here (of course you may not be modified).
Modify the way: Find node installation path, turn into node_modules-> npm, find npmrc file modification prefix, do not know what the problem is due to release a lot of online tutorials in the npmrc file prefix and the cache has two, and I npmrc file but only a prefix.
prefix=D:\NodeJS\node_global

Second, create a repository GitHub blog

Creating a warehouse
to create a new "Your username .github.io" warehouse called github if your user name is the test, then you test.github.io new warehouse (must be your user name, other name is invalid ), the future is your website address to access the http://test.github.io. (Note: Creating a warehouse may not take effect immediately, takes about 10 to 20 minutes)

Configuring SSH key
Step 1: Create SSH key. In the user's home directory to see if there .ssh directory, if there is, and then see if there id_rsa and id_rsa.pub these two files in this directory, if you already have, you can jump directly to the next step. If not, open the Shell (Open under Windows Git Bash), create SSH Key:
ssh-keygen -t rsa -C "[email protected]"
you need to e-mail addresses into your own e-mail address, and then all the way round, use the default value. If all goes well, can be found in the user's home directory .ssh directory, there are two id_rsa and id_rsa.pub file, both SSH Key is secret key pair, id_rsa private key, can not leak out, id_rsa.pub is the public key, can safely tell anyone.
Step 2: Login GitHub, open
Step two: Open your github page, enter your personal settings -> SSH and GPG keys -> New SSH key, title free to fill in the contents of id_rsa.pub generate the first step of replication to key in, and click the Add SSH key.
You can refer to: configure the SSH key

Third, the use hexo write blog

hexo About
Hexo is a simple, fast, powerful publishing tools based on Github Pages blog, Markdown format support, there are many excellent plugins and themes. Because dynamic content github pages are stored in static files, blog store not only content of the article, and the article lists, classification, labeling, and other page, if each finished article must manually update the blog directories and links information, I believe that anyone would be mad, so did was submitted hexo md these files are placed locally, each call after writing the article written command to generate the relevant page of the batch completion, then there are changes to the page to github.

Installation hexo
npm install -g hexo
because the download source in a foreign country, so installation is unsuccessful or slow connection situations may occur, then you can npm registry source to domestic image.

#获得原来的镜像地址
npm get registry
#设置为淘宝镜像
npm config set registry http://registry.npm.taobao.org/
#换成原来的
npm config set registry https://registry.npmjs.org/

Initialization
somewhere in the computer to create a new file called hexo folder (name can easily take), for example, I is D: \ Git \ myHexo, due to this folder in the future as a place to store your code, so it is best not to casually put.

cd D:/Git/myHexo
hexo init
hexo g    #生成
hexo s    #启动

After executing the above command, hexo will generate relevant html file folder in public documents, which are to be submitted to the future github to go. hexo s preview is on local services, open a browser to access http: // localhost: 4000 to see what a lot of people will encounter the browser has been loaded in a circular motion, but is not out of the question, under normal circumstances because the port is occupied the reason, since 4000 the port too common, resolve port conflicts, please refer to this article , the first initialization of hexo has helped us to write an article called Hello World, the default theme relatively ugly, open like this:
HeXo

Modify the theme
if you do not like the default theme, you can download the official website another nice point.
For example, put HEXO-Theme-yilia , first download the theme

cd D:/Git/myHexo
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

Download the theme will be placed ··· / myHexo / themes, modify myHexo in _config.yml the theme: landscape changed theme: yilia, and repeat hexo g to regenerate.
If some puzzling problems, you can perform hexo clean to clean up the contents of the public, then come back and re-generation release.

Uploaded to GitHub
Step 1: Configure _config.yml in part related to deploy the

deploy:
  type: git
  repository: [email protected]:liuxianan/liuxianan.github.io.git
  branch: master

Step 2: Install the plug
npm install hexo-deployer-git
other commands uncertain, the deployment of this command must use git bash, otherwise it will prompt Permission denied (publickey).
The third step: Open your git bash, enter hexo d will have to change this code for all submissions.

Write blog
use hexo new command in the source / _posts directory, or manually create .md file, use hexo d -g generate and upload the written, so that you can access the blog through yourname.github.io! ! !

Common Commands

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

#缩写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

#组合命令
hexo s -g #生成并本地预览
hexo d -g #生成并上传

Fourth, the relevant configuration

Picture of use
hello-world.md file after generating static pages on the public subdirectory, for example, I was /public/2019/03/12/hello-world/index.html, so linked images can be written as (../../../../img/img.png), that is linked to the images in the public / img file.

Edit site icon

Modify the steps:
- Find a your favorite icon, named favicon.png
- The pictures on the myHexo / themes / yilia / source / img / in (myHexo my hexo space, yilia is my theme)
- Find myHexo / themes / yilia / layout / _partial / head.ejs, find content and amended as follows:
```
<% if (theme.favicon){ %>
  <link rel="icon" href="/img/favicon.png">
<% } %>
```

How to make Bowen list does not show the entire contents of
default, the generated blog directory displays the entire contents of the article, if you want your blog does not show the entire contents, plus in the right position Bowen tab. (Note: the label before and after the change are preferably plus empty line)
more use

Deployment hexo series of questions will delete the README file to github

the reason
- After we execute the command hexo g, will source documents in the file format .md rendered as an html file and put the following public
- After the execution continues hexo d, will public following all the documents submitted to the corresponding XXX.github.io this warehouse
- Since the local public folder does not README.md this file, so when submitting public documents, github think you README.md deleted files, but also delete github warehouse README.md file, which is specific s reason
Solution
- README.md we create a new file in the local source file
- _Config.yml Hexo modify the root file, the value of the parameter to README.md skip_render

skip_render: README.md

//  为什么需要设置这一步呢？
//  因为你执行hexo g命令时，hexo会默认将source文件里的所有md文件渲染为html文件放到public中，
//  同时README.md会被渲染为README.html文件放到public文件里
//  加上这段设置，就是告诉hexo的解析器，你在渲染source文件里的md文件时，跳过README.md文件

Reference here

V. Postscript

Once built a long time ago, but because of mess up, it has been useless (mainly because less will be used, nor how to write blog). But now is looking for internships among others often look at some of the surface by also try to answer those questions, but found a lot of knowledge of their own will, but not clear, accurate to express, so be prepared to re-build from this blog, hoping to accumulated to his own day some of the important knowledge expressed in the form of text, in order to practice your skills, but also for a knowledge of digestion, sum up.
Last blog set up to spend a lot of time, due to node.js, npm, hexo do not know, it always felt where wrong, even years, a variety of error can also appear in other people's tutorials (feel that they have obsessive-compulsive disorder !!!). Today, take this thing also I spent twelve hours, and finally managed to get out! ! !

Blog reference: HTTPS: //www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html#%E4%B8%8A%E4%BC%A0%E5%88%B0github
Git tutorial: https: //www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000