从WordPress搬迁——使用Hexo搭建博客

前言

  之前使用了很久的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盘搞得一团糟。

参考资料