Hexo框架(八):双线部署及全站CDN加速

前言:

本篇设置基于NEXT主题7.7.2版本!!

CDN加速我已更新:Hexo 框架 (十八):图片自适应 webp 及全站 CDN 加速

部署到GitHub

这里就不再赘述如何部署到GitHub,如果你还不会,可以参考一下 Hexo 框架 (一):使用 Hexo 快速搭建个人博客

购买域名

购买域名什么的,这里不再赘述,这里假定你已经购买了域名,并且会基本的解析操作。

添加解析记录

添加解析记录

Github Pages 对自定义域上 Https

我们在 Github Pages 项目中 Settings 选项卡 Github Pages 选项:在 Custom domain 添加你的自定义域名。

刷新页面 如果能勾选 Enforce HTTPS 即完成。

自定义域名

部署到coding

GitHub 服务器毕竟是在国外,国内访问的速度比较慢。而 Coding 是国内的一个面向开发者的云端开发平台,这意味着能够大大提升国内的访问速度。

本文简单记录了 Hexo 博客部署到 Coding 的过程。

创建仓库

  • 首先官网注册账号。现在好像不能注册个人版了。你可以点击这里进行注册:Coding

  • 注册完账号之后,请前个人账户的设置页面选择 SSH 公钥将本地生成的 公钥 添加进去。公钥储存位置一般在 C:\Users\用户名\.ssh 目录下的 id_rsa.pub 文件里,用记事本打开复制其内容即可。操作与GitHub类似,你可以参考 Hexo 框架 (一):使用 Hexo 快速搭建个人博客

  • 新建项目

  • 新建项目

  • 然后创建仓库

一个仓库用来存储静态页面,一个用来保存我们的配置文件,做个备份。

部署到 Coding 仓库

现在我们将 public 目录推送到 Coding 上博客仓库的 master 分支。

我们只需要改下站点的配置文件,添加如下代码:

1
2
3
- type: git
repository: https://e.coding.net/XXXXX/XXXXXX.git
branch: master

然后 hexo deploy 即可部署成功。

开启 Coding Pages 服务

静态网站

博客部署完成后,我们在构建与部署> 静态网站中一键开启 Coding Pages 服务。

在浏览器中直接输入他给的域名,查看是否部署成功。

添加自定义域名

首先得有一个自定义域名,然后我们把它绑定到 Coding 上。

我是用的万网域名,直接打开 阿里云控制台

添加解析记录:

添加解析

注意:因为我们要实现国内外访问不同的服务,所以需要分别设置解析,无论是腾讯云还是阿里云的解析服务,都能够很好的区分国内外节点,我们需要将国内的 CNAME 设置到 pages.coding.me,将国外的 CNAME 设置到 pages.github.io

Coding 绑定自定义域名

打开 Coding 的 Pages 服务,进入设置页面,为网站绑定自己的域名。这里他也有说怎么绑定。

image-20200404124317316

注意:一定要选首选的域名,并且非首选域名要勾选跳转至首选域名,不然有些第三方服务数据会统计不到一起。

开启 HTTPS

如果你之前已经部署到了 GitHub Pages 并开启了 HTTPS,那么直接在设置页面绑定你自己的域名,SSL/TLS 安全证书就会显示申请错误。

申请错误原因是:在验证域名所有权时会定位到 Github Pages 的主机上导致 SSL 证书申请失败。

正确的做法是:先去域名 DNS 把 GitHub 的解析暂停掉,然后再重新申请 SSL 证书,大约十秒左右就能申请成功,然后开启强制 HTTPS 访问

配置_config.yml

1
2
3
4
5
6
deploy:
type: git
repo:
coding: https://e.coding.net/XXXX/blog.git
github: https://github.com/XXXXX/XXXXX.github.io.git
branch: master

到此双线部署完成,你每次hexo d 就会自动上传到两个仓库,并自动部署。

全站CDN加速

由于 GitHub Pages 的服务器在国外,国内访问速度可能会非常慢。目前有以下几种解决方案:

  • 博客双线部署在 GitHub Pages 和 Coding Pages 上,其中国内流量解析到 Coding Pages,国外流量解析到 GitHub Pages
    • 优势:无需购买 VPS、速度比较快、不用备案
    • 劣势:Coding Pages 的服务并不是那么稳定,近期出现多次不能正常部署或访问 Pages 的问题
  • 博客部署到国内的 VPS
    • 优势:速度快
    • 劣势:需要购买 VPS、需要备案
  • 博客部署在 GitHub Pages 上并采用 CDN 加速
    • 优势:速度快、无需备案、稳定
    • 劣势:CDN 比较贵

CDN介绍

内容分发网络(Content delivery network 或 Content distribution network,缩写:CDN)是指一种透过互联网互相连接的计算机网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。

简单来说,CDN 就是部署在世界各地的缓存服务器,它们会提前缓存网站上的资源,然后当用户想要访问相关资源时,直接从 CDN 服务器上取就可以了。这样不仅可以增加访问速度减少访问延迟,还可以减缓网站服务器上的压力。

为什么选择 Cloudflare?

