前言

之前使用了很久的 WordPress,用起来很方便,但是也有一些不令我满意的地方。首先,WordPress 的源在国外,更新起来很慢很不方便,只好在服务器上面搭建了一个梯子。其次,WordPress 的后端加载速度实在是太慢了,有点无法忍受。而且 WordPress 写文章感觉也没有直接写 markdown 方便。所以,哪怕 WordPress 还是有很多的优点,但我还是决定放弃 WordPress。

我知道有很多方法可以优化 WordPress 的加载速度,帮助更新,但是很麻烦不说,也不能从根本解决

然后在偶然的机会下,接触到了 Hexo,看了一些示例文档,觉得不错,所以打算试一试,于是首先创建了一个 ECS 快照,防止操作失误数据丢失。然后趁此机会把服务器换回了我最常用的 Ubuntu,安装了 Hexo,按照教程进行之前数据的迁移和本身、主题等的配置,最终决定就用 Hexo 来搭建新博客。

我在后面接触到了 Hugo 等其他静态博客的项目,感觉都不错,但是和 Hexo 相比没有碾压式的优越,所以也没有纠结,就继续采用 Hexo

安装

安装路线

流程

安装 Node.js

在安装 Hexo 之前需要安装好 node.jsWindows 可以直接在官方网站下载安装包,在安装的时候要记住加入环境变量中。Linux 用户可以从 NodeSource 安装。

node.js 是基于 Chrome V8 引擎的 Javascript 运行环境,可以帮助我们在本地直接运行 Javascript 而不需要借助浏览器。

我在我的 Ubuntu 服务器上安装的时候,下载速度简直无法忍受,只好去安装了一个命令行版本的科学上网工具:ssr-command-client。所以推荐 Linux 用户使用下载二进制文件的方式进行安装。

官网下载对应的二进制文件,可以在服务器使用 wget 的方式,也可以下载到本地,然后通过 FTP 工具上传。

下载得到的是一个 *.tar.xz 文件,使用 tar -xvf *.tar.zx 进行安装,假设安装目录为 /usr/local/nodejs/,然后添加环境变量,可以使用软链接:ln -s /usr/local/nodejs/bin/node /usr/local/bin/node,最后检查一下是否安装成功:

1
2
3
4
root@qjlyh:/usr/local/nodejs# node -v
v14.15.1
root@qjlyh:/usr/local/nodejs# npm -v
6.14.8

安装 Git

直接下载安装包安装即可,依然注意环境变量的问题。Linux 基本都自带了 git,不用安装。所以关于 Git 的安装就不过多赘述。

安装 Hexo

直接按照 Hexo 官网的介绍安装即可:

1
npm install hexo-cli -g

注意之后的操作一般都是在 Hexo初始化目录(或者项目根目录)下进行的。如果执行失败,可以通过以下命令更改环境变量:

1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

初始化

使用下面的命令初始化你的项目文件夹,并且进入文件夹安装 package.json 中的包:

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

安装完成之后,项目的文件结构如下图:

1
2
3
4
5
6
7
8
project folder
├── _config.yml 配置文件
├── package.json 应用程序信息
├── scaffolds 模板文件
├── source 源代码
│ ├── _drafts 草稿
│ └── _posts 文章
└── themes 主题

常用命令

写博客

Hexo 本体支持.md.ejs 两种格式的文件,但是只要安装了对应的渲染器插件,例如 Hexo-renderer-pug,就可以使用.pug 格式进行写作。
scaffolds 文件夹以及各个主题的 layout 文件夹下,是各种页面的模板。Hexo 自带了 3 个模板,都是 Markdown 格式的,分别对应草稿、文章和页面,生成新文件的命令是:

1
hexo new [layout] <title>

layout 是可选参数,代表生成什么类型(草稿、文章或者页面),默认_config.yml 中的 default_layout 参数;title 是文件名。
官方网站有很详细的说明!多读官方文档!!!

生成

我们写的博文源码都是.md 或者.ejs 一类的文件,然后通过 Hexo 按照主题的配置生成 htmlcssjs 文件,使用的命令如下:

1
2
3
# hexo clean 可以清除缓存(删除/public目录下所有内容)
hexo generate
hexo g

该命令会在根目录下生成 public 文件夹,该文件夹存储的就是网站所需要的文件了

草稿很类似于所谓的私密文章,只有自己能够看到。如果想要将草稿发布,有两种办法:一种是直接将草稿从_drafts 目录下移动到_posts 目录,或者是使用 hexo publish [layout] <title> 的方式

预览

Hexo 可以通过内置的 server 来预览生成的网站的效果:

1
2
hexo server --drafts
hexo s

默认情况下不会显示草稿,–drafts 参数可以强制显示草稿,或者是更改根目录下_config.yml 的配置项:render_drafts: true

部署

最后一步就是将你创作的内容发布,一般是通过这一个步骤将静态文件(也就是 public 文件夹)推送到 GitHub 的一个仓库中,生成 Github Pages,首先要更改根目录下_config.yml 的配置:

1
2
3
4
deploy:
type: git
repo: <repository url>
branch: [branch]

然后安装 hexo-deployer-git 插件,再执行下面的命令,就可以把 public 文件夹整体提交到 GitHub 的仓库中了:

1
2
hexo deploy
hexo d

Q&A

  • 为什么我不在本地搭建 node.js 环境,使用 Github Pages 搭建网站?
    首先是因为我不想在自己的电脑上安装太多的东西;其次是我通过阿里云的学生优惠,购买了一台 ECS,尽管配置不高,但是应付我这个小站肯定是可以的,所以我想把它利用上。所以最终我才用的方案是:本机 VS Code 远程连接服务器进行写作,在服务器上进行部署,同时推送源码到 GitHub 仓库备份(强烈吹一波 VS Code
  • 在本机 (Windows) 安装这些东西太麻烦,有没有什么简便的方法?
    答案肯定是有的,可以使用 Chocolate 或者 Scoop 进行安装,强烈推荐这种方法,可以很方便的管理这些应用,不用担心把你的 C 盘搞得一团糟。

参考资料