使用又拍云加速你的静态网站

本文参加又拍云原创技术征文活动 地址一 地址二

0. 从静态托管的jekyll静态网站说起

目前很多网站都提供了jekyll网站的托管服务,比如最知名的 GitHub,还有 GitLab,以及国内的 腾讯云 - Coding开源中国 - 码云gitee 都可以部署jekyll静态网站。

相比之下国外的GitHub服务比较稳定,GitLab我很少用不太了解,但是访问速度就很慢了。国内的码云和Coding目前来看也是越来越稳定的,但是仍然有时候访问比较慢。

由于GitHub本身访问比较慢,所以我把代码仓库建在了Coding上,使用Coding的静态网站托管服务。

16-12-48-截屏2020-05-16下午12.46.54-g0YrF8

16-12-48-截屏2020-05-16下午12.47.12-zUmXVP

设置好之后每次push代码就会部署

16-12-48-截屏2020-05-16下午12.47.34-mGrrxm

1. 静态资源的处理——uPic

代码仓库本身不适合存储大文件,而且在写文章的时候,也不太好管理图片,试想一下一篇文章中有大量的截图,需要手动把图片放到指定的文件夹,再把文件的地址拼接好,那也太慢了。

而且图片资源push到GitHub或者Coding上,或者从GitHub或者Coding上的静态网站加载,那都是很慢的。

所以我推荐使用 uPic 来上传图片文件,uPic(upload Picture) 是一款 Mac 端的图床(文件)上传客户端。

💡 特点: 无论是本地文件、或者屏幕截图都可自动上传,菜单栏显示实时上传进度。上传完成后文件链接自动复制到剪切板,让你无论是在写博客、灌水聊天都能快速插入图片。 连接格式可以是普通 URL、HTML 或者 Markdown,仍由你掌控。

🔋 支持图床: smms又拍云 USS七牛云 KODO阿里云 OSS腾讯云 COS百度云 BOS微博GithubGiteeAmazon S3Imgur自定义上传接口、…

🚀 如何安装

1.Homebrew(推荐):
brew cask install upic
2.手动

Github release 下载。

如果在国内访问 Github 下载困难的,可以从Gitee release下载。

📂 检查 Finder 扩展权限

  • 1.打开 uPic

  • 2.打开系统偏好设置 - 扩展 - 访达扩展 确保 uPicFinderExtension是勾选状态

    img

🕹 使用方式

功能描述预览
🖥 选择文件上传Finder选择文件上传。可设置全局快捷键16-12-56-oz1R9w-YVYrwk
⌨️ 复制文件上传上传已拷贝到剪切板的文件。可设置全局快捷键16-12-56-li6rwd-fpcp6w
📸 截图上传直接拉框截图上传。可设置全局快捷键16-12-57-rjrfno-QePiPw
🖱 拖拽本地文件上传拖拽文件到状态栏上传16-12-57-KZdZIh-6DSpYG
🖱 拖拽浏览器图片上传从浏览器拖拽图片到状态栏上传16-12-57-mcK1XR-EG6e7M
📂 Finder 中右键上传右击文件上传16-12-57-yVDy8C-06otTH
⌨️ 命令行上传通过执行命令调用 uPic 上传文件16-12-57-Absy9T-qsQiBj

又拍云配置

📝 又拍云配置项说明

这个静态资源使用的是又拍云的云存储 USS 服务

  • 空间名称: 对象储存空间名称,可在又拍云控制台查看。
  • 操作员: 当前空间授权过的操作员。
  • 操作员密码: 对应的操作员密码。
  • 域名: 使用又拍云默认提供的测试域名或者你的自定义域名。测试域名可在控制台查看。域名需以http://或者https://开头
  • 保存路径: 文件储存的路径(包括文件夹)。 支持 {year} {month} {day} {hour} {minute} {second} {since_second} {since_millisecond} {random} {filename} {.suffix} 等变量。比如:上传的图片为 uPic.jpg,设定为 “uPic/{filename}{.suffix}”,则会保存到 “uPic/uPic.jpg”。
  • 保存路径输入框后面的是网址后缀: 用于自定义图片处理。在又拍云对象储存中可以配置图片处理-自定义版本。例如:规则名称为w的规则来标识水印版本,分隔符为!,则可以在网址后缀中填写!w。之后每次上传的图片生成连接后面都会追加上-w,即表示访问水印版本。

🧰 空间名称、域名信息获取

进入 云存储 控制台查看 又拍云控制台

🔑 操作人员配置

操作人员配置

3. 全站加速

下面来解决Coding时不时访问不了的问题。

全站加速使用的是又拍云的云分发 CDN 服务

1.在又拍云的控制台中创建一个新的 CDN 服务。

  • 服务名称:随便填
  • 加速域名:最终访问的网址
  • 应用场景:全站加速
  • 源站设置:coding托管的网址,可以用自己的域名
  • 加速区域:可以选全球加速或者是国内加速

16-13-17-截屏2020-05-16下午1.16.18-TZf3rY

2.配置CNAME

16-13-21-截屏2020-05-16下午1.16.28-pyxHs4

3.配置回源host

这个地方可能是需要又拍云提升的部分吧,前面其实已经填写了源站域名,但是没有生效,必须要从这里再次填写

16-13-21-截屏2020-05-16下午1.17.16-HquEZz

4. 又拍云的细节配置

针对CDN

设置缓存规则

缓存规则可以设置成首页 1小时,目录页 1天,当然你也可以自己去设定合适的缓存规则。

16-13-25-截屏2020-05-16下午1.23.55-NHbTj3

云存储和CDN

设置HTTPS,开启 TLS1.3、HTTP/2

又拍云可以免费申请域名证书。

16-13-26-截屏2020-05-16下午1.24.35-TlTgnk

设置WebP自适应

16-13-28-截屏2020-05-16下午1.24.58-zMxFmh

5. 又拍云联盟

拍云推出的开发者帮助计划:为开发者提供专业、免费、稳定的 CDN 及云存储服务,加速个人网站及 APP 等项目

又拍云联盟用户每月独享优惠:加入又拍云联盟,按步骤完成申请即可获得:10GB 免费存储空间 + 15GB 免费 CDN 流量(HTTP/HTTPS 均可用)

审核通过后又拍云联盟将一次性赠送 12 个月的云服务资源,并折算成代金券发放到您的账户,福利次年自动赠送

加入又拍云联盟 —— 地址直达

16-13-33-截屏2020-05-16下午1.32.40-opKpM5

16-13-33-截屏2020-05-16下午1.32.50-Z2W928

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值