How to build a bolg with Hexo framework?

Posted on | Edited on | In | Comments: | Views: 162
Symbols count in article: 8.1k | Reading time ≈ 7 mins.

Agenda

The process of building a blog is divided into three steps:

  • Write: Configuring the writing and formatting of the content

  • Build: Generate publishable final content from the original content you write

  • Publish: Make the content to be published visible to readers

Users who post content based on blog platforms only need to pay attention to the writing part, but to build an independent personal blog, all three aspects need to be concerned. Fortunately, there are a number of tools that help us simplify the process: the rich Markup language simplifies writing; the powerful static site builder simplifies builds; and the friendly hosting platform simplifies publishing.

The birth of this blog also benefited from these tools:

  • Write: Using Markdown, built-in grammar support for a lot of hierarchies, lists, hyperlinks, code, etc.

  • Build: Use Hexo, a few commands to complete the build, preview, and release steps

  • Release: Hosting with GitHub Pages, convenient and free

Next, I will explain how to complete the entire blog building process based on these tools in the following order:

  • Environmental preparation
  • Use of Hexo and NexT themes
  • Configuration and deployment of GitHub Pages
  • Bind a custom domain name (optional)
  • Hexo’s detailed configuration process

Environmental preparation

  • Install Node.js

Official website download: https://nodejs.org/en/download/

  • Install Hexo
1
$ npm install -g hexo-cli

Use of Hexo and NexT themes

Common Hexo commands

  • Initialization directory: 
1
$ hexo init [folder]
  • New article: 
1
$ hexo new [layout] <title>

or 

1
$ hexo n [layout] <title>
  • New draft: 
1
$ hexo new draft <title>
  • Publish the draft as a formal article: 
1
hexo publish <title>
  • Generate a static file: 
1
$ hexo generate

or 

1
$ hexo g
  • Listen for file changes: 
