如何利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持

# 如何利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持

![Cloudflare与GitHub Pages整合示意图](https://example.com/cf-gh-pages.jpg)

## 前言

对于使用Hexo静态生成器搭建在GitHub Pages上的博客来说，默认提供的`github.io`域名虽然支持HTTPS，但当使用自定义域名时，GitHub Pages的HTTPS支持存在诸多限制。本文将详细介绍如何通过Cloudflare的免费服务为您的Hexo博客实现全站HTTPS加密，提升安全性和SEO表现。

## 一、为什么需要HTTPS？

### 1.1 安全必要性
- **数据加密**：防止流量劫持和中间人攻击
- **身份验证**：确保访问的是真实服务器
- **SEO优势**：Google等搜索引擎优先排名HTTPS网站
- **现代浏览器要求**：Chrome标记HTTP站点为"不安全"

### 1.2 GitHub Pages的限制
- 自定义域名需手动配置HTTPS
- 不支持通配符证书
- 证书更新周期较长

## 二、准备工作

### 2.1 必要条件
- 已部署的Hexo博客（GitHub Pages托管）
- 注册的顶级域名（如example.com）
- Cloudflare免费账户

### 2.2 域名配置检查
```bash
# 确认DNS解析正常
dig yourdomain.com +short
# 应返回GitHub Pages的IP
185.199.108.153

三、Cloudflare基础配置

3.1 添加站点到Cloudflare

1. 登录Cloudflare仪表盘
2. 点击”添加站点”
3. 输入您的完整域名（如example.com）

3.2 选择免费计划

3.3 修改DNS名称服务器

按照Cloudflare提示，到域名注册商处将NS记录替换为：

lara.ns.cloudflare.com
reed.ns.cloudflare.com

四、DNS记录配置

4.1 添加GitHub Pages记录

类型	名称	内容	TTL	代理状态
A	@	185.199.108.153	Auto	代理
A	@	185.199.109.153	Auto	代理
A	@	185.199.110.153	Auto	代理
A	@	185.199.111.153	Auto	代理
CNAME	www	username.github.io	Auto	代理

4.2 验证DNS传播

nslookup yourdomain.com
# 应返回Cloudflare的IP地址

五、SSL/TLS配置

5.1 加密模式设置

1. 导航到SSL/TLS > 概述
2. 选择”完全（严格）”模式

5.2 证书类型

• 边缘证书：Cloudflare提供的免费证书
• 始终使用HTTPS：开启
• 自动HTTPS重写：开启

5.3 原始服务器配置

在GitHub Pages仓库根目录添加CNAME文件：

yourdomain.com
www.yourdomain.com

六、进阶安全设置

6.1 防火墙规则

{
  "description": "Block malicious bots",
  "expression": "(cf.threat_score gt 10)"
}

6.2 浏览器完整性检查

• 开启”Bot Fight Mode”
• 启用”Under Attack Mode”（可选）

6.3 安全头配置

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN

七、HTTPS性能优化

7.1 HTTP/2和HTTP/3

• 在Network设置中启用HTTP/3
• 开启0-RTT连接恢复

7.2 缓存配置

设置项	推荐值
浏览器缓存TTL	4小时
边缘缓存TTL	1周
缓存级别	标准

7.3 图片优化

• 开启Polish（无损压缩）
• 启用WebP格式自动转换

八、常见问题解决

8.1 混合内容警告

<!-- 强制替换HTTP资源 -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

8.2 证书错误排查

openssl s_client -connect yourdomain.com:443 -servername yourdomain.com | openssl x509 -noout -dates

8.3 GitHub Pages更新延迟

1. 清除Cloudflare缓存
2. 在Hexo部署时添加--force参数

hexo clean && hexo deploy --force

九、监控与维护

9.1 分析流量统计

• 利用Cloudflare Analytics
• 设置自定义警报规则

9.2 定期检查

• 证书有效期监控
• DNS记录验证
• 安全规则更新

十、总结

通过本文的配置，您的Hexo博客将获得： ✅ 全站自动HTTPS加密
✅ 全球CDN加速
✅ 增强的安全防护
✅ 详细的流量分析

Cloudflare的免费套餐已能满足大多数个人博客的需求，如需更高性能，可考虑升级到Pro套餐（$20/月）。

---

附录A：推荐Cloudflare Worker脚本

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // 统一处理所有请求的HTTPS重定向
  const url = new URL(request.url)
  if (url.protocol === 'http:') {
    url.protocol = 'https:'
    return Response.redirect(url.href, 301)
  }
  return fetch(request)
}

附录B：Hexo配置示例

# _config.yml
url: https://yourdomain.com
permalink: :year/:month/:title/

更新日志
2023-08-20 初稿
2023-08-21 添加故障排查章节
”`

注：实际使用时请替换所有示例域名和占位图片链接。本文假设读者已具备基础的Hexo和GitHub使用经验，如需更基础的操作指导，建议补充相关章节。