Hexo Blog

Posted on Edited on In , Disqus:

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

Install Hexo

Mac Install Homebrew

Install homebrew: 

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

For Chinese mainland: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#Update Homebrew
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

#Update Homebrew-core
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

#Update Homebrew-cask（Last but not least）
cd "$(brew --repo)"/Library/Taps/homebrew/homebrew-cask
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-cask.git

# If using zsh
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles/' >> ~/.zshrc
source ~/.zshrc

update homebrew: 

1
brew update -v

Install Hexo

Install Hexo and create a blog folder:

1
2
3
brew install hexo
hexo init blog
cd blog

cd blog and edit the last line of _config.yml about github configuration:

1
2
3
4
deploy:
  type: git
  repo: ubuntu@server_ip:/home/ubuntu/hexo/hexo_static.git
  branch: main

Install Next:

Hexo Themes

1
2
git clone https://github.com/next-theme/hexo-theme-next.git themes/next
rm -rf themes/next/.git

Edit _config.yml, change theme: landscape to theme: next

1
npm install hexo-deployer-git --save

Change Font:

Change Font to Noto Serif SC

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
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Noto Serif SC
    size: 

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Source Code Pro

Change Font Size

Issue: Font size change ineffective

When modifying the font size in Hexo NexT, even though the default size is set to 1em (16px), the actual body font appears larger, at around 1.125em (18px).

After some research, I discovered that besides modifying font styles and sizes in themes/next/_config.yml, there is another key file controlling the font size:
themes/next/source/css/_variables/base.styl.

Below is the default configuration in base.styl:

1
2
3
4
5
6
7
8
9
// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.5em;

Change font size base

Even though the body font size was supposed to be 1em, it appeared larger. Adjusting $font-size-base to 0.9em worked as a temporary solution.

The body font size on the webpage was 1.125em. Searching for occurrences of 1.125em in the themes folder pointed to the $font-size-large variable in the above configuration. Searching for font-size-large led me to the file:
themes/next/source/css/_common/components/post/post.styl.

The relevant section of the file is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.post-body {
  font-family: $font-family-posts;
  word-wrap();

  +desktop-large() {
    font-size: $font-size-large;
  }

  .exturl .fa {
    font-size: $font-size-small;
    margin-left: 4px;
  }

  .image-caption, .figure .caption {
    color: $grey-dark;
    font-size: $font-size-small;
    font-weight: bold;
    line-height: 1;
    margin: -20px auto 15px;
    text-align: center;
  }
}

Lines 5-7 configure the body text size using $font-size-large by default. Changing this to $font-size-medium solved the problem.

Change Code Block Font Size

To adjust the font size of code blocks, modify the table-font-size in the themes/next/source/css/_variables/base.styl file. Setting it to 80% scales the code block font size to 80% of the main body font size:

1
2
3
4
5
6
7
8
9
// Table
// --------------------------------------------------
$table-border-color             = $grey-lighter;
$table-font-size                = $font-size-small;
$table-cell-border-bottom-color = $grey-lighter;
$table-row-odd-bg-color         = #f9f9f9;
$table-row-odd-bg-color-dark    = #282828;
$table-row-hover-bg-color       = $whitesmoke;
$table-row-hover-bg-color-dark  = #363636;

By modifying this configuration, the code block font size adjusts relative to the main font size.

Add Search Function

Run the following command to install the hexo-generator-searchdb plugin:

1
npm install hexo-generator-searchdb --save

Then, find the Local Search section in the NexT theme configuration file and set enable to true:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

Modify Link Styles

To customize the link styles, open the file:
themes/next/source/css/_common/components/post/post.styl
Add your desired styles at the end of the file.

Hexo LaTeX Support

Uninstall hexo-math Run the following command to remove the hexo-math plugin:

1
npm un hexo-math

Switch to an Alternative Renderer

  1. Uninstall the default renderer and install hexo-renderer-pandoc: 

    1
    2
    npm un hexo-renderer-marked
    npm i hexo-renderer-pandoc

  2. Install Pandoc on macOS (if not already installed): 

    1
    brew install pandoc

Update hexo/_config.yml

Add the following configuration at the end of your Hexo configuration file:

1
2
3
4
5
6
math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

Update next/_config.yml

Modify the math settings in the NexT theme configuration file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those pages which have `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex script on EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

vendors:
  mathjax: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

Important Notes:

If per_page is set to false, add mathjax: true to the front-matter of your Markdown files to enable MathJax for specific pages. For example: 

1
2
3
4
---
title: Example
mathjax: true
---

Commnet

Go to https://disqus.com/profile/signup/ , register and create a site, copy the short name

add disqus to active, and paste the short name

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
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: disqus
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any naves, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

# Disqus
# For more information: https://disqus.com
disqus:
  enable: true
  shortname: ****
  count: true

Encrypt

Encrypt Blog using Hexo-Blog-Encrypt

1
npm install --save hexo-blog-encrypt

Edit _config.yaml

1
2
3
4
# Security
##
encrypt:
    enable: true

Just need to add a prefix in the blog post:

1
2
3
4
5
---
password: password
abstract: This blog is encrypted.
message: You must enter the password to read.
---

Deploy Hexo to Ubuntu

Git Prepare

Install Git:

1
sudo apt-get install git-core

Create a bare git repository

1
2
3
4
5
6
mkdir ~/hexo
chown -R $USER:$USER ~/hexo
chmod -R 755 ~/hexo

cd ~/hexo
git init --bare hexo_static.git

Deploy using Nginx

Assume nginx is alreay installed, so create a website directory

1
2
3
sudo mkdir -p /var/www/blog.yixingfu.net/html
sudo chown -R $USER:$USER /var/www/blog.yixingfu.net/html
sudo chmod -R 755 /var/www/blog.yixingfu.net

Create a git hook

1
vim ~/hexo/hexo_static.git/hooks/post-receive

put in the code below:

1
2
3
#!/bin/bash

git --work-tree=/var/www/blog.yixingfu.net/html --git-dir=/home/ubuntu/hexo/hexo_static.git checkout -f

and make it executable

1
chmod +x /home/ubuntu/hexo/hexo_static.git/hooks/post-receive

create ssh file and put local public key into it

1
2
3
4
5
mkdir ~/.ssh
chmod 700 ~/.ssh
touch ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
vim ~/.ssh/authorized_keys
1
sudo vim /etc/nginx/sites-available/blog.yixingfu.net

Paste in the following configuration block, which is similar to the default, but updated for our new directory and domain name:

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
        listen 80;
        listen [::]:80;

        root /var/www/blog.yixingfu.net/;
        index index.html index.htm index.nginx-debian.html;

        server_name blog.yixingfu.net www.blog.yixingfu.net;

        location / {
                try_files $uri $uri/ =404;
        }
}

Next, let’s enable the file by creating a link from it to the sites-enabled directory, which Nginx reads from during startup:

1
sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

Next, test to make sure that there are no syntax errors in any of your Nginx files:

1
sudo nginx -t

If there aren’t any problems, restart Nginx to enable your changes:

1
sudo systemctl restart nginx

Secure Nginx with Let's Encrypt

1
sudo certbot --nginx -d example.com