New Blog, New Beginning

Posted on Edited on Comments: Views:

The Node.js, Hexo and Next themes used in previous blogs are outdated, causing a lot of compatibility issues. So I reconfigured my blog and this post records my configuration and development process.

Install Hexo

  1. Install Node.js, use the command node --version to view the installed version, the version I installed is 16.17.0.

  2. Install Hexo using npm install -g hexo-cli.

  3. Use the following commands to initialize and complete the most basic website building.

    1
    2
    3
    $ hexo init <BlogDir>
    $ cd <folder>
    $ npm install

My Hexo version is 6.3.0. For more detailed commands, please refer to This Doc.

Using Next theme

There are currently three versions of the hexo next theme: the earliest version, the second version, these two versions have been stopped maintenance, and the latest version is still being maintained. Please refer to this doc for the relationship between the three versions.

All subsequent configurations are based on the latest version.

  1. Download and install the Next theme:

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

  2. Set theme: next in Hexo site __config.yml to enable the Next theme.

  3. Set scheme: Pisces in Next Theme __config.yml(You can use other scheme).

Use abbrlink

Hexo uses the Markdown file name as the link by default. If the file name has Chinese, Hexo need to escape the it. In addition, it may lead to a very long link . Modifying the article title causes the article title to not match the file name. Modifying the file name will cause the article link to be modified. None of these above is helpful for search engines to search your blog.

So I hash the filename and use the hash as the link to the article. In this way, the article link will never change, which is convenient for search engines to search.

Install hexo-abbrlink:

1
$ npm install hexo-abbrlink --save

In Hexo site __config.yml set:

1
2
3
4
5
6
permalink: /post/:abbrlink/

# abbrlink config
abbrlink:
  alg: crc32  # crc16(default) and crc32
  rep: hex    # dec(default) and hex

Please refer to this doc for more information.

Modify blog image link

When using hexo-abbrlink, the address in the default Markdown syntax for adding images ![image description](address/image.jpg) is not converted, resulting in the image not being displayed. Referring to the previous hexo-asset-image plugin, I wrote a new plugin to solve this problem.

Install the plugin:

1
npm install https://github.com/littlesevenmo/hexo-asset-image2.git --save

in the Hexo site __config.yml set:

1
2
post_asset_folder: true
root: /

In this way, your blog's post structure will look like this:

1
2
3
YourBlogDoc
├── image.jpg
YourBlogDoc.md

Insert image image.jpg by ![image description](YourBlogDoc/image.jpg) or ![image description](D:/<Absolute_Addr>/YourBlogDoc/image.jpg). Then use hexo clean, hexo g, hexo server to preview.

Blog appearance modification

In <BlogDir>/themes/next/source/css/_common/components/post/post-body.styl, add:

1
2
3
4
5
6
7
8
9
10
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

Delete have XX posts in total

In <BlogDir>/themes/next/source/css/_common/components/post/post-collapse.styl, add display: none in .collection-title:

