更新记录

更新记录

2021-01-22

​ 网站访问加速：cdn优化策略（github+jsdelivr）

2022-01-22

​ 调整图片存储策略，引入腾讯云COS构建图床存储服务，构建图片资源访问

hexo-优化-网站访问加速

​ 加速hexo项目访问速度，可采用CDN加速的方式进行，亦或是参考采用多线部署+域名映射的方式进行构建。针对图片资源问题，可借助图床服务构建图片资源存储。

网站访问加速方案

1
2
<1>静态资源CDN缓存:基于github+jsDelivr构建
<2>图片资源存储:可借助腾讯云COS或者其他对象存储构建资源存储

1.CDN引入

​ jsDelivr是一个免费、快速和可信赖的全球CDN加速服务，可基于多种组合方式构建cdn加速，常见的白嫖方案有github/又拍云/等+jsDelivr的组合方式

<1>Github+jsDelivr实现cdn加速

构建说明

<1>新建github仓库用于存储资源数据信息（自定义数据存储）

<2>发布资源版本信息

<3>通过jsDelivr引用资源信息

<4>jsDelivr缓存更新

构建过程参考

<1>github仓库构建

​ 初始化github仓库，上传资源文件信息（自定义分类存储），一般将经常访问的静态资源文件上传即可（注意资源访问路径问题，可以将themes下的资源文件整个打包）

<2>资源版本发布

​ 仓库构建完成并上传资源，完成后发布资源版本

​ 填充发布版本信息，发布版本内容

<3>资源引用信息

通过地址引用资源内容

1
2
# 引用路径规则
https://cdn.jsdelivr.net/gh/github用户名/你github仓库名@发布的版本号/文件路径

​ 例如访问指定路径下的发布的图片信息

​ 仓库初始化完成，但在访问过程出现：Failed to fetch version info for 用户名/仓库名 提示，此外针对一些没有经常更新的仓库也会出现这种情况，多传几次文件、更新发布版本再次尝试即可

hexo项目引用

​ 如果需要在hexo项目中引用自定义的CDN服务，则可通过配置主题配置文件_config,butterfly.yml中的CDN选项，将相关文件进行匹配即可

​ 在项目中配置引用，则可将相关的资源文件上传到指定路径，直接通过url引用即可，例如针对友链的构建，针对一些静态资源文件、json数据发布随后通过cdn访问

<4>jsDelivr缓存更新

​ 代码更新后jsDelivr.net缓存没有即时刷新，则可通过多种方式刷新数据。cdn缓存的缺点在于如果CDN节点上的数据没有及时更新，即使是用户在浏览器通过强制刷新方式刷新缓存也不一定能够及时同步到相应的数据

方式1：主动刷新

  • 将资源文件的访问域名从cdn替换为purge后访问url刷新缓存
1
2
3
4
原:
https://cdn.jsdelivr.net/gh/username/repoName/xxx
刷新缓存:
https://purge.jsdelivr.net/gh/username/repoName/xxx
  • 通过git bash窗口访问
1
curl https://purge.jsdelivr.net/gh/username/repoName@latest/file

方式2：github仓库release版本发布

​ 直接将指定分支的文件发布到相应版本（版本覆盖需删除掉原有的版本重新发布），则可通过url直接访问

​ 对资源进行版本管理，可发布不同版本的分支，在项目中通过url访问指定版本的数据，如果没有指定版本则默认访问最新的资源信息

1
https://cdn.jsdelivr.net/gh/username/repoName@版本号/xxx

方式3：使用工具进行清除

​ 可使用相关清除工具进行批量刷新，此外还可借助github仓库的功能监听github的事件触发，当坚挺到仓库变化或者指定场景自动触发版本发布

<2>jsDelivr API调用

基本访问url说明

  • 如果将“.min”添加到JS/CSS文件中获取到缩小版本（如果不存在则会自动生成）
1
2
https://cdn.jsdelivr.net/gh/username/repoName@版本号/xxx.min.js
https://cdn.jsdelivr.net/gh/username/repoName@版本号/xxx.min.css
  • 以”/“结尾标识获取资源目录
