L
O
A
D
I
N
G

hexo[Matery] 访问加速


这两个星期天天熬夜到一两点,去学习怎么提高博客的访问速度。最终小有成果,下面我总结一下这几十天的研究内容。

一、全站加速(按照推荐等级排列)

1.1 CDN 加速

这个需要备案,如果没备案的话建议看后面的方法。

【2022.08.22】备案终于下来了。

这里我使用的是 DogeCloud CDN ,效果很不错,加速杠杠的。而且每个月都有 20 GB 的免费额度,这应该算是国内所有免费 CDN 中免费额度最高的了。
图1.1.1 DogeCloud CDN 免费流量额度

下面介绍配置方法

  1. 注册多吉云账户

  2. 注册完账户后记得实名认证,然后依次打开 融合CDN > 域名管理 > 添加域名,然后参考下面的图片进行配置:
    图1.1.2 配置待加速域名

  3. 添加域名(已备案,否则无法添加)后,Ping 一下这个域名,把得到的 IP 地址记录下来:
    图1.1.3 加速域名

  4. 来到域名解析供应商的控制台,把指向 GitHub Page 的域名解析规则删除,然后添加指向第三步获得的那个 IP 地址:
    图1.1.4 配置 DNS 解析

  5. 接着来到根目录下的 \source\ 文件夹,新建一个不带后缀的 CNAME 文件,文件内容即为你的域名(例如:seayj.cn)。

  6. 最后重新部署一下,耐心等待一会儿就行了(时间可能有点长,最多 10 min 的样子)。

补充配置
建议你可以弄以下配置:

  1. 基本配置
    • IPv6 访问开启
  2. 访问控制
    • QPS 限制 30 次/秒
    • 带宽流量封顶,当月流量超过 20 GB 就解析回源到 Github
  3. 性能优化
    • 开启 GZip 压缩
    • 开启搜索引擎回源
  4. HTTPS 配置
    • 选择你上传好的证书
    • 开启强制跳转 HTTPS
    • TLS 版本全选
    • 开启 HSTS
  5. 缓存配置
    • 缓存策略改成 1 小时(不超过该时间,你的网站是不会更新内容的)

1.2 Vercel 加速

【2022.7.16】 我目前备案还没下来,所以暂时用的这个办法。目前体验感觉还不错,都说我的博客访问速度提高了不少。

下面来详细说一下这个内容。

  1. 注册账号: 首先进入 Vercel 官网,直接用 Github 登录(Github Page 用户)。

  2. 导入项目: 点击 New Project 按钮新建项目,然后导入你的 GitHub 博客项目(xxx.github.io 那个)。有可能他会自动识别,自己可以按照实际情况自己来,只要把那个项目导入就行。详情见下图。

图1.2.1 导入项目

  1. 部署网站: 在这个就有一个,记得选择 Other 模板即可,其他的都默认。最后在部署卡片上面你就可以看到 Vercel 生成的 URL ,那就是 Vercel 加速后的网址。

图1.2.2 成功发布

  1. 修改DNS: 如果你有自己的域名,需要在域名服务提供商(阿里云、GoDaddy 等)的 DNS 解析中增加一条 CNAME 记录(将你的域名指向另一个域名)。就是把原来解析到 xxx.github.io 的规则改成 Vercel 提供的域名就行(第 3 步里生成的 URL 选一个即可,记得把原来 xxx.github.io 的解析规则的删了)。

图1.2.3 修改 DNS 解析

  1. 在 Vercel 里自定义域名: 最后,在 Vercel 项目中添加你的域名即可。

图1.2.4 添加域名

然后,过一会儿在访问自己的博客,嘿嘿~
速度快到起飞~(ノω<。)ノ))☆.。

1.3 gitee、gitlub、coding 等

1.3.1 gitee

本来我就想使用 gitee 进行代码托管,但是 gitee pages 的域名是不能自定义的。要想域名自定义,需要开通 gitee pages pro ,但是作为个人用户是无法在现在开用的。这个在 gitee pages pro 的官方文档里也有说明。

图1.3.1 Gitee 说明

不过有大佬提出了解决方案:方向代理。

可惜的是,这个办法需要域名备案…额…都域名备案了,为什么不直接使用国内的 CDN 加速呢?所以,我果断放弃了 gitee pages 的方案。

1.3.2 coding

然后我就想到了大家都使用的 coding ,但是我的 coding 账号不知道出了什么问题,绑定了一个不存在的腾讯云账号,还解绑不了(真有 TX 一贯的尿性,气炸了)!

所以,coding 我也不打算使用。这类文章网上也有很多,大家可以看别的人博客,借用 coding + hexo 来建设国内的博客(适合国内访问)。

1.3.3 gitlub 等

这类代码托管仓库我没怎么用过,大家自己研究一下吧,原理都一样。找个访问快点的代码托管,开启 Page 功能就行。

二、细节加速

2.1 源文件压缩

这里推荐使用 hexo-neat 来压缩相关源代码文件。

  1. 安装插件:
npm install hexo-neat --save
  1. 打开根目录文件 _config.yml,添加以下配置:
#hexo-neat 优化提速插件(去掉HTML、css、js的blank字符)
neat_enable: true
neat_html:
    enable: true
    exclude:
    - '**/*.md'
neat_css:
    enable: true
    exclude:
    - '**/*.min.css'
neat_js:
    enable: true
    mangle: true
    output:
    compress:
    exclude:
    - '**/*.min.js'
    - '**/matery.js' # 注意,这个是正对 matery 主题的 BUG 修复。其他主体如何修复可能的 BUG 需要自行百度
  1. 输入以下命令即可压缩源文件:
hexo g

2.2 懒图加载

  1. 安装插件:
npm install hexo-lazyload-image --save
  1. 根目录中的 _config.yml 文件中添加如下配置信息:
# 图片懒加载
lazyload:
    enable: true 
    onlypost: true  # 是否只对文章的图片做懒加载
    loadingImg: # eg ./images/loading.gif
  1. 一键部署即可看到效果。

补充:

  1. 一般情况下懒加载会和 gallery 插件会发生冲突,结果可能就是点开图片,左翻右翻都是 loading image。matery 主题的解决方案是:修改 /themes/matery/source/js 中的 matery.js 文件,在大约第108行的位置加上:
$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});
  1. 做完这步之后,还有点小 Bug ,首页的 logo 点击会直接打开 logo 图,而不是跳到首页。伪解决方案是打开 /themes/matery/layout/_partial/header.ejs 文件,在 img 和 span 的两个头加个 div:
<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
        <div>
            <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
            <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
            <% } %>
            <span class="logo-span"><%- config.title %></span>
        </div>
    </a>
</div>

文章作者: SeaYJ
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明来源 SeaYJ !
评论
  目录