2020年3月,在经历过几年之前Word Press的失败后,终于重拾对blog的兴趣,开始尝试使用Hexo。这次看中Hexo源于其对于Markdown以及公式的支持,以及Hexo的广泛度带来的网上丰富的教程。这里就根据我参考的教程,简单重复博客搭建过程。

1.(本文)本地近端安装 - 2. 服务器远端安装与设置 - 3. 腾讯云服务器,域名购买与备案 - 4. 七牛图床与PicGo等 - 5. 魔改美化汇总


整个博客的工作流程如下:在本地写文章,通过本地安装的hexo将文章搭配上各种博客部件做成静态网页。hexo自带的部署功能将做好的静态网页发送至服务器(我购买的腾讯云服务器)上的git仓库。服务器接受保存成品的网页,再通过nginx将网页分发给浏览网页的人。

我使用windows10操作系统的WSL2进行hexo的安装。所以用的都是Linux bash。

Nodejs 安裝

不要使用sudo apt-get的方式安装node!

注意,请一定不要使用sudo apt-get的方式安装node!会有各种恶心的权限问题 。按照推荐使用nvm(Node Version Manager)进行安装。

首先安装nvm 。根据(nvm github仓库与readme教程)所述:

1
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

验证nvm安装正确:

1
command -v nvm

应显示nvm。若没有显示,退出WSL2重新进入应该就可以了。这里不应该有大问题。

接下来通过nvm安装node:nvm install node(默认安装最新版)。

验证安装正确:

1
2
3
4
node -v
v15.4.0
npm -v
7.0.15

Hexo 安装

Hexo官方教程

1
npm install -g hexo-cli

检查安装完成:hexo -v

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo-cli: 4.2.0
os: Linux 4.4.0-19041-Microsoft linux x64
node: 15.5.1
v8: 8.6.395.17-node.23
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.17.1
modules: 88
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1i
cldr: 38.0
icu: 68.1
tz: 2020b
unicode: 13.0

(如果显示hexo命令找不到,应该退出WSL2重进就行)

下面开始正式建立第一个博客。

找到一个文件夹,作为本地博客的位置。

1
2
3
4
mkdir 博客文件夹
cd 博客文件夹
hexo init
npm install

npm install不能忘!我踩到过坑。

为了后面的部署,安装上hexo-deployer-git(Hexo官方教程deploy部分)

1
npm install hexo-deployer-git --save

Butterfly 安裝与基础配置

hexo-theme-butterfly教程/官网

两个先决条件的插件安装上:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

然后安装butterfly:

1
npm i hexo-theme-butterfly

这时候,将博客文件夹下主配置文件_config.yml更改并保存:

1
theme: butterfly

这是后我们运行hexo,就应该能够看到一个最基本的butterfly主题的博客了:

1
hexo clean && hexo g && hexo s
  • clean,清空
  • g,generate,生成
  • s,server,生成一个能够本地预览的网页。(默认http://localhost:4000/可以查看)

hexo clean不存在缩写hexo c!我踩到过的又一个坑。

为了将网页部署到远端服务器,让网页能让别人也打开,需要修改_config.yml的最后的“部署”部分(以我的腾讯云为例):

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repo: xxx@xxx.xx.xx.xxx:/home/git/hexoBlog #用户名@远端IP地址
branch: master

最后的部署命令:

1
hexo d
  • d,deploy,部署。

以后撰写博客并部署的命令一条龙:

1
hexo clean && hexo g && hexo d

剩下配置可见hexo-theme-butterfly教程/官网,这里为了方便,说几个我在配置时要用到的,需要安装插件:

1
2
3
4
5
6
7
npm un hexo-renderer-marked --save 
npm un hexo-renderer-kramed --save

npm i hexo-renderer-markdown-it --save # 需要安裝這個渲染插件
npm install @neilsustc/markdown-it-katex --save #需要安裝這個katex插件

npm install hexo-wordcount --save #为了字数统计

这里主要使用hexo-renderer-markdown-it与插件@neilsustc/markdown-it-katex显示公式。

hexo-renderer-markdown-it同时是我们所有markdown博文的渲染器,对其的配置需要上心。其官方wiki文档见于:https://github.com/hexojs/hexo-renderer-markdown-it/wiki/Advanced-Configuration ,核心点在于,一些feature的加载(比如上面所述的KaTeX插件,通常应该自带的footnote功能)需要我们手动在_config.yml中写明:

1
2
3
4
5
6
7
8
9
10
11
12
markdown:
plugins:
- plugin:
name: '@neilsustc/markdown-it-katex'
options:
strict: false
- markdown-it-abbr
- markdown-it-mark
- markdown-it-footnote
- markdown-it-emoji
- markdown-it-sub
- markdown-it-sup

最后注意一点,Butterfly的配置用到的一些图片,如avatar头像,ICP图标,网页图标,都放在博客文件夹\node_modules\hexo-theme-butterfly\source\img中。

Butterfly 原版个人配置笔记备用

图标

Butterfly支持 font-awesome v5图标.

Note

内置样式

四种style:simple,modern,flat,disabled;七种标志:无,default,primary,success,info,warning,danger。

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
{% note simple %}
默認 提示塊標籤
{% endnote %}

{% note default simple %}
default 提示塊標籤
{% endnote %}

{% note primary modern %}
primary 提示塊標籤
{% endnote %}

{% note success flat %}
success 提示塊標籤
{% endnote %}

{% note info flat %}
info 提示塊標籤
{% endnote %}

{% note warning disabled %}
warning 提示塊標籤
{% endnote %}

{% note danger disabled %}
danger 提示塊標籤
{% endnote %}

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

自定义icon

七种颜色:(default / blue / pink / red / purple / orange / green)

1
2
3
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 還是 UnionPay
{% endnote %}

你是刷 Visa 還是 UnionPay

两个有意思的功能:tab和button

Butterfly: Tab

Butterfly魔改美化功能

Hello Hexo 我的博客平台搭建(五)Butterfly魔改美化

以下为Hexo 官方极简帮助文档

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