1
https://cdn.jsdelivr.net/gh/username/repoName@版本号/

​ jsDelivr API 访问URL：https://data.jsdelivr.com/v1/[method]/[param]，更多使用参考官方文档：[jsDelivr API 文档参考](https://github.com/jsdelivr/data.jsdelivr.com)

API调用参考示例

<1>查看package版本【List package versions】
npm
/package/npm/[name] name：npm package name
github
/package/gh/[user]/[repo] user：github用户名
repo：github仓库名

访问样例

1
2
3
4
5
6
7
// https://data.jsdelivr.com/v1/package/gh/github用户名/仓库名
{
  "tags": [],
  "versions": [
  	"1.0"
  ]
}
<2>查看package文件【List package files】
npm
/package/npm/[name]@[version]/[structure]? name：npm package name
version：版本号
structure：tree(默认)/flat
github
/package/gh/[user]/[repo] user：github用户名
repo：github仓库名
version：版本号
structure：tree(默认)/flat

访问样例

1
2
3
4
5
6
7
8
9
10
11
12
// https://data.jsdelivr.com/v1/package/gh/github用户名/仓库名@版本号/falt?
{
    "default": null,
    "files": [
        {
            "name": "",
            "hash": "",
            "time": "1985-10-26T08:15:00.000Z",
            "size": 1531185
        }
    ]
}
<3>【Resolve a version range/tag】
npm
/package/resolve/npm/[name]@[range] name：npm package name
range：任意有效的版本范围
github
/package/resolve/gh/[user]/[repo]@[range] user：github用户名
repo：github仓库名
range：任意有效的版本范围 
1
2
3
4
5
https://data.jsdelivr.com/v1/package/resolve/npm/jquery@3
// =>
{
    "version": "3.2.1"
}
<4>获取package入口【Get package entry points】
npm
/package/npm/[name]@[version]/entrypoints name：npm package name
version：版本号 
1
2
3
4
5
6
7
8
9
10
11
// https://data.jsdelivr.com/v1/package/npm/bootstrap@5.1.0/entrypoints
{
    "js": {
        "file": "/dist/js/bootstrap.min.js",
        "guessed": false
    },
    "css": {
        "file": "/dist/css/bootstrap.min.css",
        "guessed": false
    }
}
<5>【Get package usage stats】
npm /package/npm/[name]/stats/[groupBy]?/[period]?
name：npm package name
groupBy：version(默认)/date
period：day/week/month(默认)/year
github /package/gh/[user]/[repo]/stats/[groupBy]?/[period]?
user：github用户名
repo：github仓库名
groupBy：version(默认)/date
period：day/week/month(默认)/year 
1
// https://data.jsdelivr.com/v1/package/npm/jquery/stats
<6>包版本使用统计【Get package version usage stats】
npm /package/npm/[name]@[version]/stats/[groupBy]?/[period]?
name：npm package name
version：版本号
groupBy：version(默认)/date
period：day/week/month(默认)/year
github /package/gh/[user]/[repo]@[version]/stats/[groupBy]?/[period]?
user：github用户名
repo：github仓库名
version：版本号
groupBy：version(默认)/date
period：day/week/month(默认)/year 
1
// https://data.jsdelivr.com/v1/package/npm/jquery@3.2.1/stats
npm
/stats/packages/[period]? period：day/week/month(默认)/year 
1
2
3
4
5
6
7
8
9
// https://data.jsdelivr.com/v1/stats/packages
[
    {
        "type": "gh",
        "name": "prebid/currency-file",
        "hits": 18279247858,
        "bandwidth": 29143064332754
    }
]
<8>徽章创建

为项目创建徽章【Get a badge for your project】

npm /package/npm/[name]/badge/[period]?
name：npm package name
period：day/week/month(默认)/year
github /package/gh/[user]/[repo]/badge/[period]?
user：github用户名
repo：github仓库名
period：day/week/month(默认)/year 
1
// https://data.jsdelivr.com/v1/package/npm/jquery/badge