国内的 CDN 服务提供商有不少,但是基本都需要备案,因此我转向了 Cloudflare 这个国外的 CDN 服务提供商。

Cloudflare 是全球最大的 DNS 服务提供商之一。除此之外他们还提供 CDN、SSL 证书、DDos 保护等服务,并且 Cloudflare 与百度有合作,在国内也部署有大量的节点,还能顺便解决百度爬无法抓取 GitHub Pages 的问题。

快速开始

  • 首先要去 Cloudflare 注册一个帐号。注意:我们需要的是国际版的 CloudFlare,而不是 CloudFlare 与百度合作的百度云加速

  • 注册好后点击 Add site 添加你的网站个性化域名。

  • 添加好后选择免费的那个计划(Plan),有钱也可以选择收费的,提供的服务更多。

  • 然后点击 Scan DNS Records,等待扫描完成。即使没有扫到 DNS 记录也没有关系,我们可以在后面自己添加:

添加记录

然后 Cloudflare 会要你把你的 DNS 服务器替换成他提供的,我们只需要去域名商那里设置一下即可。CloudFlare 既是一个 CDN 服务商,同样也是一个 DNS 服务商。DNS 修改完成后可以点击 Recheck Nameservers 来复查 NS 记录是否正确设置。

Cloudflare配置详解

Overview 菜单设置

主要关注下面两个快捷设置:

  • under attack mode:当你的网站被攻击的时候打开它,这样可以阻止攻击。
  • development mode:由于 cloudflare 采用了缓存技术,当你更新了网站的内容,不一定能马上在前台看到更新的内容。这个时候你只要打开 development mode 就可以马上看到网站更新的内容。当然,正常情况下还是关掉比较好。

OverView菜单

Analytics 菜单设置

这里主要是看网站使用 cloudflare 之后的一些分析数据,Analytics 下面包含几个子菜单:Traffic、security、Performance、DNS。

  • Traffic 子菜单:主要是网站在过去某一个时间段的请求、带宽、访客情况。
  • Security 子菜单:主要是某一段时间内受到的威胁数据,包括威胁次数、来自哪些国家、威胁的类型等等。
  • Performance 子菜单:付费功能。
  • DNS 子菜单:主要是 DNS 查询的数据。

DNS 菜单设置

在 DNS 菜单里面,你可以随意添加或删除所有 DNS 记录,也可以选择使用或不使用 cloudflare 的 CDN 服务。

注意:只有 A 记录和 CNAME 记录才可以设置使用 CDN 服务,我们只需要点亮 Proxy status 处的云彩小图标即可切换成使用 CDN 的状态。

SSL/TLS 菜单设置

这里面主要是网站加密的设置。

  • SSL 设置:如果你本来的网站有 SSL 证书,这里选择 full 即可,即浏览器到 Cloudflare 和 Cloudflare 到服务器都是加密的。
  • Always Use HTTPS 设置:这个打开,一直使用 https 链接
  • Authenticated Origin Pulls & Opportunistic Encryption & Onion Routing 设置:这些设置都打开
  • Minimum TLS Version 设置:选择 1.1 即可,如果选择太高可能导致网站打不开。

Firewall 菜单设置

Firewall 菜单里面可以对网站安全进一步设置,限制某些 IP 或地区的用户访问等。

  • Events 子菜单:这里面可以查看防火墙的一些小事件,比如屏蔽的一些访问。

  • Managed Rules 子菜单:付费功能。

  • Firewall Rules 子菜单:这里可以设置限制其他人访问你的网站的规则,每个账户只能设置 5 个限制规则。

  • TOOLS 子菜单:这里的功能是 firewall rules 功能的补充,都是对用户访问你的网站的一些设置。

    • IP Access Rules:主要是针对 IP、IP 范围及国家和 ASN 设置一些规则。
    • User Agent Blocking:对用户使用的代理设置规则,比如浏览器类型、CPU、操作系统。
  • Settting 子菜单:

    • Security Level:这个设置 low 即可,如果设置太高,就会过于敏感,导致很多用户受影响。
    • Challenge Passage:这是验证的有效期,可以设置久一点,比如 1 hour
    • Browser Integrity CheckPrivacy Pass Support:全部打开。

Speed 菜单设置

  • Auto Minify:网页最小化处理,把 Javascript, css html 前面都打勾即可。
  • Brotli:这是一种比 gzip 更好的网页压缩方式,打开即可。
  • Rocket Loader:这个需要测试决定是否需要打开,没有固定的答案,你可以打开之后,然后在不同的浏览器上面查看网页的效果,如果出现网页排版等问题,那就将它关闭。

Caching 菜单设置

  • Purge Cache:这个设置是清除缓存,其中:

  • Custom Purge:清除指定页面的缓存,我们可以点击 custom purge, 然后在框里面输入要清除的链接,再点击 purge 即可。

    • Purge Everything:清除整个网站的缓存。
  • Caching Level:缓存水平设置,决定缓存哪些内容,这里选择 standard 即可。

  • Browser Cache TTL:即浏览器缓存过期时间,决定浏览器多久向网站获取一次新缓存。

Page Rules 菜单设置

免费版本可以设置 3 个页面的规则。

------ 本文结束  感谢阅读 ------