1
2
3
4
$ hexo g --watch
``` 

or

$ hexo g -w

1
2

- Deployment:

$ hexo deploy

1
2

or

$ hexo d

1
2

- First post then deployment:

$ hexo d -g

1
2

- Start the local server (the server will listen for file changes and update automatically):

$ hexo server

1
2

or

$ hexo s

1
2

- Start debugging:

$ hexo s –debug

1
2

- Preview draft:

$ hexo s –draft

1
2

- Clear cache:

$ hexo clean

1
2
3

### Use NexT themes
#### Download theme

$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

1
2
3

#### Enable theme
Edit "_config.yml":

theme: next

1
2
3

#### language setting
Edit "_config.yml":

language: en

1
2

#### Check whether it takes effect

$ hexo c && hexo g && hexo s

1
2
3
4
5
6
7
8
9
10
11


## Configuration and deployment of GitHub Pages

### Create a GitHub Pages
Create a repository called "username.github.io" under your GitHub account.

### Deploy blog to GitHub Pages
#### Set up ssh to access the GitHub repository

- Generate ssh key:

$ ssh-keygen -t rsa -b 4096 -C “your_email@example.com“

1
2
3
4

- Add content from ```$ ~/.ssh/id_rsa.pub``` in GitHub -> Settings -> SSH and GPG keys -> New SSH key

#### Install the git-deploy plugin

$ npm install hexo-deployer-git –save

1
2
3

#### Configuring the git-deploy plugin
Edit "_config.yml":

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

1
2

### Deployment

$ hexo d -g

1
2

## Bind a custom domain name (optional)

[create/edit source/CNAME]


[end]

1
2
3
4
5
6
7
8

Re-deploy and wait for DNS to take effect


## Hexo's detailed configuration process
### Set Avatar

Edit "_config.yml":

avatar: 

1
2
3
4

### Add tag page

- New page:

$ hexo new page tags

1
2

- Settings page (edit "source/tags/index.md"):

Type: “tags”

Comments: false

1
2

- Modify the menu (edit "themes/next/_config.yml"):

menu:
tags: /tags

1
2
3
4

### Add category page

- New page:

$ hexo new page categories

1
2

- Settings page (edit "source/categories/index.md"):

Type: “categories”

Comments: false

1
2

- Modify the menu (edit "themes/next/_config.yml"):

menu:
tags: /categories

1
2
3
4

### Add about page

- New page:

$ hexo new page about

1
2
3
4

- Settings page (edit "source/about/index.md")

- Modify the menu (edit "themes/next/_config.yml"):

menu:
about: /about

1
2
3
4
5
6
7

### Home article display summary
Insert ```<!--more-->``` in the appropriate place in the article, the part before the position is the summary, which will be displayed in the home page.


### Show article update time
Edit "themes/next/_config.yml":

Post meta display settings

post_meta:
updated_at: true

1
2

The article update time defaults to the modification time of the file. If you want to specify it yourself, you can add it to the front-matter of the article (the area separated by ```---``` at the top of the file):

updated: 

1
2
3
4
5
6

The format of ```<update-time>``` is ```2019-05-31 16:29:50```.


### Set code highlighting
Edit "themes/next/_config.yml":

Available value:

normal | night | night eighties | night blue | night bright

https://github.com/chriskempson/tomorrow-theme

highlight_theme: normal

1
2
3

### Add a Creative Commons Signature Agreement
Edit "themes/next/_config.yml":

Declare license on posts

Creative Commons 4.0 International License.

http://creativecommons.org/

Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa |

creative_commons: by

post_copyright:
enable: true
license: CC BY 4.0
license_url: http://creativecommons.org/licenses/by/4.0/

1
2
3
4
5
6

### Add a comment system

Use [Disqus](https://disqus.com/) as the review system. It should be noted that the Disqus has been walled, so it is impossible to see the wall. I can only believe that everyone is coming with a ladder. . .

Edit "themes/next/_config.yml":

Disqus

disqus:
enable: true
shortname:
count: true

1
2
3
4

### Sidebar social link

Edit "themes/next/_config.yml":

Social links

social:
gitHub: https://github.com/your-user-name
twitter: https://twitter.com/your-user-name
weibo: http://weibo.com/your-user-name

Social Icons

social_icons:
enable: true

Icon Mappings

gitHub: github
twitter: twitter
weibo: weibo

1
2
3
4

### Turn on the reward function

Edit "themes/next/_config.yml":

reward_comment: Adhere to original technology sharing, your support will encourage me to continue to create!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

1
2
3

### Site setup time
Edit "themes/next/_config.yml":

since: 2019

1
2
3
4
5
6

### Integrated search service

Use local search and configure it as follows:

- Install the hexo-generator-searchdb plugin:

$ npm install hexo-generator-searchdb –save

1
2

- Edit "_config.yml":

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

1
2

- Edit "themes/next/_config.yml":

Local search

local_search:
enable: true

1
2
3
4

### Add sitemap plugin

- Install the hexo-generator-sitemap plugin:

$ npm install hexo-generator-sitemap –save

1
2

- Configuration (edit "_config.yml"):

sitemap:
path: sitemap.xml

1
2
3
4

### Add spider protocol robots.txt

Create new "source/robots.txt":

User-agent: *
Disallow: /CNAME
Disallow: /README

Allow: /
Allow: /about/
Allow: /archives/
Allow: /categories/
Allow: /tags/

Allow: /css/
Allow: /images/
Allow: /js/
Allow: /lib/

Sitemap: /sitemap.xml

1
2
3
4

### Set up RSS

Install the hexo-generator-feed plugin:

$ npm install hexo-generator-feed –save

1
2

Configuration (edit "_config.yml"):

feed:
type: atom
path: atom.xml
limit: 20 # Maximum number of posts in the feed (Use 0 or false to show all posts)
hub:
content:

1
2
3
4

### Add footnote/superscript/subscript/abbreviation support

Since Hexo's default Markdown renderer is [marked](https://github.com/hexojs/hexo-renderer-marked), it does not support footnotes/superscripts/subscripts/abbreviations, we can use [Markdown-it](https://github.com/hexojs/hexo-renderer-markdown-it) instead of marked:

$ npm un hexo-renderer-marked –save
$ npm i hexo-renderer-markdown-it –save

1
2

Configuration (edit "_config.yml"):

Markdown-it config

Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki

markdown:
render:
html: true
xhtmlOut: false
breaks: false
linkify: true
typographer: false
quotes: ‘“”‘’’
plugins:

- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup

anchors:
level: 2
collisionSuffix: ‘v’
permalink: false
permalinkClass: header-anchor
permalinkSymbol:
`

Would you mind buy me a cup of coffee?