<?xml version="1.0" encoding="utf-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><title>毅轩の博客</title><link>https://blog.3v4.top/</link><description>Yixn Blog Me Like Lcl</description><item><title>无聊死了</title><link>https://blog.3v4.top/?id=28</link><description>&lt;p&gt;无聊死了。&lt;/p&gt;</description><pubDate>Sun, 11 Oct 2026 12:02:48 +0800</pubDate></item><item><title>Yixn Html部署系统</title><link>https://blog.3v4.top/?id=27</link><description>&lt;p&gt;&lt;a href=&quot;https://h.3v4.top/&quot; _src=&quot;https://h.3v4.top/&quot;&gt;https://h.3v4.top/&lt;/a&gt; &lt;/p&gt;&lt;p&gt;这是我写的一个HTML部署系统，完全免费，是个匿名的&lt;/p&gt;&lt;p&gt;但不能上传zip，为了安全嘛&lt;/p&gt;&lt;p&gt;我怕里面藏什么炸弹或者是php的&lt;/p&gt;&lt;p&gt;所以呢，只能上传html/htm&lt;/p&gt;&lt;p&gt;静态文件&lt;/p&gt;&lt;p&gt;我可能让你们失望了&lt;/p&gt;&lt;p&gt;当然的是安全呀&lt;/p&gt;</description><pubDate>Sat, 26 Sep 2026 11:09:40 +0800</pubDate></item><item><title>我只喜欢一个人永远</title><link>https://blog.3v4.top/?id=25</link><description>&lt;p&gt;她是？&lt;/p&gt;&lt;p&gt;Luo Chenlu&lt;/p&gt;&lt;p&gt;&amp;quot;I like Luo &amp;#39;Chenluo forever, for a lifetime&amp;quot;&lt;br/&gt;&lt;/p&gt;&lt;p&gt;🥰.&lt;/p&gt;</description><pubDate>Fri, 18 Sep 2026 07:21:50 +0800</pubDate></item><item><title>new-api | AI模型聚合管理中转分发系统</title><link>https://blog.3v4.top/?id=24</link><description>&lt;h2 style=&quot;max-width:480px; margin:0 auto 20px; font-size:20px; color:#1e5aa7; font-family:system-ui,sans-serif; text-align:center;&quot;&gt;AI模型聚合管理中转分发系统&lt;/h2&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 16px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;
    简介
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    AI模型聚合管理中转分发系统，一个应用管理您的所有AI模型，支持将多种大模型转为统一格式调用，支持OpenAI、Claude、Gemini等格式，可供个人或者企业内部管理与分发渠道使用。
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    个人 AI 渠道分发，企业内部 AI 统一入口，多模型 API 聚合服务，AI 副业变现工具，大模型接口代理，私有模型管理平台，多模型兼容网关，AI 接口分发系统，APIKey 统一管理平台
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    new-api,AI 模型聚合，多模型统一管理，大模型 API 中转，OpenAI 格式兼容，AI 接口分发平台，多渠道 AI 调用管理，企业级 AI 网关，自托管 AI 聚合系统
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    部署教程：https://docs.newapi.pro/zh/docs/installation/deployment-methods/docker-compose-installation
&lt;/p&gt;

&lt;div style=&quot;max-width:480px; margin:36px auto 0;&quot;&gt;
    &lt;a href=&quot;https://yixn.lanzouq.com/ilQhM48ugl3i&quot; target=&quot;_blank&quot; style=&quot;display:inline-block; padding:18px 48px; background:rgba(30,90,220,0.75); color:#fff; border:1px solid rgba(255,255,255,0.5); font-size:18px; font-weight:600; text-decoration:none; font-family:system-ui,sans-serif; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(30,90,220,0.4), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,40,140,0.3);&quot;&gt;免费下载&lt;/a&gt;
&lt;/div&gt;</description><pubDate>Thu, 17 Sep 2026 19:02:51 +0800</pubDate></item><item><title>戒了么 v4.2最新版 签到打卡源码</title><link>https://blog.3v4.top/?id=23</link><description>&lt;h2 style=&quot;max-width:480px; margin:0 auto 20px; font-size:20px; color:#1e5aa7; font-family:system-ui,sans-serif; text-align:center;&quot;&gt;戒了么 - 每日戒色签到程序源码&lt;/h2&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 16px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;
    简介
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    戒了么是一个轻量、纯 PHP 的每日戒色签到程序，面向正在自律、挑战欲望的年轻人，无需用户中心，通过本地数据库保存数据 记录每日签到状态
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    功能特性&lt;br&gt;
    每日签到（同一天只能签到一次）&lt;br&gt;
    连续戒色天数统计（断签即清零）&lt;br&gt;
    30 天挑战成就上限&lt;br&gt;
    打卡必须填写备注（防止无意义打卡）&lt;br&gt;
    打卡可上传图片（可选，最大5MB，支持拖拽上传）&lt;br&gt;
    每次签到随机成功标语&lt;br&gt;
    防 XSS 注入（备注 / 用户名双重防护）&lt;br&gt;
    CSRF 安全验证，防止跨站请求伪造&lt;br&gt;
    用户名+密码注册登录，防止冒充&lt;br&gt;
    签到选择戒除目标（12个预设+自定义）&lt;br&gt;
    补签功能（仅限补签昨天，防止刷经验）&lt;br&gt;
    删除/编辑历史记录&lt;br&gt;
    查看全部历史签到日志
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    更新日志 v4.2&lt;br&gt;&lt;br&gt;
    登录加密：用户名+密码注册登录，旧用户首次登录自动设密码。&lt;br&gt;
    安全加固：CSRF Token验证 + 补签限制只能补昨天。&lt;br&gt;
    目标系统：12个预设戒除目标（戒烟/戒酒/戒手机/戒熬夜等）+ 自定义目标。&lt;br&gt;
    好友系统：添加好友/接受拒绝请求/对比双方数据互相监督。&lt;br&gt;
    数据可视化：月度打卡率折线图 + 目标分布饼图（Chart.js）。&lt;br&gt;
    年度热力图：类GitHub 365天打卡热力图。&lt;br&gt;
    更多勋章：9枚成就勋章（初出茅庐/七日之火/半月坚持/自律达人/钢铁意志/月度全勤/百次打卡/高阶自律/自律之王）。&lt;br&gt;
    主题切换：5套配色方案（蓝/绿/紫/橙/暗黑），服务端保存偏好。&lt;br&gt;
    提醒功能：设置每日提醒时间，浏览器通知推送。&lt;br&gt;
    数据导出：一键导出打卡记录为CSV文件。&lt;br&gt;
    成就卡：Canvas生成分享成就图，可保存图片。&lt;br&gt;
    PWA支持：添加到桌面，离线缓存可用。&lt;br&gt;
    删除记录：日志中可删除单条历史记录。
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    安装教程：&lt;br&gt;&lt;br&gt;
    测试环境 PHP7.4    上传源码到更目录&lt;br&gt;&lt;br&gt;
    访问  http://你的域名/init_db.php 进行初始化数据库操作
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:28px auto 8px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;演示图片&lt;/p&gt;

&lt;img src=&quot;https://www.yydsym.com/wp-content/uploads/replace/2026/07/21/8f22e8a4c79931ce571564bfae12e244.png&quot; style=&quot;display:block; max-width:480px; width:100%; margin:0 auto 36px; border-radius:6px; box-shadow:0 6px 18px rgba(30,90,220,0.2);&quot;&gt;

&lt;div style=&quot;max-width:480px; margin:0 auto;&quot;&gt;
    &lt;a href=&quot;https://yixn.lanzouq.com/iAYwq48ugaqf&quot; target=&quot;_blank&quot; style=&quot;display:inline-block; padding:18px 48px; background:rgba(30,90,220,0.75); color:#fff; border:1px solid rgba(255,255,255,0.5); font-size:18px; font-weight:600; text-decoration:none; font-family:system-ui,sans-serif; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(30,90,220,0.4), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,40,140,0.3);&quot;&gt;免费下载&lt;/a&gt;
&lt;/div&gt;</description><pubDate>Thu, 17 Sep 2026 18:55:55 +0800</pubDate></item><item><title>最新更新API管理系统源码 API计费 全开源</title><link>https://blog.3v4.top/?id=22</link><description>&lt;h2 style=&quot;max-width:480px; margin:0 auto 20px; font-size:20px; color:#1e5aa7; font-family:system-ui,sans-serif; text-align:center;&quot;&gt;最新更新API管理系统源码 API计费 全开源&lt;/h2&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 16px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;
    简介
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    测试环境：Nginx+PHP7.4+MySQL5.7&lt;br&gt;
    安装教程：访问域名进行安装
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    更新日志：&lt;br&gt;&lt;br&gt;
    API 置顶功能：后台可一键置顶/取消置顶接口，置顶的 API 在首页列表中优先显示&lt;br&gt;&lt;br&gt;
    – QPS 限速：支持全局和单接口独立限速，防止接口被恶意高频调用
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    安全加固&lt;br&gt;
    – 密码加密升级为 password_hash / password_verify&lt;br&gt;
    – 全站 CSRF Token 防护&lt;br&gt;
    – 后台登录限流，防止暴力po jie&lt;br&gt;
    – 修复 SQL 注入和 XSS 漏洞&lt;br&gt;
    – 添加安全响应头（X-Content-Type-Options、X-Frame-Options 等）
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#333333; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    界面优化&lt;br&gt;
    – 移除 AI 风格浮动动画元素，界面更简洁&lt;br&gt;
    – 统一品牌色调为青色系（#0d9488）&lt;br&gt;
    – 后台管理迁移至 Tabler UI 框架&lt;br&gt;
    – 移动端侧边栏布局适配优化&lt;br&gt;
    – 更换自定义字体（阿里妈妈东方大楷）