1
// https://data.jsdelivr.com/v1/package/npm/jquery/badge?style=rounded

为项目创建等级徽章【Get a rank badge for your project】

npm /package/npm/[name]/badge/rank/[period]?
name：npm package name
period：day/week/month(默认)/year
github /package/gh/[user]/[repo]/badge/rank/[period]?
user：github用户名
repo：github仓库名
period：day/week/month(默认)/year 
1
// https://data.jsdelivr.com/v1/package/npm/jquery/badge/rank

1
// https://data.jsdelivr.com/v1/package/npm/jquery/badge?style=rounded

<9>Get a CDN link/metadata from file hash

1
2
3
4
5
6
7
8
9
10
/lookup/hash/:hash
 - hash: hex-encoded sha256 of file contents

https://data.jsdelivr.com/v1/lookup/hash/87083882cc6015984eb0411a99d3981817f5dc5c90ba24f0940420c5548d82de
{
  "type": "npm",
  "name": "jquery",
  "version": "3.2.1",
  "file": "/dist/jquery.min.js"
}

2.多线部署

<1>基于腾讯云COS对象存储部署

🔖构建参考

​ 以腾讯云对象存储为参考，简述基于腾讯云COS对象存储部署HEXO项目

构建步骤说明

<1>腾讯云账号开通COS服务

<2>hexo项目引入qcloud cos插件

<3>bucket&自定义域名配置

1>腾讯云账号开通COS服务

​ 可参考官方文档进行构建：https://cloud.tencent.com/act/event/cos-novice

​ 账号注册、实名认证完成，则开通COS服务，在腾讯云控制台获取所需的配置参数：

名称 描述 对应位置
APPID 开发者访问 COS 服务时拥有的用户维度唯一资源标识，用以标识资源 在头像处->【账号信息】->【基本信息】中查看
SecretId 开发者拥有的项目身份识别 ID，用以身份认证 在头像处->【访问管理】->【用户列表】->查看指定用户的API秘钥
SecretKey 开发者拥有的项目身份密钥 在头像处->【访问管理】->【用户列表】->查看指定用户的API秘钥
Bucket COS 中用于存储数据的容器名称 创建自定义bucket并指定
Region Bucket所在的地域信息。 参考腾讯云可用地域和访问域名代码

用户创建参考

（可创建一个新的用户用于COS访问，以限制资源权限的使用）

​ 在头像处->【访问管理】->【新建用户】->【自定义创建】，配置相应的访问权限和参数信息

​ 输入用户信息，设定访问方式为“编程访问”，点击下一步随后勾选“QcloudCOSFullAccess”策略

​ 确认无误则点击完成，查看构建的SecretId和SecretKey即可（则可用此用户访问COS服务）

bucket创建的两种方式

<1>使用腾讯云控制台手动创建bucket（控制台创建的存储桶名称格式为<bucket>-<appid>格式，如bucketName-xxxxxxx）

<2>将bucket名称写入hexo项目主配置文件_config.yml随后执行部署指令自动检测部署

对象存储COS控制台，创建存储桶，访问权限勾选公有（自定义文件夹分类存储）

​ 【基础配置】->【静态网站】->配置索引文档为index.html（可上传一个index.html测试文件，随后通过访问节点测试配置是否可以正常访问）

​ 例如hexo部署目录为/blog，则可将生成的public/blog文件夹上传到指定的bucket，随后通过【访问节点】/blog则可访问到对应的博客信息

2>hexo项目引入qcloud cos插件

加载qcloud cos插件

1
npm install hexo-deployer-qcloud-cos --save

在主配置文件_config.yml文件中加载参数配置

1
2
3
4
5
6
7
8
deploy:
    type: qcloud-cos
    cosRegion: <cos bucket所在区域代码>
    cosSecretId: <cos accessKeyId>
    cosSecretKey: <cos accessKeySecret>
    cosBucket: <cos bucket名称>
    cosAppid:  <腾讯云账户appid>
    remotePath: <部署的目录,默认为根目录,默认无需设置>

