前几天看到腾讯云十周年活动,服务器价格比较划算,于是果断下单 主要是为了连接智能未来。并且申请了这个域名。
不得不提的是,现在腾讯云的备案流程相比三年前,有了很大的提升,基本一步到位,给博哥的小弟点赞。
当天弄完域名解析,配置完Nginx之后,第二天就忘记这回事了。直到今天想起来这还有台服务器这钱不能白花,于是有了这个博客的诞生。

为什么选择Hexo

如果没有花费大量精力的打算,自己撸一整套出来的话,使用一个成熟的博客框架无疑是一个明智的选择。
说到搭博客,如果放在前几年,第一反应应该是WordPress。
下面进行简单的对比。

WordPress Hexo
类型 动态网站,有后台 静态网站
主题 非常多,甚至有工作室出品的付费高级主题 数量一般,文档质量普遍一般
文章管理 后台富文本,可以随时增改 预设模板,Markdown,增改后重新编译发布
评论 自建用户系统,灵活度高 依赖第三方评论系统,托管
搜索 成熟的全站搜索功能 因为是静态网站,搜索依赖前端匹配,资源越多性能越差。替代方案也是使用第三方搜索服务
成本 需要服务器 可以部署到GitHub Pages,免费

可以看出,如果想要功能完善的Blog,并且有服务器的话,WordPress或许是更好的选择。
那么为什么要选择Hexo呢?

因为杰哥以前用过。

搭建过程

安装

Hexo 的安装过程非常方便,按照官方文档的指引,几分钟就看到了 Hellow World

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

使用主题

Hexo 提供了两种使用主题的方式

  1. npm dependencies
  2. 将主题文件放入 themes\

然后修改配置文件 _config.ymltheme: your_theme即可

作为切图仔,想也不想直接npm install了一个主题,在之后的配置中遇到了问题,又换到了第二种方式

配置

由于腾讯云只提供免费的根域名证书,二级域名(如:hexo.yuanbo.online)需要使用泛域名证书,贵的一批。于是所有项目都以子目录(www.yuanbo.online/hexo)的形式部署,导致在配置时遇到了问题。

官方文档对子目录配置的说明如下:

// _config.yml
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://yuanbo.online/hexo
root: /hexo/
permalink: :title/
permalink_defaults:
root: hexo

配置之后,发现页面上很多超链接指向错误,没有添加子目录path,如:

  • 预期: localhost:4000/hexo/categories/
  • 实际: localhost:4000/categories

原因是在很多模板文件中,并没有使用root这个变量,需要手动进行修改。
但开始时使用npm dependencies方式引入主题导致了问题,在主题中的很多路径也是写死的,修改node_modules中的文件显然不是好的方案,于是换回了第二种主题引入方式。

修改模板中的路径,如:

<a href="/<%= post.path %>">
=>
<a href="<%= config.root%><%= post.path %>">

在顶层模板中为window注入全局变量

// head.ejs
<script>
var __root = "<%= config.root %>"
</script>

修改部分js中的路径,如:

localSearch('/search.json');
=>
localSearch(window.__root ? __root + 'search.json' : '/search.json');

在一系列的替换之后,超链接指向都正常了。

部署

执行hexo g进行编译,然后Nginx配置反向代理即可