阿里云 OSS + Hexo + Aurora + Valine + Gittalk 搭建个人博客

type

Post

status

Published

date

Dec 10, 2023

slug

oss-hexo-aurora-valine-gittalk

summary

Hexo 博客搭建记录

摘要

最开始使用 github page + hexo 搭建博客，访问速度慢到发指；正好手头有以前购买的一个 OSS 服务，还有好几年才能到期，所以就准备放弃 github page，重新在 OSS 搭建博客。

阿里云 OSS

1、购买 OSS 服务，创建 bucket

2、绑定自定义域名

3、开通静态网站托管功能

4、创建 AccessKey

Hexo

Hexo 是一个快速、简洁且高效的博客框架。

官网地址：https://hexo.io/zh-cn

1、安装 Hexo

2、Hexo 初始化

blog 是文件夹名称，可以放在任何地方，也可以是其他名字

3、安装依赖包

4、启动 Hexo

hexo 常用命令：https://hexo.io/zh-cn/docs/commands

然后再本地浏览器访问 http://localhost:4000 就可以看到 hexo 页面了。（默认主题很丑）

Aurora

Aurora 是使用极光颜色和 UI 元素的下一代主题。它给你平滑流畅的色彩和未来感。

官网地址：https://aurora.tridiamond.tech/zh

1、安装 Aurora

需要在上述 blog 文件夹中执行

2、生成主题配置

3、设置`permalink` 及 `theme`

打开 blog 目录下的 _coinfig.yml 文件

修改 permalink 参数为 /post/:title.html

修改 theme 参数为 aurora

4、重新生成文件及重启 Hexo 服务

然后再本地浏览器访问 http://localhost:4000 就可以看到 Aurora 主题了。（Aurora 主题相当惊艳）

其他更多配置请查看 Aurora 官方文档。

Valine (评论头像不显示，太丑；改成 Gittalk 了)

Valine 是 leancloud 提供的免费的评论系统。

leancloud 的官网地址是：https://www.leancloud.cn

1、账户注册并完成 email 认证和实名认证

2、创建应用

3、获取应用凭证

设置 >> 应用凭证（AppID、AppKey）

4、配置应用凭证

修改 valine.app_id 和 valine.app_key 的配置

更多配置参看：https://valine.js.org/quickstart.html

5、重新生成文件及重启 Hexo 服务

然后再本地浏览器访问 http://localhost:4000 ，随便点一个博客，拉到最底部，就可以看到 Valine 评论插件了。

博客产生的评论可以在 leancloud 控制台看到，并可以进行修改删除。
具体步骤：进入应用 > 数据存储 > 结构化数据 > Comment

其他

1、Hexo 安装 OSS 一键部署脚本

安装一键部署脚本

遇到的问题及解决方案：

1、本地具体博文刷新不显示

解决方案：

将如下配置从 _config.aurora.yml 迁移到 _config.yml

2、阿里云 OSS 具体博文刷新不显示

解决方案：

3、打开文章为空

经过排查疑似文章对应的文件名中包含特殊字符，导致转义失败

解决方案：

markdown 文件的文件名都用英文，不要包含需要转义的特殊字符

4、不能自定义预览文字问题

这些文字都是从文章的正文上截取的，有些 markdown 的标识也显示出来了，显得乱糟糟的，按照 hexo 官方文档中的设置，结果不起作用；再 aurora 群里咨询，有大佬提供的解决方案。

解决方案：

编辑博客这篇文章中的自定义设置预览文字部分提供了解决方案。

附：

`_config.yml` 最终配置

`_config.aurora.yml` 最终配置

参考文档：

Hexo 官网

Aurora 集成文档

【Hexo】搭建一个自己的博客-基本的配置 (视频)

Hexo 一键部署到阿里云 OSS 并设置浏览器缓存

搭建博客-图文教程

编辑博客 (博客各种细节设置与优化)

Aurora 自定义容器（Custom Containers） (aurora 主题的各种自定义样式)