step1. 安装hexo

安装nodejs git Nginx hexo

Linux

1
2
3
4
5
6
7
8
9
10
# 更新系统包
sudo apt update && sudo apt upgrade -y
# 安装nodejs
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
# 验证安装
node -v
npm -v
# 安装hexo
sudo npm install -g hexo-cli

Windows

windows不用安装Nginx

访问 Node.js 官网 下载Node.js

1
2
3
4
5
# 验证安装
node -v
npm -v
# 安装hexo
npm install -g hexo-cli

初始化hexo, 安装butterfly主题

1
2
3
4
5
6
# 创建hexo目录
mkdir BLOG && cd BLOG
# 初始化hexo
hexo init
# 安装butterfly主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装必要插件

必装插件

1
2
npm install hexo-deployer-git --save
npm install hexo-renderer-pug hexo-renderer-stylus --save

选装插件

1
2
3
4
5
6
7
8
9
# 安装wordcount插件
npm install hexo-wordcount --save
# 安装loacal search 插件
npm install hexo-generator-search --save
# 公式相关插件（使用katex）
npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载
npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件

[!NOTE]

选装插件装完之后还需要在配置文档中进行配置，详情见后续配置部分

选装插件装完之后还需要在配置文档中进行配置，详情见后续配置部分

step2. 部署到服务器

1
2
3
4
5
6
# 更新系统包
sudo apt update && sudo apt upgrade -y
# 安装 curl Git 和 Nginx
sudo apt install -y curl git nginx
# 创建BLOG目录
mkdir BLOG && cd BLOG

配置git仓库

1
2
3
4
# 初始化一个裸仓库
git init --bare BLOG.git
# 创建钩子脚本（自动同步文件到网站目录）
vim BLOG.git/hooks/post-receive
1
2
#!/bin/bash
git --work-tree=/var/www/BLOG --git-dir=/root/BLOG/BLOG.git checkout -f

赋予脚本执行权限：

1
chmod +x BLOG.git/hooks/post-receive

在_config.yml中添加如下代码（ip与地址需自行更改）

1
2
3
4
deploy:
  type: git
  repo: root@<ip>:/root/BLOG/BLOG.git
  branch: master

配置nginx

1
2
3
mkdir -p /var/www/BLOG
sudo chmod -R 755 /var/www/BLOG
sudo vim /etc/nginx/sites-available/BLOG

进行如下设置，其中server_name部分要填写域名或ip地址，多个地址用空格隔开：

1
2
3
4
5
6
7
8
9
10
server {
    listen 80;
    server_name <your server name>;
    root /var/www/BLOG;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
1
2
3
sudo ln -s /etc/nginx/sites-available/BLOG /etc/nginx/sites-enabled/
sudo nginx -t          # 检查配置语法
sudo systemctl restart nginx

step3. 配置butterfly主题

以下为linux操作，window同理

[!NOTE]

[option]

由于升级主题会覆盖配置文件，所以建议将配置文件复制一份到hexo的根目录下（和config.yml一起）：

1
2
3
4
# 在 hexo 的根目錄創建一個文件 _config.butterfly.yml
touch _config.butterfly.yml
# 把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去
cp themes/butterfly/_config.yml _config.butterfly.yml

[option]
由于升级主题会覆盖配置文件，所以建议将配置文件复制一份到hexo的根目录下（和config.yml一起）：

1
2
3
4
# 在 hexo 的根目錄創建一個文件 _config.butterfly.yml
touch _config.butterfly.yml
# 把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去
cp themes/butterfly/_config.yml _config.butterfly.yml

新建标签页、分类页

标签页

1
2
3
4
# 标签页
hexo new page tags
# 进入source/tags/index.md
vim source/tags/index.md
1
2
3
4
5
6
7
---
title: 标签
date: 2018-01-05 00:00:00
type: 'tags'
orderby: length
order: -1
---

参数见：Butterfly 文檔(二) 主題頁面 | Butterfly

分类页

1
2
3
4
# 分类页
hexo new page categories
# 进入source/categories/index.md
vim source/categories/index.md
1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: 'categories'
---

设置404页面(_config.butterfly.yml)

将enable 从 false改为true，自定义subtitle 和 background。
background的位置是相对于source目录的位置

1
2
# 404 页面（由于我们之前将butterfly的配置文件复制到_config.butterfly.yml中了，因此我们只需要更改_config.butterfly.yml即可）
vim _config.butterfly.yml
1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/error-page.png

更改语言、网站资料(_config.yml)

1
vim _config.yml

主要改title，author，language三个参数

正常显示latex公式(_config.yml)

参考官方文档

step1.（安装插件时已做过）

1
2
3
4
npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载
npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件

step2.

1
2
3
markdown:
  plugins:
    - '@renbaoshuo/markdown-it-katex'

[!IMPORTANT]

在更更改完之后使用

1
hexo c && hexo g

使更改生效

在更更改完之后使用

1
hexo c && hexo g

未完待续…