博客成长日志 | 使用 Hexo 搭建博客
前言 ¶
之前使用了很久的 WordPress,用起来很方便,但是也有一些不令我满意的地方。首先,WordPress 的源在国外,更新起来很慢很不方便,只好在服务器上面搭建了一个梯子。其次,WordPress 的后端加载速度实在是太慢了,有点无法忍受。而且 WordPress 写文章感觉也没有直接写 markdown
方便。所以,哪怕 WordPress 还是有很多的优点,但我还是决定放弃 WordPress。
我知道有很多方法可以优化 WordPress 的加载速度,帮助更新,但是很麻烦不说,也不能从根本解决
然后在偶然的机会下,接触到了 Hexo,看了一些示例文档,觉得不错,所以打算试一试,于是首先创建了一个 ECS 快照,防止操作失误数据丢失。然后趁此机会把服务器换回了我最常用的 Ubuntu
,安装了 Hexo
,按照教程进行之前数据的迁移和本身、主题等的配置,最终决定就用 Hexo
来搭建新博客。
我在后面接触到了
Hugo
等其他静态博客的项目,感觉都不错,但是和Hexo
相比没有碾压式的优越,所以也没有纠结,就继续采用Hexo
安装 ¶
安装路线 ¶
安装 Node.js¶
在安装 Hexo
之前需要安装好 node.js
。Windows
可以直接在官方网站下载安装包,在安装的时候要记住加入环境变量中。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 | root@qjlyh:/usr/local/nodejs# node -v |
安装 Git¶
直接下载安装包安装即可,依然注意环境变量的问题。Linux
基本都自带了 git
,不用安装。所以关于 Git
的安装就不过多赘述。
安装 Hexo¶
直接按照 Hexo
官网的介绍安装即可:
1 | npm install hexo-cli -g |
注意之后的操作一般都是在 Hexo
的初始化目录(或者项目根目录)下进行的。如果执行失败,可以通过以下命令更改环境变量:
1 | echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile |
初始化 ¶
使用下面的命令初始化你的项目文件夹,并且进入文件夹安装 package.json
中的包:
1 | hexo init <folder> |
安装完成之后,项目的文件结构如下图:
1 | project folder |
常用命令 ¶
写博客 ¶
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
按照主题的配置生成 html
、css
和 js
文件,使用的命令如下:
1 | # hexo clean 可以清除缓存(删除/public目录下所有内容) |
该命令会在根目录下生成 public
文件夹,该文件夹存储的就是网站所需要的文件了
草稿很类似于所谓的私密文章,只有自己能够看到。如果想要将草稿发布,有两种办法:一种是直接将草稿从
_drafts
目录下移动到_posts
目录,或者是使用hexo publish [layout] <title>
的方式
预览 ¶
Hexo
可以通过内置的 server
来预览生成的网站的效果:
1 | hexo server --drafts |
默认情况下不会显示草稿,–drafts 参数可以强制显示草稿,或者是更改根目录下_config.yml
的配置项:render_drafts: true
部署 ¶
最后一步就是将你创作的内容发布,一般是通过这一个步骤将静态文件(也就是 public
文件夹)推送到 GitHub
的一个仓库中,生成 Github Pages
,首先要更改根目录下_config.yml
的配置:
1 | deploy: |
然后安装 hexo-deployer-git
插件,再执行下面的命令,就可以把 public
文件夹整体提交到 GitHub
的仓库中了:
1 | hexo deploy |
Q&A¶
- 为什么我不在本地搭建
node.js
环境,使用Github Pages
搭建网站?
首先是因为我不想在自己的电脑上安装太多的东西;其次是我通过阿里云的学生优惠,购买了一台 ECS,尽管配置不高,但是应付我这个小站肯定是可以的,所以我想把它利用上。所以最终我才用的方案是:本机VS Code
远程连接服务器进行写作,在服务器上进行部署,同时推送源码到GitHub
仓库备份(强烈吹一波VS Code
) - 在本机 (
Windows
) 安装这些东西太麻烦,有没有什么简便的方法?
答案肯定是有的,可以使用Chocolate
或者Scoop
进行安装,强烈推荐这种方法,可以很方便的管理这些应用,不用担心把你的 C 盘搞得一团糟。