Github Pages 博客网站访问速度优化

Github Pages 博客网站访问速度优化

https://cdn.haoyep.com/gh/leegical/Blog_img/cdnimg/202401171452357.png

但由于众所周知的原因,此方法搭建的博客在国内访问速度不佳。因此考虑采用一些方法来加速访问,主要思路是使用 CDN 加速网站的静态资源。

对于不同的静态资源,加速方法分别如下:

  1. 使用自定义域名,见个人 Github 博客设置自定义域名
  2. js/css文件
    • 使用jsdelivrunpkg 进行 CDN 加速​,亲测使用自定义域名后,这两个 CDN 反而会降速。因此不需要单独对js/css文件加速。
  3. 托管在 Github 仓库上的图床图片
  4. 加速谷歌字体
  5. 加速 avatar 头像

1 图片加速

首先参考这篇文章,搭建加速域名。通过 Cloudflare 和 JsDelivr 免费加速博客 GitHub 图床等静态资源 | TCIP的窝窝通过 Cloudflare 和 jsDelivr 免费加速博客 GitHub 图床等静态资源”)

对于要使用的图片,使用 PicGo 上传到 GitHub 图床,获取 CDN 加速链接。然后在配置文件中使用相应的链接即可。下面介绍几个配置中常见的图片。

1.1 网站图片

1``2 # 网站图片,用于 Open Graph 和 Twitter Cards`` images = ["https://cdn.haoyep.com/gh/leegical/Blog_img/cdnimg/weblogo.png"]

网站图片,用于 Open Graph 和 Twitter Cards

1.2 网站图标

配置:[params]——[params.app]

1``2``3``4``5``6``7``8 # 应用图标配置`` [params.app]`` # 当添加到 iOS 主屏幕或者 Android 启动器时的标题,覆盖默认标题`` title = "Leehow"`` # 是否隐藏网站图标资源链接`` noFavicon = false`` # 更现代的 SVG 网站图标,可替代旧的 .png 和 .ico 文件`` svgFavicon = "https://cdn.haoyep.com/gh/leegical/Blog_img/favicon.svg"

网站图标

配置:[params]——[params.header]——[params.header.title]

1``2``3``4 # 页面头部导航栏标题配置`` [params.header.title]`` # LOGO 的 URL`` logo = "https://cdn.haoyep.com/gh/leegical/Blog_img/cdnimg/weblogo.png"

网站 logo

1.4 主页头像

配置:[params]——[params.home]——[params.home.profile]

1``2``3``4``5``6``7 # 主页个人信息`` [params.home.profile]`` enable = true`` # Gravatar 邮箱,用于优先在主页显示的头像`` gravatarEmail = ""`` # 主页显示头像的 URL`` avatarURL = "https://cdn.haoyep.com/gh/leegical/Blog_img/cdnimg/avatar.png"

主页头像

2 加速谷歌字体

FixIt 主题默认使用系统字体作为博客渲染字体,免去了加载字体。

Fixit主题全局字体

但是想要为一些特定区域,如 code 设置特别字体时,就需要用到谷歌字体。这里选择使用 fonts.loli.net 加速。在 assets/css 中新建 _override.scss 文件,内容如下:

1``2 @import url('https://fonts.loli.net/css?family=JetBrains+Mono:400,700&display=swap&subset=latin-ext');``$code-font-family: JetBrains Mono, Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;

加速code的谷歌字体

3 加速 avatar 头像

hugo.toml 设置 Gravatar 主机为七牛云地址 dn-qiniu-avatar.qbox.me

1``2``3``4``5``6``7 # FixIt 0.2.14 | NEW Gravatar 设置`` [params.gravatar]`` # 取决于作者邮箱,作者邮箱未设置则使用本地头像`` enable = true`` # Gravatar 主机,默认:“www.gravatar.com”`` host = "dn-qiniu-avatar.qbox.me" # ["cn.gravatar.com", "gravatar.loli.net", ...]`` style = "identicon" # ["", "mp", "identicon", "monsterid", "wavatar", "retro", "blank", "robohash"]

设置 Gravatar 主机为七牛云地址