部署

1
hexo d
3>bucket&自定义域名配置

​ 对象存储管理：用于部署静态网站的bucket访问权限必须设为public-read 否则即使设置对象文件权限为公开，仍将会导致COS静态网站的索引文档功能失效

​ 选择对应的bucket

​ 静态网站栏目，开启静态网站，索引文档设置为index.html

​ 【域名管理】->【设置自定义源站域名】，随后在【域名管理】处配置域名解析

<2>基于Gitee、Github部署

构建步骤说明

<1>Gitee环境注册，创建项目、构建仓库信息

<2>个人设置进行公钥配置（本地环境生成公钥）

<3>修改主配置文件，构建hexo多线发布部署

<4>Gitee/GitHub Pages服务开启

<5>DNSPod域名多线路解析

🔖构建参考

1>Gitee注册、配置、项目创建

​ 注册Gitee环境，创建项目，构建仓库信息（可新建仓库或者从其他的代码仓库中引入仓库信息）

2>公钥配置

​ 公钥配置（SSH公钥配置与GitHub Pages配置类似），在Gitee中【个人设置】-【SSH公钥】-【新增公钥】（将本地生成的公钥信息添加进去，一般路径在C:\Users\用户名.ssh 目录下的 id_rsa.pub 文件中）

3>hexo项目部署

hexo博客项目中配置主配置文件_config.yml,配置多个发布仓库信息

1
2
3
4
5
deploy:
  type: git
  repository: 
    github: github repo ssh url  # gh-pages分支
    Gitee: Gitee repo ssh url    # master分支

hexo 发布

1
2
# hexo发布部署
hexo deploy

CNAME文件

​ 将CNAME文件放置在项目目录/source文件夹下，避免每次部署发布更新覆盖掉原有的配置，CNAME中配置相应的域名信息。

​ 针对github pages，使用github.io域名有两种形式，一种是直接在[userName].github.io仓库下直接发布，另一种则是基于子仓库概念，构建一个新的仓库存储内容，挂载到[userName].github.io域名下。需要注意的是如果是需要一个域名供多个仓库使用的场景，则只需要配置[userName].github.io仓库即可自动进行解析，其余的子仓库会联动依赖

​ 针对gitee pages部署概念类似

4>开启Gitee Pages服务

​ 需实名认证通过后方可启用，在指定发布仓库中，点击服务选项卡->Gitee Pages开启服务

​ 与github pages部署类型，选择部署分支和目录内容，勾选强制使用HTTPS，更新配置，一般待一段时间后则可通过[用户名].gitee.io/[repoName]访问到对应的静态资源文件信息

5>DNSPod域名多线路解析

​ 申请域名并备案，使用DNSPod进行DNS解析，构建记录。针对指定域名，可添加解析记录，如下所示

主机记录 记录类型 线路类型 记录值
blog CNAME 境外 [userName].github.io
blog CNAME 境内 gitee.gitee.io

​ 访问则可通过blog.[域名]/发布路径 进行访问，或者可结合不同的线路类型进行分线路解析，此处只是简单划分境内、境外概念分别指向gitee、github，可进一步按照运营商、搜索引擎、自定义线路、分组等概念进行调整，构建最适配的方案

SSL证书申请、HTTPS开启

​ 在DNSPOD控制台界面，域名管理中选择相应的二级域名，点击SSL证书，选择免费申请，申请过程跟踪可在腾讯云控制台【SSL证书】中查看（大概等待十分钟左右申请通过），随后则查看证书详情并执行下载、部署操作

​ 开启github pages、gitee pages中的https配置

​ 问题说明：通过上述步骤申请了SSL证书，但在多线部署的时候，相应SSL解析异常，目前Gitee Pages Pro服务才提供了HTTPS解析访问配置服务（但个人版由于业务调整暂时没有开放，此前开放的不受到影响），因此在github pages、gitee pages双线部署的时候导致国内线路解析失效。可通过DNSPOD或者证书监控SSLPOD查看监控报告信息，从而相应调整配置

