hexo-优化-网站访问加速

453 阅读6分钟

「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战

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

基于腾讯云COS对象存储部署HEXO项目

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

构建步骤说明

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

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

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

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

可参考官方文档进行构建:cloud.tencent.com/act/event/c…

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

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

用户创建参考

(可创建一个新的用户用于COS访问,以限制资源权限的使用)

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

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

image-20220205230432639.png

确认无误则点击完成,查看构建的SecretId和SecretKey即可(则可用此用户访问COS服务)

bucket创建的两种方式

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

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

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

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

加载qcloud cos插件

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

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

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

部署

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

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

选择对应的bucket

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

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

多线部署

构建步骤说明

<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,配置多个发布仓库信息

deploy:
  type: git
  repository: 
    github: github repo ssh url  # gh-pages分支
    Gitee: Gitee repo ssh url    # master分支

hexo 发布

# 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开启服务

image-20220205115123768.png

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

<5>DNSPod域名多线路解析

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

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

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

图片资源存储

图床参考

<1>路过图床(免费,但每日上传资源有限制)

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

<3>第三方云服务提供的对象存储(阿里云、腾讯云、又拍云、七牛云)

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

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

文件上传、引用

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

image-20220205233748027.png


COS可视化界面

可下载COSBrowser-对象存储COS可视化界面工具进行管理

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

image-20220205234105609.png