&lt;/p&gt;

&lt;div style=&quot;max-width:480px; margin:36px auto 0;&quot;&gt;
    &lt;a href=&quot;https://yixn.lanzouq.com/inHug48ufrej&quot; target=&quot;_blank&quot; style=&quot;display:inline-block; padding:18px 48px; background:rgba(30,90,220,0.75); color:#fff; border:1px solid rgba(255,255,255,0.5); font-size:18px; font-weight:600; text-decoration:none; font-family:system-ui,sans-serif; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(30,90,220,0.4), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,40,140,0.3);&quot;&gt;免费下载&lt;/a&gt;
&lt;/div&gt;</description><pubDate>Thu, 17 Sep 2026 18:49:40 +0800</pubDate></item><item><title>PanSearch – 网盘影视资源搜索聚合工具源码</title><link>https://blog.3v4.top/?id=21</link><description>&lt;h2 style=&quot;max-width:480px; margin:0 auto 20px; font-size:20px; color:#1e5aa7; font-family:system-ui,sans-serif; text-align:center;&quot;&gt;PanSearch – 网盘影视资源搜索聚合工具源码&lt;/h2&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 16px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;
    简介
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    核心功能：&lt;br&gt;
    1. 聚合搜索：集成多个网盘资源搜索引擎，一站式查找影视、软件、资料。&lt;br&gt;
    2. 每日热点：内置科技与新闻热点聚合（Readhub），随时掌握最新动态。&lt;br&gt;
    3. 极简部署：采用 No-Build 模式，源码即运行，无需编译打包，修改立即可见。&lt;br&gt;
    4. 现代化UI：基于 Vue 3 + Naive UI + Tailwind CSS，界面清爽，适配移动端。
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    技术栈：&lt;br&gt;
    – 前端：Vue 3, Vite, Naive UI, Tailwind CSS&lt;br&gt;
    – 后端：Node.js (Express), Http-Proxy-Middleware
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    运行方式：&lt;br&gt;
    – Windows：双击“启动.bat”即可一键运行。&lt;br&gt;
    – Linux/宝塔：上传源码，添加 Node 项目 (npm start) 即可。
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    特点：&lt;br&gt;
    轻量级、开源、易二开、无需数据库（本地配置）。
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:28px auto 8px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;演示图片&lt;/p&gt;

&lt;img src=&quot;https://www.yydsym.com/wp-content/uploads/replace/2026/01/27/e5fffbeb5667b74fd1aff623ab0eb23b.png&quot; style=&quot;display:block; max-width:480px; width:100%; margin:0 auto 36px; border-radius:6px; box-shadow:0 6px 18px rgba(30,90,220,0.2);&quot;&gt;

&lt;div style=&quot;max-width:480px; margin:0 auto;&quot;&gt;
    &lt;a href=&quot;https://yixn.lanzouq.com/i2FgB488eqmd&quot; target=&quot;_blank&quot; style=&quot;display:inline-block; padding:18px 48px; background:rgba(30,90,220,0.75); color:#fff; border:1px solid rgba(255,255,255,0.5); font-size:18px; font-weight:600; text-decoration:none; font-family:system-ui,sans-serif; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(30,90,220,0.4), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,40,140,0.3);&quot;&gt;免费下载&lt;/a&gt;
&lt;/div&gt;</description><pubDate>Sun, 13 Sep 2026 09:05:48 +0800</pubDate></item><item><title>2026最新梦幻防红系统源码/支持抖音圆码</title><link>https://blog.3v4.top/?id=20</link><description>&lt;h2 style=&quot;max-width:480px; margin:0 auto 20px; font-size:20px; color:#1e5aa7; font-family:system-ui,sans-serif; text-align:center;&quot;&gt;2026最新梦幻防红系统源码/支持抖音圆码&lt;/h2&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 16px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; font-weight:600;&quot;&gt;
    简介
&lt;/p&gt;

&lt;p style=&quot;max-width:480px; margin:0 auto 12px; font-size:16px; color:#1e5aa7; font-family:system-ui,sans-serif; line-height:2;&quot;&gt;
    核心特性：&lt;br&gt;&lt;br&gt;
    • 多域名池智能切换，防拦截率99%+&lt;br&gt;
    • 抖音官方API对接，生成真正小程序码&lt;br&gt;
    • 完整API接口，支持第三方集成&lt;br&gt;
    • 实时数据统计，多维度分析报表&lt;br&gt;
    • 积分系统+邀请返利，运营利器
&lt;/p&gt;

&lt;div style=&quot;max-width:480px; margin:36px auto 0;&quot;&gt;
    &lt;a href=&quot;https://yixn.lanzouq.com/itBeY488dw5g&quot; target=&quot;_blank&quot; style=&quot;display:inline-block; padding:18px 48px; background:rgba(30,90,220,0.75); color:#fff; border:1px solid rgba(255,255,255,0.5); font-size:18px; font-weight:600; text-decoration:none; font-family:system-ui,sans-serif; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(30,90,220,0.4), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,40,140,0.3);&quot;&gt;免费下载&lt;/a&gt;
