使用 Hexo + GitHub + Netlify + Cloudflare提高博客的访问速度

使用 Hexo + GitHub + Netlify + Cloudflare 提高博客的访问速度

今天也是看大佬的教程改了自己的配置发现访问速度确实快了许多，遂自己写一份教程加深一些理解。

大佬的教程：https://blog.grin.cool/blog/Hexo-blog#/

注意本教程不适合纯 Hexo 小白（其实只要略微了解过一丢丢 Hexo 的就能看懂这篇教程），适合前期有过 GitHub pages 建立经验的进阶用户

食用本教程若有进不去网站等情况请检查你的代理或者开魔法再进

食用本教程请确保

使用过 Hexo 等博客框架，略微了解使用方法

了解 GitHub，Git 的一些基本操作

**了解 **《提问的智慧》以及《如何像一个弱智一样提问》

在没有错误日志下诊断问题无异于闭眼开车

首先，本教程相对于 GitHub pages 的优势

本方法不再局限于只有一个仓库可以生成静态页面
国内访问速度飞快
每月有 100G 流量带宽额度，300 分钟的构建时间，对于个人博客记录来讲完全够用甚至还余下很多
静态页面生成速度高于 GitHub pages 至少一倍
Netlify 可以启用免费的 TLS 证书，启用 HTTPS

用久了 GitHub pages 发现，在国内的访问速度确实是有点慢，这是因为 GitHub pages 的服务器是在国外，所以在国内访问慢是正常的

这个方法不需要云服务器，不需要备案，全部免费

也是看到了某大佬的博客才用这种方法 0 成本（时间成本不计入）提高博客访问速度

需要注意的是，本方法与原先的 GitHub pages 部署方法并不同

GitHub pages 是本地编译然后把编译好的前端页面推送到 GitHub repo

这里采用的改进方法是直接把 Hexo 源码推送到 GitHub repo，用 Netlify 进行自动编译

这里的好处就是

不占用原来的 github.io 域名，也就是说这两个可以共存
源码直接在 GitHub repo 仓库里，不用担心数据丢失
如果换了电脑，可以直接从 GitHub 拉取源码在进行操作

废话不多说直接开始操作

准备魔法工具（如已有可绕过）

GitHub 操作

**首先进入 **GitHub 建立一个空仓库

这里仓库名随便写就行，不再被 github.io 限制

我这里以 blog-Netlify-anzhiyu 为例，公有私有都行，你不想公开源码的话就私有

直接 git clone 刚刚那个 repo

然后在目录下初始化 Hexo，由于不是新手向教程，这里不过多赘述

**有关于 Hexo 的安装可以看这位大佬的博客 **https://akilar.top/posts/6ef63e2d/#/

初始化完成之后，安装你想安装的 Hexo 主题，我这里以 anzhiyu 主题为例

**下面是可供参考的 shell 脚本 **一键安装 anzhiyu 主题.sh

| 1
2
3
4
5
6
7
8
9
10
| printf "\033[32mINFO \033[0m 正在安装主题...\n"
npm install Hexo-theme-anzhiyu
printf "\033[32mINFO \033[0m 主题安装完成\n"
printf "\033[32mINFO \033[0m 正在安装依赖...\n"
npm install Hexo-renderer-pug Hexo-renderer-stylus --save
printf "\033[32mINFO \033[0m 依赖安装完成\n"
printf "\033[32mINFO \033[0m 正在停顿10s可供查看情况！无异常可Ctrl+C退出\n"
sleep 10s
|
| ——————————————- | ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————- |

主题安装完成后别忘了在你的_config.yml 文件里改掉主题，并且复制主题配置到博客根目录

_config.anzhiyu.yml ** **_config.yml

就是这俩文件

然后改一下 package.json 里面 script 的内容，涉及到后面的参数填写

| 1
2
3
4
5
6
7
| // package.json
"scripts": {
"build": "Hexo generate",
"clean": "Hexo clean",
"server": "Hexo server",
"netlify": "npm run clean && npm run build"
}
|
| —————————— | —————————————————————————————————————————————————————————– |