Build github page using hexo

2016-08-28

It did spend much time for me to build the github page for the first time. So, I must take down the whole process and help others who want to play github pages and give them a shortcut to save time.

1. Intruduction

In Windows

　　Before installing the hexo and using github page, we should set the environment that is needed.

Install Operating System: Windows 7
Install Node:Node-V4.2.2-x64.msi,which is used to generate the static pages
Install Git:Git_V2.5.1_64bit.exe,which is used to submit the local content to github repository.
Install MarkdownPad:markdownpad2-setup.exe,which is a fully functional markdown editor in Windows Operating System.
Apply Github:Of course you should have a github repository at first. Otherwise, everything is no way.

In Linux

Choose the Operation System: ubuntu-gnome-16.04.1-desktop-amd64.
Install Git: Type the command: sudo apt-get install git, and then the system will find the git automatically.
Install Nodejs: There are a lot of methods to install nodejs in the Internet, you can choose one. Here I choose a easy way by typing commands as:

1 2	apt install nodejs apt all npm

Choose a markdown editor: There are great numbers of markdown editors in the Internet and you can choose anyone you like. Here I installed the Remarkable.

2. Configuration

　　There is no need to explain how to install the Node.js, Git and Markdownpad. Assume that your have install these software successfully. Then we begin to install the hexo as following.

2.1 Deploy the Hexo

1). Install hexo

　　open the git bash, and input the installing command:

npm install -g hexo

　　Just wait some time and you can see the successful signal as below:

2.) Initialization

　　select a folder where you want to store the hexo project and right click the folder,select the Git Bash Here, and then input the following command:

Hexo init

　　And now the installing work has been down. There are some hexo commands you must remember. And your blogs generation will depend on these commands.

hexo clean, which mean clean the hexo project, and delete the blog pages you have already generated.
hexo generate(abbreviated tohexo g),which can generate the blog pages based on your markdown pages.
hexo server(abbreviated tohexo s),which can deploy your blog pages in your local computer, you can visit there pages by inputting the websitehttp://localhost:4000 in your browser.
hexo deploy(abbreviated tohexo d), which can deploy your blog pages in your github repository.

2.2 Deploy the Github

1). Connect to your github

　　You can not manipulate your github until your have connected your computer with your github.
Firstly, you should configure your local git:

git config --global user.name "your name"   
git config --global user.email "your email address"

Second, you should generate a key to connect your github:

ssh-keygen -t rsa -C "your email address"

And enter the Enter when the input is needed.
Third, submit your key to your github. Enter the folder “C:\Users\Veviz.ssh” and you will see the fileid_rsa.pub. Open it and copy its content. Then visit your github, and get into your seeting. Then you need New SSH Key, and input the content your copied just now and conform it.By now, your computer has connected with your github.

2). Build a new Repository

　　Build a new repository which must be like your_user_name.github.io. This github repository will store all your blog pages you generated from your local hexo folder.

3). Configure your Hexo file

　　Enter your Hexo folder and find the _config.yml. Open it and change its content as following:

deploy:
  type: git 
  repository: git@github.com:vevizhong/vevizhong.github.io.git 
  branch: master

　　Where the repository is your new repository you just build. Then input the command as:

npm install hexo-deployer-git --save

　　Now your can input the deploy command as hexo clean+hexo g+hexo d and visit the website as your_user_name.github.io.

3. Change your domain name

　　If you don’t like your website which end with github.io, your can spend some money and buy a new domain name and binding your github page with your new domain name.

New a file which name is CNAME. Remember there is no postfix. Input the domain name your just applied. Place the file in the Source folder which is in your hexo folder.
deploy your local hexo project by input command hexo g and hexo d.
Log in the DNSPod, and enter in the domain name resolution. Add your domain your just applied.
Add two record. The main record/record type/record value are @/CNAME/your_user_name.github.io and www/CNAME/your_user_name.io respectively. Which is shown as following.
Change your domain DNSprovider, add two records f1g1ns1.dnspod.net and f1g1ns1.dnspod.net.
Wait for nearly 10 minutes and input your domain name your just applied.

4. My blog settings

4.1 Hide the main content of the blog

My blog is Dimensional Space, you can view it and see if you like its style. The theme of my blog is yilia and you can get it by git clone https://github.com/litten/ hexo-theme-yilia.git themes/yilia. Then you must change the _config.yml under the root folder Hexo by theme: yilia.
　　For a beautiful interface of my blog, I just want to keep a some paragraph for introducing the content of the blog. So I need add the  in the source blog file between the introduction and the contents. Such as following:

.....(Introduce my blog)  
<!--more-->  
.....(The content of my blog)

4.2 Add the Mathjax plugin to Hexo

　　For a Tech blog, it is always necessary to use formulas to express your meanings. However, the Hexo doesn’t support math formula. After searching in the Internet, many developers mentioned the Mathjax plugin. In order to let the Hexo support Mathjax to render formula, there are lots of methods. Most people choose to change javascript files in the theme folder and new some personal javascript files to let Hexo support Mathjax. However, it always went wrong when I tried these ways, and I don’t konw the reason.
　　The problem hasn’t been solved until I tried the method given by CAT X. The author developed a plugin to realize deploy the Mathjax automatically and add the Mathjax tag. Finally, my Hexo blog can edit the formula freely.
　　The steps of Mathjax plugin deployment is showing as follows:

1. Installation (In your hexo folder)

1	$ npm install hexo-math --save

2. Initialization (In your hexo blog folder)

1	$ hexo math install

Then add the plugins: hexo-math in the file _config.yml in the root folder of your blog folder.

3. Usage (Some example)

Mathjax inline:
Simple inline: $z=x+y$ and the effect is : Simple inline : $z=x+y$
Mathjax Block:

$$\frac{\partial u}{\partial t}
= h^2 \left( \frac{\partial^2 u}{\partial x^2} +
\frac{\partial^2 u}{\partial y^2} +
\frac{\partial^2 u}{\partial z^2}\right)$$

And the result is :
$$\frac{\partial u}{\partial t}
= h^2 \left( \frac{\partial^2 u}{\partial x^2} +
\frac{\partial^2 u}{\partial y^2} +
\frac{\partial^2 u}{\partial z^2}\right)$$

Source code of Mathjax: Github