Build Personal Blog -- Hexo (NexT) Basic Configuration

Posted on Edited on In , Views: Valine: 2.9k 3 mins.

Image Uploader

Embedding images into our articals is the most common and efficient way to make our thoughts express clearly, but it really takes efforts if we upload each image by ourselves. That’s why we need an image uploader to help up deal with the messy work.

Since we already have a Github account, we would like to choose a tool that could make Github as the image repository. There are a lot of tools could handle this, and I will take PicGo as an example.

  1. Download PicGo at here

  2. Create a new repository at Github to store your images.

  3. Go to Github settings -> Developer settings and generate a personal access token

  4. Copy the token (only display once) and fill into the PicGo settings

  5. You’ve done already. When you drag the image to the PicGo icon, it will upload to your Girhub repository and copy the reference link at the sametime, which you could paste into markdown file directly.

Change Theme

  1. Go to Themes repository to choose your favorite theme. I will take NexT as example.

  2. Go to the root folder of your blog

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

  3. Update _config.yml in hexo folder –> theme: next

  4. hexo clean

  5. hexo s

  6. Go to localhost:4000 to see the new apperance.

Add Space between Chinese character and English words Automately

When we are writing in Chinese or other languages, the mixure of different characters will bring the audience the messy expression, so that we always add one space on both sides of English words mannully. This method is going to make the process automately.

Excute the command 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

When you have over 50 articles, the Search function will be essencial for you to provide a good reading experience.

  1. npm install hexo-generator-searchdb --save

  2. Update _config.yml in hexo folder

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. Update _config.yml in NexT folder
1
2
local_search:
  enable: true
  1. hexo clean
  2. hexo g -d

Add Word Count & Estimate Reading Time

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

  2. Add following code block to hexo _config.yml

    1
    2
    3
    4
    symbols: true
      time: true
      total_symbols: true
      total_time: true

  3. Enable field symbols_count_time in NexT _config.yml

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.

  1. npm install hexo-abbrlink --save

  2. Update hexo _config.yml

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

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

0%