1
2
3
.collection-title {
    display:none;
    ....

Delete year and date from archives

In <BlogDir>/themes/next/source/css/_common/components/post/post-collapse.styl, add display: none in .collection-year:

1
2
.collection-year {
    display:none;

In <BlogDIr>/themes/next/layout/_macro/post-collapse.njk, delete:

1
2
3
4
5
6
7
<div class="post-meta-container">
     <time itemprop="dateCreated"
           datetime="{{ moment(post.date).format() }}"
           content="{{ date(post.date, config.date_format) }}">
       {{ date(post.date, 'MM-DD') }}
     </time>
   </div>

Delete powered by Hexo

In Hexo site __config.yml, set:

1
2
footer
	powered: false

Set posts tags from # to tag icon

In Hexo site __config.yml, set tag_icon: true

Set categories, tags, etc.

  1. In Next Theme __config.yml, set:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /Tags/ || fa fa-tags
      categories: /Categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

  2. Create a catalog file:

    1
    2
    cd <BlodDir>
    $ hexo new page categories

    In <BlogDir>/source/categories/index.md, add:

    1
    type: "categories"

    to article header.

  3. In this way, the content in the page is Category content. Tag is the same.

  4. Add the follows to the head of the blog post:

    1
    2
    3
    4
    5
    categories: 
    - Your categorie
    tags:
    - Tag1
    - Tag2

    Then you set categories and tags for articles.

AboutMe content can be written in the About page.

Turn off motion

In Next Theme __config.yml, set:

1
2
motion:
  enable: false

You can also modify other motion configurations in motion.

Enable article loading progress bar

In Next Theme __config.yml, set:

1
2
pace:
  enable: true

Enable math formulas

The syntax of the original math formula rendering plugin is not compatible with Markdown syntax, so I use pandoc for rendering.

  1. Install pandoc.

  2. Uninstall the original math formula editing plugin

    1
    $ npm uninstall hexo-renderer-marked

  3. Install the plugin using pandoc:

    1
    npm install hexo-renderer-pandoc

  4. In Next Theme __config.yml, set the follows to enable mathjax:

    1
    2
    3
    4
    mathjax:
        enable: true
        # Available values: none | ams | all
        tags: none

  5. Add the follows in the head of the blog post you want to render with Mathjax:

    1
    mathjax: true

  6. In Hexo site __config.yml, set:

    1
    2
    pandoc:
      pandoc_path: C:/Program Files/Pandoc/pandoc.exe   # Your real program address

Add search function

  1. Install the search plugin:

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

  2. In Hexo site __config.yml, set:

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      content: true
      format: html

  3. In Next Theme __config.yml, set:

    1
    2
    local_search:
      enable: true

When clicking search, the index file search.xml needs to be downloaded and then searched.

Pros:

  1. The index file search.xml coexists with the blog, which is stable and reliable.
  2. No search restrictions.

Cons:

  1. When the number of blogs is large, the search.xml file will be large and slow to load.

I use this search method on my Chinese site.

Reference

There are two plugins that support Algolia search: hexo-algolia and hexo-algoliasearch, the former can only search article titles, while the latter can search article content. I use the latter for the English site.

  1. Create an index in Algolia

  2. Record Application ID, Search-Only API Key, Admin Key

  3. Install npm install hexo-algoliasearch --save

  4. In Hexo site __config.yml, set:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    algolia:
      appId: "Your App ID"
      apiKey: "Your Search Only API Key"
      adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
      chunkSize: 5000
      indexName: "Your Index Name"
      fields:
        - content:strip:truncate,0,500
        - excerpt:strip
        - gallery
        - permalink
        - photos
        - slug
        - tags
        - title

  5. In Next Theme __config.yml, set:

    1
    2
    3
    4
    algolia_search:
      enable: true
      hits:
        per_page: 10

I think this way will be better: If it is found, it will display the found results, instead of showing that XXX is found within XXX milliseconds, like Google, Baidu does. If it is not found, it will display "not found".

In <BlogDir>/themes/next/source/js/third-party/search/algolia-search.js, delete:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
instantsearch.widgets.stats({
      container: '.algolia-stats',
      templates: {
        text: data => {
          const stats = CONFIG.i18n.hits_time
            .replace('${hits}', data.nbHits)
            .replace('${time}', data.processingTimeMS);
          return `<span>${stats}</span>
            <img src="${CONFIG.images}/logo-algolia-nebula-blue-full.svg" alt="Algolia">`;
        }
      },
      cssClasses: {
        text: 'search-stats'
      }
    }),

Pros:

  1. No need to preload, fast speed

Cons:

  1. The free version has a limit of 10,000 searches per month.
  2. Every time you update an article, you need to create a new index.
  3. In China, search may be slow due to slow internet.

Reference：Next reference doc，hexo-algolia reference doc，Hexo Algoliasearch

Add comment system

The comment system that comes with the Next theme is valine, which is a comment system without a backend, and it is said that there are some information security issues. So I use waline. First we need to follow waline's configuration document to set the required components, and also install the plugin Hexo NexT Waline:

1
npm install @waline/hexo-next --save

In Hexo site __config.yml, set:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# Waline Config File
# For more information:
# - https://waline.js.org
# - https://waline.js.org/reference/component.html
waline:
  # New! Whether enable this plugin
  enable: true

  # Waline server address url, you should set this to your own link
  serverURL: 'https://waline-server-five-pi.vercel.app/'

  # Waline library CDN url, you can set this to your preferred CDN
  libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js


  # Waline CSS styles CDN url, you can set this to your preferred CDN
  cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css

  # Custom locales
  locale:
    placeholder: Welcome to comment # Comment box placeholder

  # If false, comment count will only be displayed in post page, not in home page
  commentCount: false

  # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
  pageview: true

  # Custom emoji
  emoji:
  #   - https://unpkg.com/@waline/emojis@1.0.1/weibo
  #   - https://unpkg.com/@waline/emojis@1.0.1/alus
  #   - https://unpkg.com/@waline/emojis@1.0.1/bilibili
  #   - https://unpkg.com/@waline/emojis@1.0.1/qq
  #   - https://unpkg.com/@waline/emojis@1.0.1/tieba
  #   - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

  # Comment infomation, valid meta are nick, mail and link
  meta:
    - nick
    - mail
    # - link

  # Set required meta field, e.g.: [nick] | [nick, mail]
  # requiredMeta:
  #   - nick

  # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
  lang: en-US

  # Word limit, no limit when setting to 0
  wordLimit: 0

  # Whether enable login, can choose from 'enable', 'disable' and 'force'
  login: enable

  # comment per page
  pageSize: 10

If you don't want to enable comments on a page, please set the follows in the header of the article:

1
comments: false

The default comment description is Waline, which is very strange. In <BlodDir>\themes\next\languages\en.yml, add it under post:

1
2
3
post:
  comments:
    waline: Comments

then you modify Waline to Comments.

Set up FTP synchronization

Currently I use a virtual host to host my blog and need to use FTP to upload files. According to ChaosTong/hexo-deployer-ftpsync, I simply modified it to accommodate the latest node.js.

Install:

1
npm install git@github.com:littlesevenmo/hexo-deployer-ftpsync.git --save

In Hexo site __config.yml, set:

1
2
3
4
5
6
7
8
9
10
deploy:
  type: ftpsync
  host: Your FTP Host
  user: Your FTP Username
  pass: Your FTP Password
  remote: /
  port: 21
  ignore: 
  connections: 1
  verbose: false

Then you can use hexo d to deploy your blog.

Force access to blog with SSH

Use FTP to upload a file named .htaccess to the root directory of the site, the content is

1
2
3
RewriteEngine On
RewriteCond %{HTTP:KERSSL} !on
RewriteRule .* https://www.YourDomin.com/$1 [R=301,L]

Since the contents of the public folder will change after hexo d, it has to be copied, pasted and uploaded again each time. I use the alias command (function in Windows PowerShell) to execute multiple commands at a time, as follows:

1
function blogd {cd D:\Blog ; hexo clean ; hexo g ; hexo algolia; Copy-Item -Path .\.htaccess -Destination .\public\; hexo d}

Please note that the setting method may be different under different virtual hosts

Conclusion

The results of the above tests in my local are 0 Error, 0 Warning