Hexo优化-使用Netlify实现博客部署

20220919_Hexo优化-使用Netlify实现博客部署

我此前Hexo博客时托管在腾讯云上, 但是继腾讯云继上半年关闭了云开发环境的永久免费流量后, 9月份还更改了云开发的付费模式, 强制关闭了我的hexo云开发环境, 要求必须使用每月基础套餐+按量付费的新模式进行付费. 这促使我转向其他部署平台, 这次我找到了Netlify

我现在公司使用的项目管理工具是企鹅家的Tapd, 原本是免费,最近也开始收费了.看来目前企业的销售策略是,先使用免费吸引客户, 功能逐渐完善,客户增长到一定规模就会开启付费使用

关于Netlify

Netlify是一个前端自动化部署工具, 它会从你的git平台仓库拉取代码, 使用你配置的命令进行部署.

针对我部署个人博客的需求:

1. 自动化部署 √ Check!
2. 支持自定义域名 √ Check!
3. 支持CDN加速 √ Check!
4. 免费 √ Check! Check! Check!

此外Netlify还支持: ,Https,回滚等功能.

这个网站好香 现在看来这个平台对于个人开发者是不收费的 ヽ(￣▽￣)ﾉ

准备git仓库

git仓库我已经推送至gitlab, 我这里只是新建了.gitignore, 并在其中加入了.gitignore文件

部署Netlify

相比腾讯云复杂的配置机制, Netlify的配置显得极为简单易懂,你需要做的只有授权gitlab, 配置命令和自定义域名等必要操作.便可以得到一个自动部署的博客网站

值得注意的是, Netlify提供的域名我无法直接访问.通过魔法才可以看到. 后边我使用了自定义域名后, 就可以正常访问了. 所以对于国内用户来说, 自定义域名是一定要配置的

1. 点击New Site from Git 授权关联自己的gitlab仓库

2. 选择代码对应仓库及分支,并配置部署方式

   Build Command:  hexo generate
   Publish directory: public/

3. 点击Deploy,等待部署完成, 如果有魔法可以进行预览

使用自定义域名

在成功部署并预览OK后, 可以选择通过Netlify申请一个自定义域名或者直接新增一个已有的.

我本来就通过腾讯云注册了一个自定义域名 , 我这里直接选择了新增已有域名

Netlify新增自定义域名

1. 可点击Domain Setting新增 Domain alias

2. 输入自定义域名地址, www.xxx. xx

   新增OK后, Netlify会自动添加一个xxx.xx,并指向你添加的域名, www.xxx. xx, 这与主机域名的解析习惯有关

域名服务商增加解析

我这边的域名服务商是腾讯云

1. 登录腾讯云, 进入我的域名, 找到自定义域名,点击解析进入解析记录页面
2. 添加2条CNAME记录
   1. 主机记录1条输入www, 一条输入@
   2. 记录值均填写Netlify给的url
   3. 其他保持默认
3. 对新增的记录进行解析, 停止腾讯云托管原有的记录解析(如有)

测试新域名

1. 返回Netlify 自定义域名设置页面, 几分钟内解析失败字样应该就会消失

2. 使用自定义域名访问,成功跳转

CI/CD

Netlify会自动集成部署 , 你要做的就是提交代码到git平台, 很快就能看到自己博客已经更新

总结

就Hexo博客部署而言, Netlify对于腾讯云是完全的碾压, 免费, 更符合操作习惯的部署方式, 更简单易懂的操作,还有毫不逊色的性能.这次,外国的月亮确实更圆

Hexo部署配置	响应时间(s)	月均花费(CNY)	配置容易程度
jsdelivr(封禁前) + github	30	0	简单
jsdelivr(封禁后) + github	70	0	简单
腾讯云静态代码托管服务	5-15	20	较难
gitlab+ Netlify	5-10	0	简单

Reference

Hexo+Netlify快速搭建个人博客 - 知乎 (zhihu.com)

(72条消息) 用Github Pages+Hexo搭建博客之(七)如何删除一篇已经发布的文章 #成功解决：同时删除掉.deploy_git文件夹_夏普通的博客-CSDN博客_hexo删除文章

(72条消息) Netlify搭建个人博客设置域名_野猿新一的博客-CSDN博客_netlify 域名

后记

Netlify博客时区Bug

博客文档发布时间在凌晨0到8点,会导致图片展示bug

问题

发布博客时发现页面图片未显示

# 检查元素, 发现图片路径undefined
<img src="/2023/0503undefined/2_1.jpg" alt="水煮肉片" class="img-shadow img-margin">
# 而本地博客发布OK
<img src="/2023/050331373/2_1.jpg" alt="水煮肉片" class="img-shadow img-margin">

排查

接口确认为404

# 图片接口404
请求 URL: https://www.feny.space/2023/050331373/4_1.jpg
请求方法: GET
状态代码: 404 

确认Netlify部署日志, 发现图片路径不同

1:06:24 PM: INFO  Generated: 2023/050231373/4_1.jpg  # 注意此处为0502, 怀疑为8小时时区导致

想到此处是5/3凌晨, 而Netlify博客上识别为5/2, 怀疑为时区8h错误

date: 2023-05-03 03:10:00  # 文档编写信息
Publish Date:   2023-05-02 	# Netlify博客识别信息

Bugfix

修改为12点确认显示OK, 由于Netlify时区Bug问题,发布时间不要在凌晨0到8点

date: 2023-05-03 12:10:00  # 文档编写信息