&lt;/div&gt;</description><pubDate>Sun, 13 Sep 2026 08:56:58 +0800</pubDate></item><item><title>SSL证书申请教程(ACMEH5客户端)</title><link>https://blog.3v4.top/?id=19</link><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;纯浏览器申请免费 SSL 证书：ACME-HTML-Web-Browser-Client 完整实操指南&lt;/title&gt;
&lt;style&gt;
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    background: #f0f4f8;
    color: #1e293b;
    line-height: 1.85;
    padding: 2rem 1rem;
  }

  .container {
    max-width: 900px;
    margin: 0 auto;
  }

  .main-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 50px -12px rgba(0, 0, 0, 0.1);
    padding: 3rem 2.8rem;
    border: 1px solid rgba(226, 232, 240, 0.6);
  }

  .header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
  }

  .header h1 {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 0.75rem;
  }

  .header .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    letter-spacing: 0.01em;
  }

  .tag-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
  .tag-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
  .tag-amber { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
  .tag-purple { background: #faf5ff; color: #9333ea; border: 1px solid #e9d5ff; }
  .tag-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

  .highlight-box {
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    padding: 1.6rem 1.8rem;
    margin-bottom: 2.5rem;
  }

  .highlight-box p {
    margin-bottom: 0;
    color: #3730a3;
    font-weight: 500;
    font-size: 0.95rem;
  }

  .highlight-box strong { color: #312e81; }

  /* ===== 醒目按钮区 ===== */
  .cta-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.8rem 0 2.5rem;
  }

  .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.6rem;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    line-height: 1.3;
  }

  .cta-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  }

  .cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  }

  .cta-btn-secondary {
    background: #fff;
    color: #2563eb;
    border: 2px solid #bfdbfe;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .cta-btn-secondary:hover {
    background: #eff6ff;
    transform: translateY(-2px);
  }

  .cta-note {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.6rem;
    width: 100%;
  }

  h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2.8rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.4;
  }

  h2 .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #3b82f6;
    color: #fff;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
  }

  h4 {
    font-size: 0.98rem;
    font-weight: 600;
    color: #334155;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
  }

  p { margin-bottom: 1rem; color: #334155; font-size: 0.95rem; }

  ul, ol { margin: 0.8rem 0 1.2rem 1.5rem; color: #334155; font-size: 0.95rem; }
  li { margin-bottom: 0.45rem; }
  li strong { color: #0f172a; }

  code {
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.86em;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  }

  pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.3rem 1.5rem;
    border-radius: 14px;
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
    border: 1px solid #1e293b;
  }

  pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }

  .table-wrap {
    overflow-x: auto;
    margin: 1.2rem 0 1.8rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; }

  th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    text-align: left;
    padding: 0.9rem 1.1rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }

  td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
  }

  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #fafbfc; }

  .warning-box {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 14px 14px 0;
    padding: 1.2rem 1.5rem;
    margin: 1.4rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .warning-box p { margin-bottom: 0; color: #92400e; font-weight: 500; font-size: 0.92rem; }
  .warning-box strong { color: #b45309; }

  .danger-box {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    border-radius: 0 14px 14px 0;
    padding: 1.2rem 1.5rem;
    margin: 1.4rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .danger-box p { margin-bottom: 0; color: #991b1b; font-weight: 500; font-size: 0.92rem; }
  .danger-box strong { color: #b91c1c; }

  .info-box {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 0 14px 14px 0;
    padding: 1.2rem 1.5rem;
    margin: 1.4rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .info-box p { margin-bottom: 0; color: #1e40af; font-weight: 500; font-size: 0.92rem; }

  .success-box {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    border-radius: 0 14px 14px 0;
    padding: 1.2rem 1.5rem;
    margin: 1.4rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .success-box p { margin-bottom: 0; color: #166534; font-weight: 500; font-size: 0.92rem; }

  .card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.4rem 1.6rem;
    margin: 1.2rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }

  .card p:last-child { margin-bottom: 0; }

  .card-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .step-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 1.7rem;
    margin: 1.5rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .step-card .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
  }

  .step-card h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.15rem; }
  .step-card p:last-child { margin-bottom: 0; }

  .link-list {
    list-style: none;
    margin-left: 0;
    padding: 0;
  }

  .link-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
  }

  .link-list li:last-child { border-bottom: none; }

  .link-list .label {
    font-weight: 600;
    color: #0f172a;
    min-width: 180px;
    flex-shrink: 0;
  }

  .link-list a {
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
    font-size: 0.88rem;
  }

  .link-list a:hover { text-decoration: underline; }

  .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 0.8rem;
    background: #fafbfc;
  }

  .faq-item .q {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }

  .faq-item .a {
    color: #334155;
    font-size: 0.92rem;
    margin-bottom: 0;
  }

  .footer {
    text-align: center;
    padding: 2rem 0 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 2rem;
  }

  @media (max-width: 640px) {
    body { padding: 0.8rem 0.5rem; }
    .main-card { padding: 1.8rem 1.3rem; border-radius: 18px; }
    .header h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; margin-top: 2rem; }
    h2 .icon { width: 28px; height: 28px; font-size: 0.8rem; }
    pre { padding: 1rem; font-size: 0.78rem; }
    th, td { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
    .step-card { padding: 1.2rem 1.2rem; }
    .link-list .label { min-width: auto; }
    .cta-btn { width: 100%; padding: 0.85rem 1.2rem; }
    .cta-btn-primary { font-size: 0.9rem; }
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;main-card&quot;&gt;

      &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;纯浏览器申请免费 SSL 证书：ACME-HTML-Web-Browser-Client 完整实操指南&lt;/h1&gt;
        &lt;div class=&quot;meta&quot;&gt;
          &lt;span class=&quot;tag tag-blue&quot;&gt;SSL 证书&lt;/span&gt;
          &lt;span class=&quot;tag tag-green&quot;&gt;免费&lt;/span&gt;
          &lt;span class=&quot;tag tag-purple&quot;&gt;浏览器端&lt;/span&gt;
          &lt;span class=&quot;tag tag-amber&quot;&gt;零命令行&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;highlight-box&quot;&gt;
        &lt;p&gt;💡 &lt;strong&gt;核心结论：&lt;/strong&gt;不想碰命令行、不想装软件、不想注册账号，就想在浏览器里点几下拿到一张免费 SSL 证书——&lt;strong&gt;ACME-HTML-Web-Browser-Client&lt;/strong&gt; 就是干这个的。它把 ACME 协议的全部流程（申请 → 验证 → 签发 → 下载）封装进一个 HTML 文件，打开网页就能用，申请完直接拿到 PEM 格式的证书和私钥。&lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- ===== 醒目按钮 ===== --&gt;
      &lt;div class=&quot;cta-section&quot;&gt;
        &lt;a class=&quot;cta-btn cta-btn-primary&quot; href=&quot;https://xiangyuecn.github.io/ACME-HTML-Web-Browser-Client/ACME-HTML-Web-Browser-Client.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;
          🚀 点击打开 H5 客户端（GitHub）
        &lt;/a&gt;
        &lt;a class=&quot;cta-btn cta-btn-secondary&quot; href=&quot;https://xiangyuecn.gitee.io/acme-html-web-browser-client/ACME-HTML-Web-Browser-Client.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;
          ⚡ 国内加速（Gitee）
        &lt;/a&gt;
        &lt;p class=&quot;cta-note&quot;&gt;💡 两个地址内容完全一致，国内访问优先用 Gitee 加速版。打开后无需登录、无需注册，直接就能开始申请。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;🔍&lt;/span&gt;这是什么工具&lt;/h2&gt;

      &lt;p&gt;ACME-HTML-Web-Browser-Client 是一个&lt;strong&gt;纯前端 ACME 客户端&lt;/strong&gt;，由开发者 xiangyuecn 开源。它的核心特点很明确：&lt;/p&gt;

      &lt;ul&gt;
        &lt;li&gt;&lt;strong&gt;单一 HTML 文件&lt;/strong&gt;——整个客户端就一个静态 HTML，不依赖任何后端服务。你可以直接右键「另存为」保存到本地，断网都能打开界面。&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;无需注册、无需登录&lt;/strong&gt;——不需要在 Let's Encrypt 或 ZeroSSL 注册账号，打开就能申请。&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;全程手动操作&lt;/strong&gt;——所有步骤在浏览器界面完成，复制粘贴即可，不用敲一行命令。&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;数据安全可控&lt;/strong&gt;——除了你指定的 ACME 接口地址外，客户端不会向其他地址发送数据。打开浏览器开发者工具的网络面板，可以随时审查每一个请求。&lt;/li&gt;
      &lt;/ul&gt;

      &lt;h3&gt;支持的证书颁发机构&lt;/h3&gt;
      &lt;p&gt;Let's Encrypt、ZeroSSL、Google Trust Services，以及任何兼容 ACME 协议的 CA。其中 &lt;strong&gt;Let's Encrypt 最省事&lt;/strong&gt;，不需要额外配置；ZeroSSL 和 Google Trust Services 需要提供 EAB 凭据。&lt;/p&gt;

      &lt;h3&gt;支持的证书类型&lt;/h3&gt;
      &lt;p&gt;RSA（2048 / 3072 / 4096）和 ECC / ECDSA（P-256 / P-384 / P-521），支持多域名和通配符泛域名证书。&lt;/p&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;📋&lt;/span&gt;开始之前：你需要准备什么&lt;/h2&gt;

      &lt;p&gt;在打开工具之前，先确认这几个条件，能避免中途卡住：&lt;/p&gt;

      &lt;ul&gt;
        &lt;li&gt;&lt;strong&gt;域名控制权&lt;/strong&gt;——你拥有要申请证书的域名，并且能修改它的 DNS 解析记录（添加 TXT 记录）。&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;一个邮箱地址&lt;/strong&gt;——用于接收 CA 的通知，比如证书即将过期的提醒。用常用邮箱就行。&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;现代浏览器&lt;/strong&gt;——Chrome 60+、Firefox 55+、Safari 12+、Edge 79+ 都可以。&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;证书用途&lt;/strong&gt;——想清楚证书要部署到哪里（Nginx、Apache、宝塔面板、Caddy 等），方便后续复制粘贴。&lt;/li&gt;
      &lt;/ul&gt;

      &lt;div class=&quot;info-box&quot;&gt;
        &lt;p&gt;📌 &lt;strong&gt;关于备案：&lt;/strong&gt;Let's Encrypt、ZeroSSL 都是国外 CA，申请证书&lt;strong&gt;不需要 ICP 备案&lt;/strong&gt;。域名在哪注册的都行。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;🚀&lt;/span&gt;完整操作步骤&lt;/h2&gt;

      &lt;div class=&quot;step-card&quot;&gt;
        &lt;div class=&quot;step-badge&quot;&gt;1&lt;/div&gt;
        &lt;h3&gt;打开工具，选择证书颁发机构&lt;/h3&gt;
        &lt;p&gt;点击上方按钮打开客户端后，第一步是选择 CA。推荐直接选 &lt;strong&gt;Let's Encrypt&lt;/strong&gt;——使用最广泛、文档最全、不需要额外配置。&lt;/p&gt;
        &lt;p&gt;如果你选 ZeroSSL 或 Google Trust Services，需要提前准备 &lt;strong&gt;EAB 凭据&lt;/strong&gt;（External Account Binding），在对应 CA 的官网申请后填入。对新手来说，直接选 Let's Encrypt 最省心。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;step-card&quot;&gt;
        &lt;div class=&quot;step-badge&quot;&gt;2&lt;/div&gt;
        &lt;h3&gt;填写域名与密钥配置&lt;/h3&gt;
        &lt;p&gt;在「证书配置」区域填写以下信息：&lt;/p&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;strong&gt;域名&lt;/strong&gt;——填写要申请证书的域名。多个域名用逗号或换行分隔。&lt;strong&gt;如果要申请通配符证书&lt;/strong&gt;，建议同时填 &lt;code&gt;*.yourdomain.com&lt;/code&gt; 和 &lt;code&gt;yourdomain.com&lt;/code&gt;，这样主域名和所有子域名都能用同一张证书。&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;证书私钥类型&lt;/strong&gt;——选 RSA 或 ECC。现代网站推荐 &lt;strong&gt;ECC（P-256）&lt;/strong&gt;，密钥更短、TLS 握手更快，所有现代浏览器都支持。&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;账户私钥&lt;/strong&gt;——ACME 协议需要生成一个账户密钥对，工具会自动处理，你只需选择类型。&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;联系邮箱&lt;/strong&gt;——填写常用邮箱，CA 会用它发送证书过期提醒。&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;

      &lt;div class=&quot;step-card&quot;&gt;
        &lt;div class=&quot;step-badge&quot;&gt;3&lt;/div&gt;
        &lt;h3&gt;完成域名验证（关键一步）&lt;/h3&gt;
        &lt;p&gt;这是整个流程中最容易出错的一步。工具支持两种验证方式，&lt;strong&gt;推荐用 DNS 验证&lt;/strong&gt;。&lt;/p&gt;

        &lt;h4&gt;方式一：DNS 验证（推荐）&lt;/h4&gt;
        &lt;ol&gt;
          &lt;li&gt;工具会生成一段 &lt;strong&gt;TXT 记录的值&lt;/strong&gt;，通常是类似 &lt;code&gt;abc123...xyz&lt;/code&gt; 的长字符串。&lt;/li&gt;
          &lt;li&gt;打开你的 DNS 解析控制台（Cloudflare、DNSPod、阿里云解析等都行），添加一条 TXT 记录：
            &lt;ul&gt;
              &lt;li&gt;&lt;strong&gt;主机记录&lt;/strong&gt;：按工具提示填写，通常是 &lt;code&gt;_acme-challenge&lt;/code&gt; 或 &lt;code&gt;_acme-challenge.yourdomain.com&lt;/code&gt;&lt;/li&gt;
              &lt;li&gt;&lt;strong&gt;记录类型&lt;/strong&gt;：选择 &lt;code&gt;TXT&lt;/code&gt;&lt;/li&gt;
              &lt;li&gt;&lt;strong&gt;记录值&lt;/strong&gt;：粘贴工具生成的那串字符&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;保存后回到工具页面，点击「验证」按钮。&lt;/li&gt;
        &lt;/ol&gt;

        &lt;h4&gt;方式二：HTTP 文件验证&lt;/h4&gt;
        &lt;ol&gt;
          &lt;li&gt;工具会生成一个验证文件的内容。&lt;/li&gt;
          &lt;li&gt;在你的 Web 服务器上创建指定路径（通常是 &lt;code&gt;/.well-known/acme-challenge/&lt;/code&gt; 目录下的文件），把内容放进去。&lt;/li&gt;
          &lt;li&gt;确保该文件可以通过 HTTP 公开访问，然后点击「验证」。&lt;/li&gt;
        &lt;/ol&gt;

        &lt;div class=&quot;warning-box&quot;&gt;
          &lt;p&gt;⚠️ &lt;strong&gt;重要提醒：&lt;/strong&gt;申请&lt;strong&gt;通配符证书（泛域名）必须用 DNS 验证&lt;/strong&gt;，HTTP 验证不支持泛域名。这是 ACME 协议的规定，不是工具的限制。&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;step-card&quot;&gt;
        &lt;div class=&quot;step-badge&quot;&gt;4&lt;/div&gt;
        &lt;h3&gt;下载证书&lt;/h3&gt;
        &lt;p&gt;验证通过后，CA 会签发证书。工具页面会展示以下内容：&lt;/p&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;strong&gt;证书文件&lt;/strong&gt;（PEM 格式）——包含服务器证书和中间证书的&lt;strong&gt;完整链&lt;/strong&gt;&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;私钥文件&lt;/strong&gt;——证书对应的私钥，务必妥善保管&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;配置记录&lt;/strong&gt;——完整的操作记录，建议保存下来方便下次参考&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;把证书内容保存为 &lt;code&gt;.cer&lt;/code&gt; 或 &lt;code&gt;.pem&lt;/code&gt; 文件，私钥内容保存为 &lt;code&gt;.key&lt;/code&gt; 文件，就可以部署到服务器了。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;📦&lt;/span&gt;证书下载后怎么部署&lt;/h2&gt;

      &lt;h3&gt;Nginx 部署&lt;/h3&gt;
      &lt;p&gt;把证书文件放到服务器上（比如 &lt;code&gt;/etc/nginx/ssl/&lt;/code&gt;），然后在 Nginx 配置中引用：&lt;/p&gt;
      &lt;pre&gt;&lt;code&gt;server {
    listen 443 ssl http2;
    server_name yourdomain.com;

    ssl_certificate     /etc/nginx/ssl/yourdomain.com.fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/yourdomain.com.key;

    ssl_protocols       TLSv1.2 TLSv1.3;
    ssl_ciphers         ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers on;
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 10m;

    # ... 其他配置
}&lt;/code&gt;&lt;/pre&gt;
      &lt;p&gt;改完后执行 &lt;code&gt;nginx -t&lt;/code&gt; 检查配置，然后 &lt;code&gt;nginx -s reload&lt;/code&gt; 重载。&lt;/p&gt;

      &lt;h3&gt;宝塔面板部署&lt;/h3&gt;
      &lt;p&gt;进入站点设置 → SSL → 粘贴证书和私钥内容 → 保存。宝塔会自动处理证书链拼接和 Nginx 重载。&lt;/p&gt;

      &lt;h3&gt;Apache 部署&lt;/h3&gt;
      &lt;pre&gt;&lt;code&gt;&amp;lt;VirtualHost *:443&amp;gt;
    ServerName yourdomain.com
    SSLEngine on
    SSLCertificateFile /etc/apache2/ssl/yourdomain.com.fullchain.cer
    SSLCertificateKeyFile /etc/apache2/ssl/yourdomain.com.key
&amp;lt;/VirtualHost&amp;gt;&lt;/code&gt;&lt;/pre&gt;

      &lt;div class=&quot;success-box&quot;&gt;
        &lt;p&gt;✅ &lt;strong&gt;验证证书是否生效：&lt;/strong&gt;用浏览器访问 &lt;code&gt;https://yourdomain.com&lt;/code&gt;，地址栏显示安全锁图标即成功。点击锁图标可以查看证书的颁发机构、有效期和域名匹配情况。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;⚠️&lt;/span&gt;这个工具不能做什么&lt;/h2&gt;

      &lt;p&gt;有几个重要的限制需要提前知道，避免期望落空：&lt;/p&gt;

      &lt;div class=&quot;danger-box&quot;&gt;
        &lt;p&gt;🚫 &lt;strong&gt;不能自动续期。&lt;/strong&gt;这个工具是纯手动操作的，不支持自动续期。免费证书普遍只有 &lt;strong&gt;90 天有效期&lt;/strong&gt;，到期前你需要重新打开工具，重复一遍申请流程。如果嫌麻烦，可以在到期前一周用工具申请一张新证书替换。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;warning-box&quot;&gt;
        &lt;p&gt;⚠️ &lt;strong&gt;不适合批量自动化场景。&lt;/strong&gt;如果你有大量域名需要管理，或者希望证书自动续期、自动部署，建议用 &lt;code&gt;acme.sh&lt;/code&gt; 或 &lt;code&gt;Certbot&lt;/code&gt; 这类命令行工具。浏览器工具适合偶尔申请、单域名场景。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;warning-box&quot;&gt;
        &lt;p&gt;⚠️ &lt;strong&gt;私钥在浏览器中生成。&lt;/strong&gt;虽然客户端是纯前端的，私钥不会上传到任何服务器，但请确保你在&lt;strong&gt;可信的设备和网络环境&lt;/strong&gt;中操作，不要在公共电脑上申请证书。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;❓&lt;/span&gt;常见问题&lt;/h2&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：申请证书需要备案吗？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;不需要。Let's Encrypt 和 ZeroSSL 都是国外 CA，申请证书不依赖 ICP 备案。域名在哪注册的都可以。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：通配符证书怎么申请？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;在域名配置中填写 &lt;code&gt;*.yourdomain.com&lt;/code&gt; 和 &lt;code&gt;yourdomain.com&lt;/code&gt;，验证方式&lt;strong&gt;必须用 DNS 验证&lt;/strong&gt;。ACME 协议的通配符证书只能通过 DNS 验证签发，这是硬性规定。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：DNS 记录添加后验证失败怎么办？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;常见原因有三个：一是 DNS 记录还没生效，TTL 太短需要等几分钟再试；二是 TXT 记录值粘贴时多了空格或换行；三是主机记录填错了（应该是 &lt;code&gt;_acme-challenge&lt;/code&gt; 而不是 &lt;code&gt;acme-challenge&lt;/code&gt;）。可以先用 &lt;code&gt;dig _acme-challenge.yourdomain.com TXT +short&lt;/code&gt; 确认记录已生效。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：证书下载后怎么用？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;Nginx 用 &lt;code&gt;ssl_certificate&lt;/code&gt; 和 &lt;code&gt;ssl_certificate_key&lt;/code&gt; 引用证书和私钥文件；宝塔面板直接在 SSL 页面粘贴内容；Caddy 会自动加载 &lt;code&gt;.pem&lt;/code&gt; 和 &lt;code&gt;.key&lt;/code&gt; 文件。参考上文的「证书下载后怎么部署」章节。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：浏览器工具和 acme.sh 有什么区别？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;浏览器工具&lt;strong&gt;简单、零依赖、适合偶尔申请&lt;/strong&gt;，但需要手动操作、不支持自动续期。acme.sh &lt;strong&gt;适合服务器端自动化&lt;/strong&gt;，支持自动续期、自动部署到多台服务器。如果你只是给自己的博客申请一张证书，浏览器工具完全够用。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：证书有效期是多久？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;Let's Encrypt 和 ZeroSSL 的免费证书有效期都是 &lt;strong&gt;90 天&lt;/strong&gt;。到期前需要重新申请。建议在到期前一周申请新证书替换，避免服务中断。&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;faq-item&quot;&gt;
        &lt;p class=&quot;q&quot;&gt;Q：可以申请多个域名的证书吗？&lt;/p&gt;
        &lt;p class=&quot;a&quot;&gt;可以。在域名框中填写多个域名（用逗号或换行分隔），工具会把这些域名都签进同一张证书里。注意所有域名都必须完成验证。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;🔗&lt;/span&gt;工具与项目地址&lt;/h2&gt;

      &lt;ul class=&quot;link-list&quot;&gt;
        &lt;li&gt;
          &lt;span class=&quot;label&quot;&gt;在线使用（GitHub Pages）&lt;/span&gt;
          &lt;a href=&quot;https://xiangyuecn.github.io/ACME-HTML-Web-Browser-Client/ACME-HTML-Web-Browser-Client.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;点击打开 H5 客户端 →&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;span class=&quot;label&quot;&gt;在线使用（Gitee Pages）&lt;/span&gt;
          &lt;a href=&quot;https://xiangyuecn.gitee.io/acme-html-web-browser-client/ACME-HTML-Web-Browser-Client.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;点击打开国内加速版 →&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;span class=&quot;label&quot;&gt;GitHub 仓库&lt;/span&gt;
          &lt;a href=&quot;https://github.com/xiangyuecn/ACME-HTML-Web-Browser-Client&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://github.com/xiangyuecn/ACME-HTML-Web-Browser-Client&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;span class=&quot;label&quot;&gt;Gitee 仓库&lt;/span&gt;
          &lt;a href=&quot;https://gitee.com/xiangyuecn/ACME-HTML-Web-Browser-Client&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://gitee.com/xiangyuecn/ACME-HTML-Web-Browser-Client&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;span class=&quot;label&quot;&gt;Let's Encrypt 官网&lt;/span&gt;
          &lt;a href=&quot;https://letsencrypt.org&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://letsencrypt.org&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;span class=&quot;label&quot;&gt;ZeroSSL 官网&lt;/span&gt;
          &lt;a href=&quot;https://zerossl.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://zerossl.com&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;

      &lt;div class=&quot;info-box&quot;&gt;
        &lt;p&gt;📌 &lt;strong&gt;国内访问建议：&lt;/strong&gt;GitHub Pages 在国内偶尔访问不稳定，如果打不开，用 Gitee Pages 的地址。两个地址内容完全一致，都是官方镜像。&lt;/p&gt;
      &lt;/div&gt;

      &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;📝&lt;/span&gt;小结&lt;/h2&gt;

      &lt;p&gt;ACME-HTML-Web-Browser-Client 把免费 SSL 证书申请这件事的门槛降到了最低——&lt;strong&gt;不需要命令行、不需要装软件、不需要注册账号&lt;/strong&gt;。打开网页，填域名，加一条 DNS 记录，点几下鼠标，证书就到手了。&lt;/p&gt;

      &lt;p&gt;三个关键提醒：&lt;/p&gt;
      &lt;ol&gt;
        &lt;li&gt;&lt;strong&gt;通配符证书必须用 DNS 验证&lt;/strong&gt;，HTTP 验证不支持泛域名&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;证书有效期只有 90 天&lt;/strong&gt;，到期需要手动重新申请&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;私钥妥善保管&lt;/strong&gt;，不要泄露给任何人，也不要在不可信的设备上操作&lt;/li&gt;
      &lt;/ol&gt;

      &lt;p&gt;对于偶尔需要申请证书、不熟悉 Linux 命令行的用户来说，这是一个非常实用的工具。如果你需要自动化续期和多服务器部署，再考虑转向 acme.sh 或 Certbot。&lt;/p&gt;

      &lt;div class=&quot;footer&quot;&gt;
        本文基于 ACME-HTML-Web-Browser-Client 实际使用体验整理 · 工具开源地址见上方链接
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</description><pubDate>Sun, 13 Sep 2026 00:49:43 +0800</pubDate></item><item><title>Cdn该怎么套?我来教你</title><link>https://blog.3v4.top/?id=18</link><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;自建 CDN 完整配置指南 · 域名解析 · SSL 证书 · 刷新预热&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
            background: #f0f4f8;
            color: #1e293b;
            line-height: 1.8;
            padding: 2rem 1rem;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* SaaS 风格主卡片 */
        .main-card {
            background: #ffffff;
            border-radius: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 50px -12px rgba(0, 0, 0, 0.1);
            padding: 3rem 2.8rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(226, 232, 240, 0.6);
        }

        /* 头部 */
        .header {
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .header h1 {
            font-size: 2.2rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0f172a;
            line-height: 1.25;
            margin-bottom: 0.75rem;
        }

        .header .meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

        .tag {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.3rem 0.8rem;
            border-radius: 8px;
            letter-spacing: 0.01em;
        }

        .tag-blue {
            background: #eff6ff;
            color: #2563eb;
            border: 1px solid #bfdbfe;
        }

        .tag-green {
            background: #f0fdf4;
            color: #16a34a;
            border: 1px solid #bbf7d0;
        }

        .tag-amber {
            background: #fffbeb;
            color: #d97706;
            border: 1px solid #fde68a;
        }

        .tag-purple {
            background: #faf5ff;
            color: #9333ea;
            border: 1px solid #e9d5ff;
        }

        .tag-red {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        /* 核心结论 */
        .highlight-box {
            background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
            border: 1px solid #c7d2fe;
            border-radius: 16px;
            padding: 1.6rem 1.8rem;
            margin-bottom: 2.5rem;
        }

        .highlight-box p {
            margin-bottom: 0;
            color: #3730a3;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .highlight-box strong {
            color: #312e81;
        }

        /* 标题 */
        h2 {
            font-size: 1.45rem;
            font-weight: 700;
            color: #0f172a;
            margin-top: 2.8rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            line-height: 1.4;
        }

        h2 .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: #3b82f6;
            color: #fff;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin-top: 1.8rem;
            margin-bottom: 0.6rem;
        }

        h4 {
            font-size: 0.98rem;
            font-weight: 600;
            color: #334155;
            margin-top: 1.4rem;
            margin-bottom: 0.5rem;
        }

        p {
            margin-bottom: 1rem;
            color: #334155;
            font-size: 0.95rem;
        }

        /* 列表 */
        ul, ol {
            margin: 0.8rem 0 1.2rem 1.5rem;
            color: #334155;
            font-size: 0.95rem;
        }

        li {
            margin-bottom: 0.45rem;
        }

        li strong {
            color: #0f172a;
        }

        /* 代码 */
        code {
            background: #f1f5f9;
            color: #0f172a;
            font-size: 0.86em;
            padding: 0.2rem 0.45rem;
            border-radius: 6px;
            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
        }

        pre {
            background: #0f172a;
            color: #e2e8f0;
            padding: 1.3rem 1.5rem;
            border-radius: 14px;
            overflow-x: auto;
            font-size: 0.86rem;
            line-height: 1.7;
            margin: 1rem 0 1.5rem;
            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
            border: 1px solid #1e293b;
        }

        pre code {
            background: transparent;
            color: inherit;
            padding: 0;
            font-size: inherit;
        }

        /* 表格 */
        .table-wrap {
            overflow-x: auto;
            margin: 1.2rem 0 1.8rem;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            background: #fff;
        }

        th {
            background: #f8fafc;
            color: #0f172a;
            font-weight: 600;
            text-align: left;
            padding: 0.9rem 1.1rem;
            border-bottom: 2px solid #e2e8f0;
            white-space: nowrap;
            font-size: 0.85rem;
            letter-spacing: 0.02em;
        }

        td {
            padding: 0.85rem 1.1rem;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            vertical-align: top;
        }

        tr:last-child td {
            border-bottom: none;
        }

        tr:hover td {
            background: #fafbfc;
        }

        /* 警示框 */
        .warning-box {
            background: #fffbeb;
            border-left: 4px solid #f59e0b;
            border-radius: 0 14px 14px 0;
            padding: 1.2rem 1.5rem;
            margin: 1.4rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .warning-box p {
            margin-bottom: 0;
            color: #92400e;
            font-weight: 500;
            font-size: 0.92rem;
        }

        .warning-box strong {
            color: #b45309;
        }

        .danger-box {
            background: #fef2f2;
            border-left: 4px solid #ef4444;
            border-radius: 0 14px 14px 0;
            padding: 1.2rem 1.5rem;
            margin: 1.4rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .danger-box p {
            margin-bottom: 0;
            color: #991b1b;
            font-weight: 500;
            font-size: 0.92rem;
        }

        .danger-box strong {
            color: #b91c1c;
        }

        .info-box {
            background: #eff6ff;
            border-left: 4px solid #3b82f6;
            border-radius: 0 14px 14px 0;
            padding: 1.2rem 1.5rem;
            margin: 1.4rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .info-box p {
            margin-bottom: 0;
            color: #1e40af;
            font-weight: 500;
            font-size: 0.92rem;
        }

        /* 卡片 */
        .card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 1.4rem 1.6rem;
            margin: 1.2rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        }

        .card p:last-child {
            margin-bottom: 0;
        }

        .card-title {
            font-weight: 700;
            color: #0f172a;
            font-size: 0.95rem;
            margin-bottom: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        /* 推荐标记 */
        .recommend-badge {
            display: inline-block;
            background: #fef3c7;
            color: #b45309;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            margin-left: 0.4rem;
            vertical-align: middle;
        }

        /* 步骤卡片 */
        .step-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 1.5rem 1.7rem;
            margin: 1.5rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            position: relative;
        }

        .step-card .step-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: #fff;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 0.6rem;
        }

        .step-card h3 {
            margin-top: 0;
            margin-bottom: 0.5rem;
            font-size: 1.15rem;
        }

        .step-card p:last-child {
            margin-bottom: 0;
        }

        /* 自建CDN特别标识 */
        .selfhost-badge {
            display: inline-block;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.25rem 0.7rem;
            border-radius: 6px;
            letter-spacing: 0.02em;
        }

        /* 底部 */
        .footer {
            text-align: center;
            padding: 2rem 0 1rem;
            color: #94a3b8;
            font-size: 0.85rem;
            border-top: 1px solid #e2e8f0;
            margin-top: 2rem;
        }

        /* 响应式 */
        @media (max-width: 640px) {
            body {
                padding: 0.8rem 0.5rem;
            }

            .main-card {
                padding: 1.8rem 1.3rem;
                border-radius: 18px;
            }

            .header h1 {
                font-size: 1.6rem;
            }

            h2 {
                font-size: 1.2rem;
                margin-top: 2rem;
            }

            h2 .icon {
                width: 28px;
                height: 28px;
                font-size: 0.8rem;
            }

            pre {
                padding: 1rem;
                font-size: 0.78rem;
            }

            th, td {
                padding: 0.6rem 0.8rem;
                font-size: 0.82rem;
            }

            .step-card {
                padding: 1.2rem 1.2rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;main-card&quot;&gt;

            &lt;!-- 头部 --&gt;
            &lt;div class=&quot;header&quot;&gt;
                &lt;h1&gt;自建 CDN 完整配置指南&lt;/h1&gt;
                &lt;div class=&quot;meta&quot;&gt;
                    &lt;span class=&quot;tag tag-purple&quot;&gt;自建 CDN 系统&lt;/span&gt;
                    &lt;span class=&quot;tag tag-blue&quot;&gt;域名解析&lt;/span&gt;
                    &lt;span class=&quot;tag tag-green&quot;&gt;SSL 证书&lt;/span&gt;
                    &lt;span class=&quot;tag tag-amber&quot;&gt;刷新预热&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- 核心结论 --&gt;
            &lt;div class=&quot;highlight-box&quot;&gt;
                &lt;p&gt;💡 &lt;strong&gt;核心结论：&lt;/strong&gt;自建 CDN 套域名并启用 HTTPS，完整链路是——&lt;strong&gt;添加站点 → 配置 CNAME 解析 → 申请 SSL 证书 → 部署证书 → 配置强制跳转 → 按需开启 HSTS → 建立刷新预热机制&lt;/strong&gt;。自建 CDN 和商用 CDN 最大的区别在于：&lt;strong&gt;证书要自己申请、缓存要自己管、回源要自己配&lt;/strong&gt;，没有一键托管。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 前置准备 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;📋&lt;/span&gt;前置准备&lt;/h2&gt;

            &lt;h3&gt;自建 CDN 的系统构成&lt;/h3&gt;
            &lt;p&gt;自建 CDN 通常由三部分组成：&lt;strong&gt;边缘节点&lt;/strong&gt;（运行 Nginx / OpenResty / Varnish + 缓存模块）、&lt;strong&gt;调度系统&lt;/strong&gt;（DNS 智能解析或 Anycast）、&lt;strong&gt;源站&lt;/strong&gt;（你的博客服务器）。你需要自己维护边缘节点的缓存策略、证书和回源配置。&lt;/p&gt;

            &lt;h3&gt;域名与备案&lt;/h3&gt;
            &lt;p&gt;使用&lt;strong&gt;国外边缘节点&lt;/strong&gt;不需要 ICP 备案。DNS 解析托管到 Cloudflare、DNSPod 或自建 DNS 都可以。如果是国内节点，加速域名必须完成 ICP 备案。&lt;/p&gt;

            &lt;h3&gt;证书来源选择&lt;/h3&gt;
            &lt;div class=&quot;table-wrap&quot;&gt;
                &lt;table&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;方案&lt;/th&gt;
                            &lt;th&gt;免费额度&lt;/th&gt;
                            &lt;th&gt;有效期&lt;/th&gt;
                            &lt;th&gt;泛域名&lt;/th&gt;
                            &lt;th&gt;管理方式&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;strong&gt;Let's Encrypt&lt;/strong&gt; &lt;span class=&quot;recommend-badge&quot;&gt;推荐&lt;/span&gt;&lt;/td&gt;
                            &lt;td&gt;无限制&lt;/td&gt;
                            &lt;td&gt;90 天&lt;/td&gt;
                            &lt;td&gt;✅ 支持&lt;/td&gt;
                            &lt;td&gt;命令行（acme.sh）&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;strong&gt;ZeroSSL&lt;/strong&gt;&lt;/td&gt;
                            &lt;td&gt;每账号 3 张&lt;/td&gt;
                            &lt;td&gt;90 天&lt;/td&gt;
                            &lt;td&gt;❌ 免费版不支持&lt;/td&gt;
                            &lt;td&gt;图形界面 + API&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;strong&gt;Buypass&lt;/strong&gt;&lt;/td&gt;
                            &lt;td&gt;免费&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;180 天&lt;/strong&gt;&lt;/td&gt;
                            &lt;td&gt;不支持&lt;/td&gt;
                            &lt;td&gt;命令行 / API&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;strong&gt;商业证书&lt;/strong&gt;&lt;/td&gt;
                            &lt;td&gt;付费&lt;/td&gt;
                            &lt;td&gt;1 年&lt;/td&gt;
                            &lt;td&gt;取决于类型&lt;/td&gt;
                            &lt;td&gt;控制台&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;

            &lt;div class=&quot;info-box&quot;&gt;
                &lt;p&gt;📌 &lt;strong&gt;自建 CDN 推荐方案：&lt;/strong&gt;用 Let's Encrypt + acme.sh 申请泛域名证书，配合 &lt;code&gt;--install-cert&lt;/code&gt; 钩子自动部署到所有边缘节点。免费、自动续期、支持泛域名，是自建 CDN 的最优解。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 第一步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;1&lt;/span&gt;添加站点 / 加速域名&lt;/h2&gt;

            &lt;p&gt;在自建 CDN 的管理面板中添加站点。不同面板（如 Nginx Proxy Manager、宝塔 CDN 插件、自研面板）叫法不同，核心是配置&lt;strong&gt;加速域名&lt;/strong&gt;和&lt;strong&gt;源站地址&lt;/strong&gt;。&lt;/p&gt;

            &lt;h3&gt;加速域名填什么&lt;/h3&gt;
            &lt;p&gt;建议单独分配一个二级域名承载 CDN 加速，如 &lt;code&gt;cdn.yourdomain.com&lt;/code&gt; 或 &lt;code&gt;static.yourdomain.com&lt;/code&gt;，主域名留给业务入口。好处是隔离风险，CDN 出问题时不会波及主站。&lt;/p&gt;

            &lt;h3&gt;源站配置&lt;/h3&gt;
            &lt;p&gt;源站是单台服务器填 IP，负载均衡架构填域名更灵活。回源协议初期可选 HTTP，后续改为 HTTPS 实现全链路加密。&lt;/p&gt;

            &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-title&quot;&gt;📌 配置完成后你会拿到一个 CNAME 地址&lt;/div&gt;
                &lt;p&gt;格式类似 &lt;code&gt;cdn.yourdomain.com.edge-node-01.yourcdn.com&lt;/code&gt;。如果是自建 DNS 调度，可能直接是一个 A 记录指向边缘节点 IP。这是下一步解析的关键。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 第二步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;2&lt;/span&gt;申请 SSL 证书&lt;/h2&gt;

            &lt;h3&gt;Let's Encrypt（acme.sh 方案）&lt;span class=&quot;recommend-badge&quot;&gt;自建 CDN 首选&lt;/span&gt;&lt;/h3&gt;

            &lt;p&gt;安装 acme.sh 一条命令：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;curl https://get.acme.sh | sh -s email=你的邮箱@example.com&lt;/code&gt;&lt;/pre&gt;

            &lt;p&gt;用 DNS 验证方式签发泛域名证书（以 Cloudflare DNS 为例）：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;export CF_Token=&quot;你的Cloudflare_API_Token&quot;
export CF_Account_ID=&quot;你的Cloudflare_Account_ID&quot;
acme.sh --issue --dns dns_cf -d yourdomain.com -d *.yourdomain.com&lt;/code&gt;&lt;/pre&gt;

            &lt;div class=&quot;info-box&quot;&gt;
                &lt;p&gt;📌 &lt;strong&gt;为什么自建 CDN 推荐 DNS 验证？&lt;/strong&gt;DNS 验证不需要边缘节点开放 80 端口，证书签发在本地完成后再分发到各节点。对于多节点自建 CDN，这是唯一可行的方式。&lt;/p&gt;
            &lt;/div&gt;

            &lt;p&gt;&lt;strong&gt;证书文件位置&lt;/strong&gt;：申请成功后，证书在 &lt;code&gt;~/.acme.sh/yourdomain.com/&lt;/code&gt; 目录下。部署到边缘节点时需要的是：&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;code&gt;fullchain.cer&lt;/code&gt;——包含服务器证书和中间证书的&lt;strong&gt;完整链&lt;/strong&gt;&lt;/li&gt;
                &lt;li&gt;&lt;code&gt;yourdomain.com.key&lt;/code&gt;——私钥文件&lt;/li&gt;
            &lt;/ul&gt;

            &lt;h4&gt;自动部署到边缘节点&lt;/h4&gt;
            &lt;p&gt;用 acme.sh 的 &lt;code&gt;--install-cert&lt;/code&gt; 钩子，证书续期后自动复制到 Nginx 目录并重载：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;acme.sh --install-cert -d yourdomain.com \
  --key-file       /etc/nginx/ssl/yourdomain.com.key \
  --fullchain-file /etc/nginx/ssl/yourdomain.com.fullchain.cer \
  --reloadcmd      &quot;nginx -s reload&quot;&lt;/code&gt;&lt;/pre&gt;

            &lt;p&gt;如果有多个边缘节点，可以配合 Ansible / rsync 批量分发证书文件。&lt;/p&gt;

            &lt;h3&gt;ZeroSSL&lt;/h3&gt;
            &lt;p&gt;访问 zerossl.com，输入域名，注册账号后按引导完成验证。支持&lt;strong&gt;文件验证、DNS 验证、邮箱验证&lt;/strong&gt;三种方式。&lt;/p&gt;

            &lt;div class=&quot;warning-box&quot;&gt;
                &lt;p&gt;⚠️ &lt;strong&gt;ZeroSSL 免费版限制：&lt;/strong&gt;每个账号限 3 张免费证书，且&lt;strong&gt;不包含泛域名&lt;/strong&gt;。自建 CDN 通常需要泛域名证书来覆盖多个子域名，所以更推荐 Let's Encrypt。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 第三步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;3&lt;/span&gt;配置 CNAME 解析&lt;/h2&gt;

            &lt;p&gt;进入 DNS 解析控制台（Cloudflare、DNSPod 或自建 DNS），添加一条 &lt;strong&gt;CNAME 记录&lt;/strong&gt;：&lt;/p&gt;

            &lt;ul&gt;
                &lt;li&gt;&lt;strong&gt;主机记录&lt;/strong&gt;：加速 &lt;code&gt;cdn.yourdomain.com&lt;/code&gt; 就填 &lt;code&gt;cdn&lt;/code&gt;；加速主域名填 &lt;code&gt;@&lt;/code&gt;&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;记录类型&lt;/strong&gt;：选择 &lt;code&gt;CNAME&lt;/code&gt;&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;记录值&lt;/strong&gt;：粘贴 CDN 分配的 CNAME 地址&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;TTL&lt;/strong&gt;：保持默认&lt;/li&gt;
            &lt;/ul&gt;

            &lt;div class=&quot;danger-box&quot;&gt;
                &lt;p&gt;🚫 &lt;strong&gt;关键注意：CNAME 记录不能与 A 记录共存。&lt;/strong&gt;如果之前给该主机记录配置过 A 记录指向服务器 IP，必须先删除 A 记录，否则解析冲突，CDN 不生效。这是自建 CDN 新手最常踩的坑。&lt;/p&gt;
            &lt;/div&gt;

            &lt;p&gt;验证是否生效：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;dig cdn.yourdomain.com CNAME +short&lt;/code&gt;&lt;/pre&gt;

            &lt;!-- ==================== 第四步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;4&lt;/span&gt;部署 SSL 证书到边缘节点&lt;/h2&gt;

            &lt;p&gt;自建 CDN 没有「一键上传证书」的按钮，你需要&lt;strong&gt;手动把证书文件放到每个边缘节点&lt;/strong&gt;，并在 Nginx / OpenResty 配置中引用。&lt;/p&gt;

            &lt;h4&gt;Nginx 配置示例&lt;/h4&gt;
            &lt;pre&gt;&lt;code&gt;server {
    listen 443 ssl http2;
    server_name cdn.yourdomain.com;

    ssl_certificate     /etc/nginx/ssl/yourdomain.com.fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/yourdomain.com.key;

    ssl_protocols       TLSv1.2 TLSv1.3;
    ssl_ciphers         ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers on;
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 10m;

    location / {
        proxy_pass http://源站IP:端口;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}&lt;/code&gt;&lt;/pre&gt;

            &lt;h3&gt;最容易踩的坑：证书链不完整&lt;/h3&gt;
            &lt;p&gt;很多「HTTPS 配置看起来成功了，浏览器却报不安全」的问题，根源都在这里。&lt;/p&gt;

            &lt;p&gt;SSL 证书通常包含&lt;strong&gt;服务器证书、中间证书、根证书&lt;/strong&gt;组成的证书链。如果只配置了服务器证书，浏览器可能无法验证证书来源，Chrome 会直接阻断访问。&lt;/p&gt;

            &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-title&quot;&gt;✅ 正确做法&lt;/div&gt;
                &lt;p&gt;Nginx 的 &lt;code&gt;ssl_certificate&lt;/code&gt; 指令指向的文件&lt;strong&gt;必须包含服务器证书和中间证书&lt;/strong&gt;。用 acme.sh 时，&lt;code&gt;fullchain.cer&lt;/code&gt; 就是完整链版本，直接用。不要用 &lt;code&gt;cert.pem&lt;/code&gt;（只有服务器证书）。&lt;/p&gt;
            &lt;/div&gt;

            &lt;p&gt;验证证书链是否完整：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;openssl s_client -connect cdn.yourdomain.com:443 -servername cdn.yourdomain.com&lt;/code&gt;&lt;/pre&gt;
            &lt;p&gt;如果输出中 &lt;code&gt;Verify return code&lt;/code&gt; 为 &lt;code&gt;0 (ok)&lt;/code&gt;，说明链完整。如果是 &lt;code&gt;21 (unable to verify the first certificate)&lt;/code&gt;，说明缺中间证书。&lt;/p&gt;

            &lt;!-- ==================== 第五步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;5&lt;/span&gt;强制跳转 HTTPS&lt;/h2&gt;

            &lt;p&gt;&lt;strong&gt;这是最容易忽视但必须配置的一步。&lt;/strong&gt;&lt;/p&gt;

            &lt;p&gt;配置 SSL 证书只是让 Nginx 具备处理 HTTPS 请求的能力，&lt;strong&gt;不会改变 HTTP 请求的处理方式&lt;/strong&gt;。HTTP 到 HTTPS 的跳转需要单独配置。&lt;/p&gt;

            &lt;h4&gt;Nginx 配置示例&lt;/h4&gt;
            &lt;pre&gt;&lt;code&gt;server {
    listen 80;
    server_name cdn.yourdomain.com;
    return 301 https://$host$request_uri;
}&lt;/code&gt;&lt;/pre&gt;

            &lt;div class=&quot;danger-box&quot;&gt;
                &lt;p&gt;🚫 &lt;strong&gt;重定向死循环：最容易踩的坑。&lt;/strong&gt;如果开启强制跳转后访问报 &lt;code&gt;ERR_TOO_MANY_REDIRECTS&lt;/code&gt;，通常是因为：&lt;strong&gt;源站也配置了 HTTP 到 HTTPS 跳转，但 CDN 以 HTTP 协议回源&lt;/strong&gt;。此时 CDN 收到 HTTP 请求 → 跳转到 HTTPS → 回源时仍用 HTTP → 源站又要求跳转到 HTTPS → 循环。&lt;/p&gt;
            &lt;/div&gt;

            &lt;h4&gt;解决方案（二选一）&lt;/h4&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;strong&gt;方案一&lt;/strong&gt;：关闭源站的 HTTP 强制跳转功能，统一由 CDN 处理跳转&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;方案二&lt;/strong&gt;：修改 CDN 回源协议为 &lt;strong&gt;HTTPS&lt;/strong&gt; 或 &lt;strong&gt;跟随请求协议&lt;/strong&gt;，避免触发源站跳转&lt;/li&gt;
            &lt;/ul&gt;

            &lt;div class=&quot;info-box&quot;&gt;
                &lt;p&gt;📌 &lt;strong&gt;自建 CDN 推荐方案二。&lt;/strong&gt;回源协议设为 HTTPS，源站也配好证书，实现「用户到 CDN」和「CDN 到源站」全程加密。同时源站可以保留强制跳转作为兜底。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 第六步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;6&lt;/span&gt;HSTS 安全访问（进阶，慎开）&lt;/h2&gt;

            &lt;h3&gt;HSTS 是什么&lt;/h3&gt;
            &lt;p&gt;HSTS（HTTP Strict Transport Security）是一种安全策略，开启后浏览器会缓存一个响应头，&lt;strong&gt;在缓存有效期内自动将所有 HTTP 请求转为 HTTPS&lt;/strong&gt;，不再经过 HTTP 跳转这一步。&lt;/p&gt;

            &lt;h3&gt;HSTS 与强制跳转的区别&lt;/h3&gt;
            &lt;p&gt;&lt;strong&gt;强制跳转&lt;/strong&gt;是服务端处理：浏览器发 HTTP → 服务器返回 301 → 浏览器再发 HTTPS。第一次 HTTP 请求仍然在网络上传输，&lt;strong&gt;有被劫持的风险&lt;/strong&gt;。&lt;/p&gt;
            &lt;p&gt;&lt;strong&gt;HSTS&lt;/strong&gt;是浏览器侧处理：浏览器发现请求是 HTTP → 浏览器直接转为 HTTPS 发出。&lt;strong&gt;HTTP 请求根本没有出现在网络上&lt;/strong&gt;，彻底消除降级攻击风险。&lt;/p&gt;

            &lt;h4&gt;Nginx 配置示例&lt;/h4&gt;
            &lt;pre&gt;&lt;code&gt;add_header Strict-Transport-Security &quot;max-age=31536000; includeSubDomains; preload&quot; always;&lt;/code&gt;&lt;/pre&gt;

            &lt;div class=&quot;danger-box&quot;&gt;
                &lt;p&gt;🚫 &lt;strong&gt;HSTS 的致命风险（开之前必读）：&lt;/strong&gt;HSTS 配置后&lt;strong&gt;无法快速回退&lt;/strong&gt;。HSTS 策略作用在客户端（浏览器），关闭 HSTS 后无法立即生效，需要用户手动刷新浏览器缓存。这意味着：&lt;strong&gt;如果开启 HSTS 后证书出了问题（过期、被吊销、配置错误），所有已经缓存过 HSTS 响应的用户将完全无法访问你的网站&lt;/strong&gt;，浏览器会直接阻止连接，连“继续访问”的选项都不给。&lt;/p&gt;
            &lt;/div&gt;

            &lt;h4&gt;必须遵守的规则&lt;/h4&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;strong&gt;开启 HSTS 前，确保证书配置稳定且自动续期正常工作&lt;/strong&gt;&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;不要为了测试而随便开启 HSTS&lt;/strong&gt;&lt;/li&gt;
                &lt;li&gt;如果开启 HSTS 后关闭了 HTTPS 证书，&lt;strong&gt;必须同时关闭 HSTS 配置&lt;/strong&gt;&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;过期时间不要设太长&lt;/strong&gt;，初期建议 &lt;code&gt;max-age=86400&lt;/code&gt;（1 天），确认稳定后再逐步延长到 31536000（1 年）&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;强制跳转类型不能设为 HTTP&lt;/strong&gt;，否则与 HSTS 冲突，会导致域名无法访问&lt;/li&gt;
            &lt;/ul&gt;

            &lt;div class=&quot;warning-box&quot;&gt;
                &lt;p&gt;⚠️ &lt;strong&gt;自建 CDN 特别提醒：&lt;/strong&gt;HSTS 头由边缘节点返回。如果你有多个边缘节点，必须&lt;strong&gt;确保所有节点都配置了相同的 HSTS 策略&lt;/strong&gt;，否则用户在不同节点间切换时会遇到不一致的行为。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 第七步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;7&lt;/span&gt;缓存刷新与预热&lt;/h2&gt;

            &lt;h3&gt;核心概念&lt;/h3&gt;
            &lt;p&gt;&lt;strong&gt;刷新（Refresh/Purge）&lt;/strong&gt;：向 CDN 节点下发缓存失效指令，将已缓存的资源标记为过期。用户再次请求时，CDN 回源获取最新资源并重新缓存。&lt;strong&gt;刷新会降低缓存命中率&lt;/strong&gt;。&lt;/p&gt;
            &lt;p&gt;&lt;strong&gt;预热（Preload/Warm-up）&lt;/strong&gt;：CDN 节点主动从源站拉取资源并缓存。用户首次请求时可直接从 CDN 获取，无需回源。&lt;strong&gt;预热会提高缓存命中率&lt;/strong&gt;。&lt;/p&gt;

            &lt;h3&gt;什么时候用哪个&lt;/h3&gt;
            &lt;div class=&quot;table-wrap&quot;&gt;
                &lt;table&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;场景&lt;/th&gt;
                            &lt;th&gt;操作&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;博客更新了文章，想让读者立即看到新内容&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;刷新&lt;/strong&gt;对应文章 URL&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;删除了违规/错误内容&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;刷新&lt;/strong&gt;对应 URL&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;首次接入 CDN，想加速热门文章&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;预热&lt;/strong&gt;热门文章 URL&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;发布大型资源（视频、安装包）&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;预热&lt;/strong&gt;，降低源站压力&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;更换了主题/静态资源&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;先刷新，再预热&lt;/strong&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;

            &lt;h3&gt;自建 CDN 如何实现刷新预热&lt;/h3&gt;

            &lt;h4&gt;Nginx 缓存刷新&lt;/h4&gt;
            &lt;p&gt;如果边缘节点用 Nginx 的 &lt;code&gt;proxy_cache&lt;/code&gt;，刷新就是删除对应的缓存文件：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;# 查找缓存文件
find /var/cache/nginx -type f -name &quot;*yourdomain.com*&quot;

# 删除指定缓存（按 URL 匹配）
grep -rl &quot;cdn.yourdomain.com/article/123&quot; /var/cache/nginx | xargs rm -f

# 重载 Nginx
nginx -s reload&lt;/code&gt;&lt;/pre&gt;

            &lt;h4&gt;OpenResty / Lua 缓存刷新&lt;/h4&gt;
            &lt;p&gt;如果边缘节点用 OpenResty + lua-resty-cache，可以通过 &lt;code&gt;ngx.shared.DICT&lt;/code&gt; 或 Redis 管理缓存键，提供 HTTP API 触发刷新：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;# 通过 API 刷新单个 URL
curl -X POST &quot;http://edge-node-01:8080/purge&quot; \
  -d &quot;url=https://cdn.yourdomain.com/article/123&quot;&lt;/code&gt;&lt;/pre&gt;

            &lt;h4&gt;预热实现&lt;/h4&gt;
            &lt;p&gt;预热本质是&lt;strong&gt;主动发起请求让 CDN 回源并缓存&lt;/strong&gt;。可以用脚本批量发起：&lt;/p&gt;
            &lt;pre&gt;&lt;code&gt;# 批量预热热门文章
for url in $(cat hot-urls.txt); do
  curl -s -o /dev/null -w &quot;%{http_code} %{url_effective}\n&quot; &quot;$url&quot;
done&lt;/code&gt;&lt;/pre&gt;

            &lt;div class=&quot;warning-box&quot;&gt;
                &lt;p&gt;⚠️ &lt;strong&gt;刷新预热的注意事项：&lt;/strong&gt;&lt;/p&gt;
                &lt;p&gt;1. &lt;strong&gt;大批量刷新会冲击源站。&lt;/strong&gt;刷新后大量请求同时回源，源站带宽会突增。建议在流量低峰期操作。&lt;/p&gt;
                &lt;p&gt;2. &lt;strong&gt;预热也是同理。&lt;/strong&gt;大批量预热任务会让 CDN 节点同时回源拉取，源站带宽压力增大。根据源站带宽情况控制并发。&lt;/p&gt;
                &lt;p&gt;3. &lt;strong&gt;刷新不是删除，是标记失效。&lt;/strong&gt;CDN 不会实时删除缓存文件，只是标记为“过期”，用户下次请求时才回源获取新内容。&lt;/p&gt;
                &lt;p&gt;4. &lt;strong&gt;如果缓存过期时间 &amp;lt; 5 分钟，不需要手动刷新。&lt;/strong&gt;等它自然过期即可。&lt;/p&gt;
                &lt;p&gt;5. &lt;strong&gt;HTTP 和 HTTPS 共享缓存。&lt;/strong&gt;只需要刷新或预热其中一种协议，不必两个都做。&lt;/p&gt;
            &lt;/div&gt;

            &lt;h3&gt;自动化刷新预热&lt;/h3&gt;
            &lt;p&gt;手动刷新适合低频场景。如果博客更新频繁，可以配置自动化：&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;strong&gt;Git Hook 触发&lt;/strong&gt;：博客部署完成后，通过 webhook 调用刷新 API&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;CI/CD 集成&lt;/strong&gt;：在 GitHub Actions / GitLab CI 中加入刷新步骤&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;定时任务&lt;/strong&gt;：用 cron 定期预热热门文章&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;对象存储触发&lt;/strong&gt;：文件上传到 OSS/COS 时自动触发刷新&lt;/li&gt;
            &lt;/ul&gt;

            &lt;!-- ==================== 第八步 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;8&lt;/span&gt;验证与排查&lt;/h2&gt;

            &lt;h3&gt;验证清单&lt;/h3&gt;
            &lt;ol&gt;
                &lt;li&gt;&lt;strong&gt;HTTPS 访问&lt;/strong&gt;：用 &lt;code&gt;https://cdn.yourdomain.com&lt;/code&gt; 访问，地址栏显示安全锁&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;证书信息&lt;/strong&gt;：点击锁图标，确认 CA 为 Let's Encrypt、在有效期内、域名匹配&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;HTTP 跳转&lt;/strong&gt;：用 &lt;code&gt;http://cdn.yourdomain.com&lt;/code&gt; 访问，应自动跳转到 HTTPS&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;CNAME 生效&lt;/strong&gt;：&lt;code&gt;dig cdn.yourdomain.com CNAME +short&lt;/code&gt; 返回 CDN 地址&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;混合内容&lt;/strong&gt;：浏览器控制台无 &lt;code&gt;Mixed Content&lt;/code&gt; 警告&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;缓存验证&lt;/strong&gt;：更新资源后，刷新 CDN，确认用户能获取最新内容&lt;/li&gt;
            &lt;/ol&gt;

            &lt;h3&gt;常见故障速查表&lt;/h3&gt;
            &lt;div class=&quot;table-wrap&quot;&gt;
                &lt;table&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;现象&lt;/th&gt;
                            &lt;th&gt;大概率原因&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;浏览器标「不安全」但页面能打开&lt;/td&gt;
                            &lt;td&gt;证书链不完整或未开强制跳转&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;code&gt;ERR_TOO_MANY_REDIRECTS&lt;/code&gt;&lt;/td&gt;
                            &lt;td&gt;源站也配了强制跳转 + CDN 以 HTTP 回源&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;页面图片/样式加载失败&lt;/td&gt;
                            &lt;td&gt;混合内容被浏览器阻止&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;CNAME 配置后 CDN 不生效&lt;/td&gt;
                            &lt;td&gt;A 记录与 CNAME 冲突，需删除 A 记录&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;回源报 502&lt;/td&gt;
                            &lt;td&gt;CDN 回源协议设为 HTTPS 但源站不支持&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;裸域名证书报错&lt;/td&gt;
                            &lt;td&gt;用了通配符证书但没单独配置裸域名&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;证书申请后 CDN 不识别&lt;/td&gt;
                            &lt;td&gt;配置了不含中间证书的 &lt;code&gt;cert.pem&lt;/code&gt; 而非 &lt;code&gt;fullchain.pem&lt;/code&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;用户看到旧内容&lt;/td&gt;
                            &lt;td&gt;缓存未过期且未刷新，或刷新未生效&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;HSTS 开启后网站打不开&lt;/td&gt;
                            &lt;td&gt;证书问题，且浏览器已缓存 HSTS 无法回退&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;

            &lt;!-- ==================== 小结 ==================== --&gt;
            &lt;h2&gt;&lt;span class=&quot;icon&quot;&gt;📝&lt;/span&gt;小结&lt;/h2&gt;

            &lt;p&gt;完整流程：&lt;strong&gt;加域名 → 配 CNAME → 申请证书（Let's Encrypt / ZeroSSL）→ 部署 fullchain → 配强制跳转 → 按需开 HSTS（慎开）→ 建立刷新预热机制&lt;/strong&gt;。&lt;/p&gt;

            &lt;p&gt;三个最关键的提醒：&lt;/p&gt;
            &lt;ol&gt;
                &lt;li&gt;&lt;strong&gt;强制跳转与回源协议必须匹配&lt;/strong&gt;，否则重定向死循环&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;HSTS 开之前确保证书稳定&lt;/strong&gt;，开了就不好回头&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;刷新预热按需使用&lt;/strong&gt;，大批量操作放在流量低峰期&lt;/li&gt;
            &lt;/ol&gt;

            &lt;div class=&quot;info-box&quot;&gt;
                &lt;p&gt;📌 &lt;strong&gt;自建 CDN 的核心优势：&lt;/strong&gt;完全掌控缓存策略、证书管理和回源逻辑。代价是需要自己维护边缘节点、自己处理证书续期、自己实现刷新预热。对于技术博客来说，这是一次性投入、长期受益的选择。&lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- 底部 --&gt;
            &lt;div class=&quot;footer&quot;&gt;
                本文基于自建 CDN 系统实践整理 · 适用于 Nginx / OpenResty / Varnish 等自建方案
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</description><pubDate>Sun, 13 Sep 2026 00:25:18 +0800</pubDate></item></channel></rss>