当初用Hexo来搭建动态站点的人越来越多了,很多人会抉择试用Github Pages服务来部署本人的动态站,但Github Pages国内访问速度切实无奈承受,本文介绍一下如何一键应用阿里云OSS对象存储服务部署Hexo站点,同时解决一个浏览器缓存的坑。
减速计划
- Netlify:与Github配合应用很不便,但国内访问速度不佳,须要搭配国内CDN应用
- Vercel:与Netlify相似,国内访问速度不错,域名没有备案的话是个不错的抉择
- 对象存储:应用阿里云OSS或相似的对象存储服务,国内访问速度不错,也可搭配国内CDN应用,速度最好,但要求你的域名有备案号
- 境内对象存储+境外Vercel/Netlify:我所采纳的计划,应该是最佳的计划了
创立Bucket
首先要做的事件就是去阿里云(https://aliyun.com)创立一个Bucket:
- Bucket名称:轻易起,只有不反复就行
- 地区:按你的需要,阿里云的节点国内访问速度都能够,如果你不打算应用CDN服务的话,能够抉择华东节点,全国访问速度都能兼顾。如果应用CDN服务的话,那就没区别了,选哪都行。
- 存储类型:个别抉择规范存储就能够了,当然如果访问量很小的话,抉择低频拜访存储也能够,能够省一点钱。
- 同城冗余存储:不须要
- 版本控制:不须要
- 读写权限:这里要留神,咱们抉择公共读,切记不能抉择公有,一方面如果不开启CDN的话,公有权限无奈在公网拜访。另一方面,如果开启CDN,阿里云的CDN公有回源性能与OSS的动态页面性能抵触(别问我是怎么晓得的,都是坑)
- 服务端加密形式:无
- 实时日志查问:看需要,有收费7天的实时日志查问,但有900GB/天的限度
- 定时备份:不开明
开启动态页面性能
进入Bucket的配置页面,抉择“根底设置-动态页面”:
依照图中的内容进行配置:
- 默认首页:index.html
- 默认404页:404.html(依照你理论的404页面地址填写)
- 子目录首页:开明,这里因为Hexo的分类、标签等页面,都是子目录的模式(例如:/tags/),如果不开明这个性能,不会主动定位到对应目录的index.html
- 文件404规定:Index
创立AccessKey并受权
其实当初就能够在阿里云的治理页面上传文件部署网站了,但切实是太麻烦,咱们心愿的是一个自动化的计划。这里咱们须要创立一个API的受权AccessKey:
阿里云当初开启了子账户受权的性能,因而咱们能够抉择跳转到子账户治理的页面:
首先创立一个子账户:
这里留神,因为咱们这个账户是给API应用的,所以必须开启编程拜访权限:
返回当前,点击刚创立的账户右侧的“增加权限”:
这里搜寻“OSS”,抉择增加AliyunOSSFullAccess
权限:
返回列表,点击刚创立的账户名称,创立一个AccessKey,这里要留神,创立完AccessKey后,会显示一个AccessKey和一个SecretKey,肯定要保留好,只会显示一次:
装置一键部署脚本
我编写了一个能够一键部署Hexo到阿里云OSS的hexo插件,并反对配置浏览器缓存HTTP响应头。
源码地址:https://github.com/huzhanfei/hexo-deployer-ali-oss-extend
应用很简略,在hexo我的项目下执行装置命令:
npm i hexo-deployer-ali-oss-extend
在hexo我的项目配置文件_config.yml
中增加如下配置:
deploy:
- type: ali-oss
region: "<您的oss 区域代码>"
accessKeyId: "<您的oss accessKeyId>"
accessKeySecret: "<您的oss accessKeySecret>"
bucket: "<您的bucket name>"
cacheControl:
images: "<图片文件HTTP响应头Cache-Control>,留空为no-cache"
css: "<CSS文件HTTP响应头Cache-Control>,留空为no-cache"
js: "<JS文件HTTP响应头Cache-Control>,留空为no-cache"
html: "<HTML文件HTTP响应头Cache-Control>,留空为no-cache"
other: "<其它文件HTTP响应头Cache-Control>,留空为no-cache"
其中区域代码,能够在OSS的Bucket概览当中找到,如下图所示:
另外,这里减少Cache-Control性能,是因为OSS对象存储并没有针对常见的网页文件(如css、js、图片等)进行默认HTTP响应头的设置,这些不常更新的文件不缓存,会导致流量大量节约,前面如果应用CDN的时候,CDN获取不到缓存配置也会进行一直的回源,产生回源流量节约。
配置就这么简略,而后执行部署命令:
hexo d
即可将我的项目部署到OSS中,默认状况下将文件上传到bucket的根目录下,如果须要部署到其余目录,请在deploy下增加remotePath选项进行指定
remotePath: "<您要部署的目录>"
当然,如果你应用了GitHub的Actions性能,能够配置主动执行hexo d,提交源码的时候主动执行部署脚本,几乎不要太不便,具体配置形式不是本文探讨的重点内容,可自行钻研。
配置自定义域名
其实做到这一步,就曾经能够拜访你的网站了,能够在Bucket概览页面找到你的拜访域名,当然咱们大概率须要应用本人的域名拜访,如果你的域名曾经进行了备案,能够增加自定义域名。
能够在“传输治理-域名治理”中配置域名:
点击“绑定域名”,在如图所示的内容中填入本人的域名,如果你的域名解析服务器是阿里云的话,能够点击“主动增加CNAME记录”疾速设置域名解析:
如果你的域名不在阿里云解析的话,请依据页面提醒手动设置域名解析。
后话
到此,就能够通过你的域名拜访站点了,你也能够上传SSL证书以开启HTTPS拜访。
当然,如果你有更高的要求,也能够抉择更多的优化:
- 开启CDN服务:开启CDN服务后,相当于在全国多地部署你了的镜像站,以获取更快的访问速度,同时能够通过CDN服务开启图片压缩、页面优化等等性能
- 分区域解析:设置DNS解析将国内解析到阿里云OSS或CDN,国外解析到Netlify、Vercel甚至间接解析到GitHub Pages服务
自建博客地址:https://bytelife.net,欢送拜访! 本文为博客同步发表文章,为了更好的浏览体验,建议您移步至我的博客????
本文作者: Jeffrey
本文链接: https://bytelife.net/articles/52761.html
版权申明: 本博客所有文章除特地申明外,均采纳 BY-NC-SA 许可协定。转载请注明出处!
发表回复