Hexo博客搭建与NexT主题设置

发表于 更新于 分类于 阅读次数： 本文字数： 4.3k 阅读时长 ≈ 4 分钟

最近使用Hexo搭建了博客，记录下搭建过程以及NexT主题的设置，以备之后使用。

搭建

选择将博客搭建到自己的服务器上。

本地

  1. 安装Node.js以及Git

  2. 安装Hexo

    1
    npm install -g hexo-cli

  3. 创建一个文件夹作为博客的根目录并初始化，同时安装hexo-deployer-git

    1
    2
    3
    4
    hexo init <folder>
    cd <folder>
    npm install
    npm install hexo-deployer-git --save

  4. 编辑目录下的_config.yml文件以备之后将本地文件推送到远程

    找到deploy:，修改如下：

    1
    2
    3
    4
    deploy:
        type: git
        repo: ssh://git@ServerIP:port/home/git/blog.git
        branch: master

  5. 添加Git用户并生成SSH密钥

    1
    2
    3
    git config --global user.name "yourname"
    git config --global user.email [email protected]
    ssh-keygen -t rsa-sha2-512

    记录下密钥放置的位置。在该位置会存有私钥和公钥（以.pub结尾），私钥须妥善保管不能泄露。

服务器

  1. 安装Git以及Nginx

    1
    sudo apt install git nginx -y

  2. 创建用户及仓库

    1
    2
    3
    4
    5
    6
    7
    8
    sudo useradd git
    sudo passws git  //设置密码
    cd /home/git  //进入用户目录，若无，则需进行创建
    sudo mkdir /home/git  //创建用户目录
    cd /home/git
    sudo git init --bare blog.git  //创建空仓库
    cd blog.git/hooks
    sudo vi post-receive  //创建hook函数，写入如下内容：
    1
    2
    #!/bin/sh
    git --work-tree=/var/www/blog/hexo --git-dir=/home/git/blog.git checkout -f

    赋予可执行权限：

    1
    sudo chmod +x /home/git/blog.git/hooks/post-receive

  3. 添加SSH公钥

    1
    2
    3
    4
    cd /home/git
    sudo mkdir .ssh
    sudo vi .ssh/authorized_keys
    sudo chown -R git:git /home/git  //修改文件所有权

    在文件中写入之前生成的公钥，导入后可在本地尝试是否能够免密码登录：

    1
    ssh git@ServerIP

  4. 创建网站根目录及Nginx

    创建网站目录：

    1
    2
    sudo mkdir -p /var/www/blog/hexo
    sudo chown -R git:git /var/www/blog/hexo  //赋予git网站根目录权限

    修改Nginx配置文件：

    1
    sudo vi /etc/nginx/sites-available/blog
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    server {
        listen 80;

        server_name  yourdomain.com;

        root   /var/www/blog/hexo;
        
        location / {
        	try_files $uri $uri/ =404;
        }
    }

    将配置文件链接到sites-enabled文件夹：

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

    检查配置文件是否存在问题：

    1
    sudo nginx -t

    通过后重启Nginx：

    1
    sudo systemctl restart nginx

  5. 启用HTTPS（可选）

    使用acme.sh签发Let’s Encrypt的免费证书。

    安装acme.sh：

    1
    2
    3
    sudo git clone https://github.com/Neilpang/acme.sh.git
    cd ./acme.sh
    ./acme.sh --install

    重新连接SSH

    1
    2
    sudo chown -R user:user /etc/nginx  //将Nginx目录权限赋予当前用户，user改为你当前的用户名
    acme.sh --issue -d yourdomain.com --nginx

    生成成功后安装证书：

    1
    2
    3
    4
    5
    sudo chown -R user:user /etc/ssl  //赋予当前用户/etc/ssl文件夹权限
    acme.sh  --installcert  -d  yourdomain.com   \
            --key-file   /etc/ssl/private/yourdomain.key \
            --fullchain-file /etc/ssl/certs/yourdomain.pem \
            --reloadcmd  "sudo service nginx force-reload"

    修改Nginx配置文件：

    1
    sudo vi /etc/nginx/sites-available/blog
    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
    server {
        listen 443 ssl http2;

        ssl on;
        ssl_certificate /etc/ssl/certs/yourdomain.pem;
        ssl_certificate_key /etc/ssl/private/yourdomain.key;
        add_header Strict-Transport-Security "max-age=31536000";
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

        server_name  yourdomain.com;

        root   /var/www/blog/hexo;
        
        location / {
        	try_files $uri $uri/ =404;
        }
    }

    server {
        listen 80;
    	
        server_name  yourdomain.com;
    	
        return 301 https://yourdomain.com;
    }

    检查配置文件是否存在问题：

    1
    sudo nginx -t

    通过后重启Nginx：

    1
    sudo systemctl restart nginx

发布

在本地Hexo根目录下：

1
2
hexo g
hexo d

之后打开网站即可看到：

NexT主题使用与设置

主题安装与更改

  • 安装

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

  • 更改

    将_config.yml中的theme改为next

    1
    theme: next

配置文件合并

参考：数据文件

  1. 请确认不存在 /source/_data/next.yml 文件（如果已存在，请删除）
  2. 从主题的 /themes/next/_config.yml 文件中复制你需要的 NexT 配置项到 /_config.yml 中，然后
    2.1. 所有这些配置项右移两个空格（在 Visual Studio Code 中：选中这些文字，CTRL + ]）。
    2.2. 在这些参数最上方添加一行 theme_config:。

数学公式支持

配置

参考：数学公式

使用

在需要启用公式的文章的开头将mathjax设为true：

1
2
3
4
title: ...
date: ...
...
mathjax: true

  • 行内公式：$公式$

  • 行间公式：$$公式$$

这是行内公式：x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

这是行间公式：

x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

搜索

参考：Search Services

阅读次数

参考：修复 LeanCloud 统计插件安全漏洞

文章字数和阅读时长

参考：hexo-symbols-count-time

顶部加载进度条

参考：Progress bar for NexT

顶部浏览进度条

1
2
3
4
5
6
7
# Reading progress bar
  reading_progress:
    enable: true
    # Available values: top | bottom
    position: top
    color: "#37c6c0"
    height: 3px

返回顶部按钮添加浏览进度

1
2
3
4
5
6
back2top:
    enable: true
    # Back to top in sidebar.
    sidebar: false
    # Scroll percent label in b2t button.
    scrollpercent: true

版权声明

1
2
3
4
5
creative_commons:
    license: by-nc-sa
    sidebar: false
    post: true
    language:

Valine评论系统

主题配置文件中填入 leancloud 的appid和appkey:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
    enable: true
    appid:  # Your leancloud application appid
    appkey:  # Your leancloud application appkey
    notify: false # Mail notifier
    verify: false # Verification code
    placeholder: Just go go # Comment box placeholder
    avatar: mm # Gravatar style
    guest_info: nick,mail,link # Custom comment header
    pageSize: 10 # Pagination size
    language: zh-cn # Language, available values: en, zh-cn
    visitor: false # Article reading statistic
    comment_count: true # If false, comment count will only be displayed in post page, not in home page
    recordIP: true # Whether to record the commenter IP
    serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
    #post_meta_order: 0