3.对象存储COS

<1>图片资源存储

图床参考

<1>路过图床（免费，但每日上传资源有限制）

<2>微博图床（MAC结合IPIC使用，但存在不可预知原因可能会挂掉）

<3>第三方云服务提供的对象存储（阿里云、腾讯云、又拍云、七牛云、SM.MS）

🔖基于腾讯云COS对象存储图床构建

​ 对象存储COS控制台，创建存储桶，访问权限勾选公有（自定义文件夹分类存储）

1>文件上传、引用

​ 可在腾讯云控制台中自定义管理图片信息，或者使用图片上传工具上传图片信息，随后则可通过url引用图片信息

2>COS可视化界面

​ 可下载官方提供的COSBrowser-对象存储COS可视化界面工具进行管理

​ 或者借助其他图床工具快速完成图片的上传，例如PicGo，配置腾讯云COS配置

名称 描述 描述
SecretId 开发者拥有的项目身份识别 ID，用以身份认证 在头像处->【访问管理】->【用户列表】->查看指定用户的API秘钥
SecretKey 开发者拥有的项目身份密钥 在头像处->【访问管理】->【用户列表】->查看指定用户的API秘钥
APPID 开发者访问 COS 服务时拥有的用户维度唯一资源标识，用以标识资源 在头像处->【账号信息】->【基本信息】中查看
存储空间名 COS 中用于存储数据的容器名称 创建自定义bucket并指定
存储区域 Bucket所在的地域信息。 参考腾讯云可用地域和访问域名代码
指定存储路径 对应存储Bucket下分类文件夹构建 文件分类调整会相应引起url变动，如果场景需要则需注意url引用问题（文件夹路径则末尾需要以’/‘结尾）
自定义域名
3>常见PicGo数据存储问题

​ 文件上传问题可通过日志文件进行跟踪，window默认在C:\Users[用户名]\AppData\Roaming\picgo下picgo.log（可参考文档picgo-docs），相应的配置文件为data.json。或者可通过PicGo设置快速定位配置文件位置，以及修改配置信息

服务代理问题：RequestError:Error：Invalid protocol：127.0.0.1

​ 注意服务代理问题：如果配置了代理则可通过配置指定代理服务和其他地址信息，代理服务地址为127.0.0.1:[port]，端口号可通过相应代理软件设置中进行关联

StatusCodeError: 403 - "You do not have permission to get URL '/...路径../xxx.png' from this server."

​ 检查PicGo中腾讯云相关配置是否正常，需要注意腾讯云COS配置、默认图床设定、上传测试等内容，一一排查是否存在设置问题，排查是否存在自定义域名设置的ip黑名单和防盗链设定问题

​ 随后在调试的时候发现配置完成可正常访问腾讯云存储桶的相册信息，但是在上传的时候却提示相应的错误，随后排查问题发现是设定的COS版本有误（PicGo中的V5、V4的使用的SDK版本需对照存储桶进行设定）导致

​ 新建的bucket默认开启XML控制台权限（V5）版本（未开启V4控制台权限），因此通过控制台访问存储桶查看概览可看到V5的访问域名设定，不同版本的区域简称相关配置有所不同，需对照处理

1
2
V4 域名形如：examplebucket-1250000000.cossh.myqcloud.com
V5 域名形如：examplebucket-1250000000.cos.ap-shanghai.myqcloud.com

🔖其他图床

​ 常用的图床还可借助gitee、github、SM.MS等进行构建，结合实际项目需求并借助第三方工具进行调整即可

4.插件

​ 引入网站资源加载优化相关插件，例如hexo-offline-popup，该插件基于停止维护已久的hexo-service-worker插件进行改造，用于加速Hexo网站的加载速度，以及网站内容更新弹窗提示。

构建说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 1.引入插件
npm i hexo-offline-popup --save

# 2.配置主配置文件_config.yml
# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: true

# 如果是有CDN资源，则添加下述配置
service_worker:
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.some.com
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.some-else.org
  
# 3.hexo三连激活项目