首页 > 其他分享 >个人优化 Github Pages 博客网站访问速度记录

个人优化 Github Pages 博客网站访问速度记录

时间:2023-12-17 14:22:10浏览次数:54  
标签:Github 博客 加速 访问速度 params https com Pages

使用 Github Pages 可以方便地搭建自己的静态网站,详细过程参考我的这篇文章。

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

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

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

图片加速

首先参考这篇文章,搭建加速域名。

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

网站图片

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

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

网站图标

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

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

网站图标

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

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

网站 logo

主页头像

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

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

主页头像

加速谷歌字体

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

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

@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的谷歌字体

加速 avatar 头像

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

  # 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 主机为七牛云地址

欢迎来我的博客玩耍

云吱的小站https://haoyep.com/

标签:Github,博客,加速,访问速度,params,https,com,Pages
From: https://www.cnblogs.com/leebri/p/Optimize-GithubPagesblog-access-speed.html

相关文章

  • 网站访问速度优化资源优化-SW
    图片优化:图片通常是网站中占用大量带宽的元素之一。使用工具如ImageOptim、TinyPNG或在线服务,压缩图像文件以减小其大小,同时保持足够的质量。采用适当的图像格式,如WebP,能够提供更高的压缩率而不损失质量。CSS和JavaScript文件合并与压缩:将多个CSS和JavaScript文件合并成单一文件,......
  • 网站访问速度优化资源优化-SW
    HTTP/2和HTTP/3协议:考虑升级到HTTP/2或HTTP/3协议,它们支持多路复用,减少了因多个请求导致的延迟,提高了页面加载速度。DNS优化:使用快速且可靠的DNS服务提供商,以确保域名解析的速度。考虑使用预加载技术,如DNS预加载,以减少域名解析的时间。网站压缩:除了压缩图像外,还可以考虑对网站的......
  • Template Engines for Spring: FreeMarker | Java Server Pages | Thymeleaf | Jade4j
    Besidesthetemplateenginesdescribedsofar,therearequiteafewmoreavailablewhichmaybeused.Let’sreviewsomeofthembriefly.Velocity isanoldertemplateengine,whichisverycomplexbuthasthedisadvantagethatSpringhasdeprecateditsu......
  • 软件测试/人工智能|GitHub怎么用,这篇文章告诉你
    前言作为一个刚刚接触代码的程序员,可能我们会听到一个词GitHub,把代码提交到GitHub上,或者从GitHub上克隆项目到本地,在GitHub上查看某个工具的文档等等,我们不禁要问,GitHub究竟是什么,该怎么用,本文就给各位初学者们介绍什么是GitHub,它能帮我们干什么?什么是GitHubGitHub是一个面向......
  • 使用Github+PicGo+JsDelivr搭建图床
    本文主要记录使用PicGo+Github搭建图床,并使用jsDelivrCDN加速;下载安装PicGo#安装包下载地址https://github.com/Molunerfinn/PicGo/releases#官方文档地址https://picgo.github.io/从github上选择稳定版本进行下载,我这里因为使用的是M1芯片的Mac,故选择的是Pi......
  • 修改推送代码的github账户
    原文地址: https://www.cnblogs.com/zbliao/p/14142234.html一、修改本地一个仓库的用户名和邮箱//查看本目录下仓库的邮箱gitconfiguser.email //查看本目录下仓库的用户名gitconfiguser.name//修改本目录下仓库的邮箱gitconfiguser.email"邮......
  • 使用git工具将本地文件上传到github仓库
    使用git工具将本地文件上传到github仓库一、基本步骤第一步:我们需要先创建一个本地的版本库(其实也就是一个文件夹)。第二步:在命令行中输入gitinit把这个文件夹变成Git可管理的仓库然后通过gitadd.("."表示当前文件夹下所有内容都提交,也可以通过gitaddFileName/FolderName......
  • 开源机器学习版本的Github:Hugging Face
    参考:https://baijiahao.baidu.com/s?id=1776478347325976510https://zhuanlan.zhihu.com/p/535100411 ===============================   ......
  • Github项目徽标
    shields.io上提供了各种漂亮的徽标,支持文字、颜色、图标以及各种动静态数据效果展示使用详解1.各种格式的基本模板URLhttps://img.shields.io/badge/:badgeContentMarkdown![StaticBadge](https://img.shields.io/badge/:badgeContent)rSt..image::htt......
  • GitLab部署vue项目至GitLab Pages流水线配置
    image:node:16.15.0#表示使用有nodejs环境的docker,自己项目用的什么版本这就写什么版本stages:-deploypages:#!!!必须!!!使用pages关键字stage:deployscript:-npminstall-npmrunbuild-rm-rfpublic#删除public目录,开发过......