Installation Process（MacOS）

Create a new repository on Github named {yourname}.github.io. The {yourname} must be the same as your Github username.
Install hexo （node and git need to be installed previously）

npm install -g hexo-cli
Create local blog folder

hexo init myBlog
cd myBlog
npm install
Install hexo developer git

npm install hexo-deployer-git --save
Create new blog

hexo new "My New Post"
Start local server

hexo s
So far you can open the browser and go to localhost:4000, then you will see the Hello World page

Add github push configuration to hexo _config.yml (there is space between key and value, BE CAREFUL)

deploy:
  type: git
  repo: https://github.com/{yourname}/{yourname}.github.io.git
  branch: master

Clean the public folder to avoid cache

hexo clean
Push to github (g stands for generate the needed files in public folder)

hexo g -d
Go to {yourname}.github.io and you will see the succeful online page

Configuration

Image Uploader

Prepare an online image uploader like Picgo, and follow the instructions

Jupyter Code Block Support

Embed Local File

npm install hexo-jupyter-notebook –save`
brew install pandoc
pip install nbconvert
Update _config.yml in hexo folder –> post_asset_folder: true
Create new folder named jupyter under folder _post to save the ipynb code blocks

mkdir jupyter-demo
Add the following code to your target md file

If you want to change the height and width of the iframe, please go to node_module of hexo, and find main.py in hexo-jupyter-notebook , change the relative configuration.
1
2
3
<iframe id='ipynb' marginheight="0" frameborder="0" width='924px'
height='680px' srcdoc="%s" style="scrolling:yes;">
</iframe>

Embed Online File

Go to https://nbviewer.jupyter.org/ and paste the link of online jupyter notebook, like

https://github.com/kinglin/YTClip/blob/cliptrial/02_Code/01_Scripts/FrameSampling.ipynb
Use the following code block and input the generated URL by nbviewer:

https://nbviewer.jupyter.org/github/kinglin/YTClip/blob/master/02_Code/01_Scripts/rename_addprefix.ipynb

1	<iframe src="your_URL" width="700" height="500"></iframe>

## Change Theme

Themes repository
Go to the root folder of your blog

git clone https://github.com/theme-next/hexo-theme-next themes/next
Update _config.yml in hexo folder –> theme: next

Add Space between Chinese character and English words Automately

npm install hexo-filter-auto-spacing --save

Then you can find the denpendency in package.json :"hexo-filter-auto-spacing": "^0.2.1"

Add Search Feature

npm install hexo-generator-searchdb --save

Update _config.yml in hexo folder

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Update _config.yml in NexT folder

1 2	local_search: enable: true

Attach Custom Domain

Buy one at aliyun.com or godaddy.com or any websites that provide the services.
Take aliyun.com as example, we need to resolve the domain and add 2 records.
Go to your github page settings and attach the customized domain.
Go to hexo source folder and add a new file named CNAME, fill in the domain. (To avoid being wiped out when submit changes to github)

Add Feedback (Valine)

Update _config.yml in theme next –> enable valine
Login or register on LeanCloud, then replace the appid and appkey to _config.yml

Add Word Count & Estimate Reading Time

npm install hexo-symbols-count-time --save

Add following code block to hexo _config.yml

symbols: true
  time: true
  total_symbols: true
  total_time: true

Enable field symbols_count_time in NexT _config.yml

Change URI to Permanent Link

As we know, the original link of our posts is composited by year, month, day and title, but this location is not friendly enough to SEO, so that we need to change it to the permanent way.

npm install hexo-abbrlink --save

Update hexo _config.yml

permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

Restart hexo and we will find the link of our post will be like localhost:4000/posts/12345.html

Add Google Analytics

Register on Google Analytics
Apply a new account for your website and you will get an tracking_id like UA-14xxxx949-1

Update NexT _config.yml

1
2
3

google_analytics:
  tracking_id: UA-14xxxx949-1 
  localhost_ignored: true

Add Sitemap

npm install hexo-generator-sitemap --save
Add following config in hexo _config.yml:
1
2
sitemap:
path: sitemap.xml
change URL to your own domain

Add robot.txt

Create a new file named robot.txt under the folder hexo source, and fill in the following text.

User-agent: *
Allow: /
Allow: /archives/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://pojian.xyz/sitemap.xml
Sitemap: https://pojian.xyz/baidusitemap.xml