<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Twilight Breeze</title>
  
  <subtitle>Some regrets are what make things perfect.</subtitle>
  <link href="https://humanfireworks-web.netlify.app/atom.xml" rel="self"/>
  
  <link href="https://humanfireworks-web.netlify.app/"/>
  <updated>2026-01-22T15:28:08.995Z</updated>
  <id>https://humanfireworks-web.netlify.app/</id>
  
  <author>
    <name>墓葬未亡人</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>通过阿里云ECS（轻量服务器也可以）部署 WordPress 动态网站（超详细）</title>
    <link href="https://humanfireworks-web.netlify.app/2026/articles/wordpress-aliyun-btpanel/"/>
    <id>https://humanfireworks-web.netlify.app/2026/articles/wordpress-aliyun-btpanel/</id>
    <published>2026-01-18T12:00:00.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<p>这篇文章目标很明确：从购买阿里云服务器开始，一路走到“用域名打开 WordPress 首页，并能登录后台发文章”。过程中我会把新手最容易卡住的点（安全组端口、域名解析、备案、宝塔面板登录、SSL、伪静态/固定链接、SSH 密钥）讲清楚。</p><span id="more"></span><h2 id="0-你要准备什么"><a class="markdownIt-Anchor" href="#0-你要准备什么"></a> 0. 你要准备什么</h2><ul><li>一个阿里云账号（完成实名认证）</li><li>一台 ECS 云服务器（建议 2C2G 起步，更稳）</li><li>一个域名（完成域名实名认证）</li><li>一台本地电脑（Windows/macOS/Linux 均可，用来 SSH 连接服务器）</li></ul><p>如果你的站点面向国内用户，并且服务器在中国内地地域：需要先备案再用域名正式对外访问；如果服务器在香港/海外：一般不需要 ICP 备案，但访问体验、合规要求、生态配套会不同。</p><h2 id="1-购买阿里云-ecs服务器"><a class="markdownIt-Anchor" href="#1-购买阿里云-ecs服务器"></a> 1. 购买阿里云 ECS（服务器）</h2><h3 id="11-选地域与操作系统"><a class="markdownIt-Anchor" href="#11-选地域与操作系统"></a> 1.1 选地域与操作系统</h3><ul><li><strong>地域</strong>：面向国内用户，优先选择中国内地（离用户近、延迟低）。</li><li><strong>系统</strong>：建议选择较新且兼容性好的系统（例如 Ubuntu 22 / Debian 12 / Alibaba Cloud Linux 3）。宝塔官方也推荐 Debian-12、Ubuntu-22、CentOS9 等新系统作为兼容优先级更高的选择。</li></ul><h3 id="12-网络与公网-ip"><a class="markdownIt-Anchor" href="#12-网络与公网-ip"></a> 1.2 网络与公网 IP</h3><p>购买时务必确认：</p><ul><li><strong>分配公网 IP</strong>（或者后续绑定 EIP）</li><li><strong>购买带宽</strong>（否则外网访问不了）</li></ul><p>很多“装好了但打不开面板/打不开网站”的问题，本质都是：没公网、没放通端口、没带宽。</p><h3 id="13-安全组端口放行"><a class="markdownIt-Anchor" href="#13-安全组端口放行"></a> 1.3 安全组（端口放行）</h3><p>先把常用端口规划好，后面会顺很多：</p><ul><li><strong>22</strong>：SSH 远程登录</li><li><strong>80</strong>：HTTP</li><li><strong>443</strong>：HTTPS</li><li><strong>宝塔面板端口</strong>：安装宝塔后会给一个端口（可能是 8888 或随机端口），到时候按提示放行</li></ul><p>原则：只开必须端口，能改默认端口就改，能限制来源 IP 就限制。</p><h2 id="2-购买域名并完成备案中国内地服务器必看"><a class="markdownIt-Anchor" href="#2-购买域名并完成备案中国内地服务器必看"></a> 2. 购买域名并完成备案（中国内地服务器必看）</h2><h3 id="21-购买域名与实名认证"><a class="markdownIt-Anchor" href="#21-购买域名与实名认证"></a> 2.1 购买域名与实名认证</h3><p>域名购买后通常要做域名实名认证，没认证会影响解析与备案。</p><h3 id="22-icp-备案流程大概会经历什么"><a class="markdownIt-Anchor" href="#22-icp-备案流程大概会经历什么"></a> 2.2 ICP 备案流程（大概会经历什么）</h3><p>在阿里云备案系统里通常会经历：</p><ol><li>填写主体信息与网站信息</li><li>上传资料/真实性核验</li><li>阿里云初审</li><li>工信部短信核验</li><li>管局审核</li></ol><p>备案通过后，你会拿到备案号；网站开通后，通常需要在首页底部展示备案号并链接到工信部页面（不同省份规则略有差异）。</p><h2 id="3-用-ssh-登录服务器可以不做但建议"><a class="markdownIt-Anchor" href="#3-用-ssh-登录服务器可以不做但建议"></a> 3. 用 SSH 登录服务器（可以不做但建议）</h2><p>你有两种常见方式登录服务器：</p><ul><li><strong>密码登录</strong>：简单，但更容易被扫到爆破</li><li><strong>SSH 密钥登录</strong>：更安全，更适合长期运维</li></ul><h3 id="31-在阿里云创建并绑定密钥对"><a class="markdownIt-Anchor" href="#31-在阿里云创建并绑定密钥对"></a> 3.1 在阿里云创建并绑定密钥对</h3><p>在 ECS 控制台创建 SSH Key Pair，然后绑定到你的实例。创建后会下载私钥文件（务必保存好，丢了就没法用它登录）。</p><h3 id="32-windows-直接用-powershell-连接"><a class="markdownIt-Anchor" href="#32-windows-直接用-powershell-连接"></a> 3.2 Windows 直接用 PowerShell 连接</h3><p>假设你的服务器公网 IP 是 <code>1.2.3.4</code>，用户名是 <code>root</code>，私钥是 <code>C:\keys\my-ecs.pem</code>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -i <span class="string">&quot;C:\\keys\\my-ecs.pem&quot;</span> root@1.2.3.4</span><br></pre></td></tr></table></figure><p>如果你用的是 Ubuntu 镜像，默认用户可能是 <code>ubuntu</code>；不同镜像的默认用户不一样，以购买页/实例说明为准。</p><p>常见补充：</p><ul><li>如果你修改过 SSH 端口（不再是 22），需要显式指定端口：</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -p 2222 -i <span class="string">&quot;C:\\keys\\my-ecs.pem&quot;</span> root@1.2.3.4</span><br></pre></td></tr></table></figure><ul><li>第一次连接会提示指纹确认，输入 <code>yes</code> 继续。</li><li>连接成功后，建议在确认密钥登录可用的前提下，再考虑关闭密码登录/限制登录来源 IP（避免把自己锁在门外）。</li></ul><h2 id="4-安装宝塔面板bt-panel"><a class="markdownIt-Anchor" href="#4-安装宝塔面板bt-panel"></a> 4. 安装宝塔面板（BT Panel）</h2><h3 id="41-在服务器上执行安装命令"><a class="markdownIt-Anchor" href="#41-在服务器上执行安装命令"></a> 4.1 在服务器上执行安装命令</h3><p>用 SSH 登录服务器后，执行宝塔官方提供的通用安装命令（不同系统可能略不同，以官方文档为准）：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> [ -f /usr/bin/curl ];<span class="keyword">then</span> curl -sSO https://download.bt.cn/install/install_panel.sh;<span class="keyword">else</span> wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;<span class="keyword">fi</span>;bash install_panel.sh ssl251104</span><br></pre></td></tr></table></figure><p>安装过程中会提示是否安装到 <code>/www</code>，通常输入 <code>y</code> 回车确认。</p><h3 id="42-打开宝塔面板访问端口"><a class="markdownIt-Anchor" href="#42-打开宝塔面板访问端口"></a> 4.2 打开宝塔面板访问端口</h3><p>安装完成后，终端会输出：</p><ul><li>外网面板地址（带端口，有时还带安全入口路径）</li><li>默认用户名/密码<br />记得用复制到记事本里保存，待会还要用</li></ul><p>这一步你要做两件事：</p><ol><li>去阿里云安全组放行对应端口</li><li>用浏览器访问面板地址登录</li></ol><h3 id="43-首次登录后建议立刻做的安全设置"><a class="markdownIt-Anchor" href="#43-首次登录后建议立刻做的安全设置"></a> 4.3 首次登录后建议立刻做的安全设置</h3><ul><li>修改面板默认端口</li><li>修改面板默认账号与密码</li><li>开启面板安全入口（如果面板支持）</li><li>只允许你的常用 IP 访问面板（如果你有固定 IP）</li></ul><h2 id="5-在宝塔里安装-web-环境lnmp"><a class="markdownIt-Anchor" href="#5-在宝塔里安装-web-环境lnmp"></a> 5. 在宝塔里安装 Web 环境（LNMP）</h2><p>首次进入面板一般会提示安装套件：</p><ul><li><strong>推荐 LNMP</strong>：Nginx + MySQL + PHP</li><li>PHP 版本建议选择较新稳定版（WordPress 兼容性更好）</li></ul><p>安装完成后，你就有了“跑 WordPress 的基础设施”。</p><h2 id="6-在宝塔里创建站点并绑定域名"><a class="markdownIt-Anchor" href="#6-在宝塔里创建站点并绑定域名"></a> 6. 在宝塔里创建站点并绑定域名</h2><h3 id="61-添加站点"><a class="markdownIt-Anchor" href="#61-添加站点"></a> 6.1 添加站点</h3><p>宝塔面板：</p><ul><li>进入「网站」-&gt;「添加站点」</li><li>填你的域名（例如 <code>example.com</code> 和 <code>www.example.com</code>）</li><li>选择站点根目录（默认会放在 <code>/www/wwwroot/你的域名/</code>）</li><li>同时勾选创建数据库（MySQL）</li></ul><p>你会得到一组数据库信息：</p><ul><li>数据库名</li><li>数据库用户名</li><li>数据库密码</li></ul><p>记得仍然复制到记事本里，后面安装 WordPress 会用到。</p><h3 id="62-域名解析到服务器公网-ip"><a class="markdownIt-Anchor" href="#62-域名解析到服务器公网-ip"></a> 6.2 域名解析到服务器公网 IP</h3><p>去阿里云 DNS 解析（云解析 DNS）里添加解析记录：</p><ul><li>主机记录 <code>@</code> -&gt; A 记录 -&gt; 指向服务器公网 IP</li><li>主机记录 <code>www</code> -&gt; A 记录 -&gt; 指向服务器公网 IP</li></ul><p>解析生效通常几分钟到几十分钟不等。</p><h2 id="7-在宝塔里申请-https-证书lets-encrypt"><a class="markdownIt-Anchor" href="#7-在宝塔里申请-https-证书lets-encrypt"></a> 7. 在宝塔里申请 HTTPS 证书（Let’s Encrypt）</h2><p>宝塔里一般可以直接给站点申请免费证书（Let’s Encrypt）：</p><ul><li>先确认域名已经解析到你的服务器 IP</li><li>先确认 <strong>80/443</strong> 端口在安全组已放通</li><li>在站点的「SSL」里申请并部署证书</li><li>勾选“强制 HTTPS”（可选，但建议）</li></ul><h2 id="8-安装-wordpress"><a class="markdownIt-Anchor" href="#8-安装-wordpress"></a> 8. 安装 WordPress</h2><p>你有两条路：</p><ul><li><strong>路 A：宝塔一键部署/应用商店</strong>（如果你的面板提供）</li><li><strong>路 B：手动上传 WordPress 安装包</strong>（通用、可控）</li></ul><p>下面用“路 B”讲一遍，学会后你会更清楚服务器里发生了什么。</p><h3 id="81-上传并解压-wordpress"><a class="markdownIt-Anchor" href="#81-上传并解压-wordpress"></a> 8.1 上传并解压 WordPress</h3><ol><li>在宝塔面板进入「文件」，打开你站点根目录（例如 <code>/www/wwwroot/example.com/</code>）</li><li>上传 WordPress 压缩包（从 <a href="https://wordpress.org/download/">WordPress 官网</a> 或 <a href="https://cn.wordpress.org/download/">中文站</a> 下载）</li><li>解压到站点根目录</li><li>确保站点根目录下直接是 <code>wp-admin/</code>、<code>wp-content/</code>、<code>wp-includes/</code> 等目录，而不是多嵌套一层</li></ol><h3 id="82-访问域名进入安装向导"><a class="markdownIt-Anchor" href="#82-访问域名进入安装向导"></a> 8.2 访问域名进入安装向导</h3><p>浏览器打开：</p><ul><li><code>http://你的域名/</code>（或 <code>https://你的域名/</code>）</li></ul><p>按照向导填写：</p><ul><li>数据库名/用户名/密码（来自第 6.1 步创建数据库的那组信息）</li><li>数据库地址（常见是 <code>localhost</code>）</li><li>表前缀（默认 <code>wp_</code>，更安全可以改成随机字符串）</li><li>站点标题</li><li>管理员用户名、密码、邮箱</li></ul><p>安装完成后你会看到登录按钮。</p><h2 id="9-如何注册登录-wordpress以及后台怎么用"><a class="markdownIt-Anchor" href="#9-如何注册登录-wordpress以及后台怎么用"></a> 9. 如何注册/登录 WordPress，以及后台怎么用</h2><h3 id="91-登录后台"><a class="markdownIt-Anchor" href="#91-登录后台"></a> 9.1 登录后台</h3><p>WordPress 后台地址通常是：</p><ul><li><code>https://你的域名/wp-admin/</code></li></ul><p>使用安装时设置的管理员账号密码登录。</p><h3 id="92-创建新用户注册更多是站长创建"><a class="markdownIt-Anchor" href="#92-创建新用户注册更多是站长创建"></a> 9.2 创建新用户（“注册”更多是站长创建）</h3><p>WordPress 默认更偏向“站长创建账号”，你可以在后台：</p><ul><li>「用户」-&gt;「添加用户」：创建编辑/作者/订阅者等</li><li>「设置」-&gt;「常规」：可以开启“任何人都可以注册”（不建议随便开，容易被滥用）</li></ul><h3 id="93-发布文章"><a class="markdownIt-Anchor" href="#93-发布文章"></a> 9.3 发布文章</h3><ul><li>「文章」-&gt;「写文章」：写正文、设置分类与标签、设置特色图片</li><li>「页面」：更适合“关于我/联系我/服务介绍”这种固定页面</li></ul><h2 id="10-固定链接与伪静态不做可能会打不开文章详情"><a class="markdownIt-Anchor" href="#10-固定链接与伪静态不做可能会打不开文章详情"></a> 10. 固定链接与伪静态（不做可能会打不开文章详情）</h2><h3 id="101-设置固定链接"><a class="markdownIt-Anchor" href="#101-设置固定链接"></a> 10.1 设置固定链接</h3><p>进入后台：</p><ul><li>「设置」-&gt;「固定链接」</li><li>选择“文章名”或自定义结构（例如 <code>/%postname%/</code>）</li></ul><h3 id="102-宝塔里配置-nginx-伪静态wordpress"><a class="markdownIt-Anchor" href="#102-宝塔里配置-nginx-伪静态wordpress"></a> 10.2 宝塔里配置 Nginx 伪静态（WordPress）</h3><p>在宝塔站点设置里找到「伪静态」，选择 WordPress（如果列表里有），或者写入常见规则：</p><figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">    <span class="attribute">try_files</span> <span class="variable">$uri</span> <span class="variable">$uri</span>/ /index.php?<span class="variable">$args</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attribute">rewrite</span> /wp-admin$ <span class="variable">$scheme</span>://<span class="variable">$host</span><span class="variable">$uri</span>/ <span class="literal">permanent</span>;</span><br></pre></td></tr></table></figure><p>保存后再访问文章详情页验证是否正常。</p><h2 id="11-宝塔里搭建域名申请-ssh的对应位置"><a class="markdownIt-Anchor" href="#11-宝塔里搭建域名申请-ssh的对应位置"></a> 11. 宝塔里“搭建域名”“申请 SSH”的对应位置</h2><h3 id="111-域名相关"><a class="markdownIt-Anchor" href="#111-域名相关"></a> 11.1 域名相关</h3><ul><li>域名解析：在阿里云 DNS 控制台做 A 记录</li><li>域名绑定站点：在宝塔「网站」-&gt; 站点设置里添加/管理域名</li></ul><h3 id="112-ssh-相关"><a class="markdownIt-Anchor" href="#112-ssh-相关"></a> 11.2 SSH 相关</h3><ul><li>SSH 本质上不需要“申请”，而是服务器提供的远程登录服务</li><li>你需要做的是：<ul><li>安全组放行 22 端口（或你修改后的 SSH 端口）</li><li>选择密码登录或密钥登录</li><li>在宝塔「安全」里可以查看/管理 SSH 状态（面板版本不同，入口可能略有差异）</li></ul></li></ul><h2 id="12-常见踩坑清单按出现频率排序"><a class="markdownIt-Anchor" href="#12-常见踩坑清单按出现频率排序"></a> 12. 常见踩坑清单（按出现频率排序）</h2><ul><li><strong>打不开网站</strong>：没解析/解析没生效、80/443 没放行、Nginx 没装好、站点没创建</li><li><strong>打不开宝塔面板</strong>：面板端口没放行、访问地址带安全入口路径但你漏了、面板端口被改了</li><li><strong>WordPress 安装页连不上数据库</strong>：数据库用户名/密码填错、数据库服务没启动、数据库地址不是 localhost</li><li><strong>文章详情 404</strong>：固定链接已改但 Nginx 伪静态没配</li><li><strong>HTTPS 申请失败</strong>：域名没正确解析到服务器、80 端口没放行、DNS 还没生效</li></ul><h2 id="参考资料建议收藏"><a class="markdownIt-Anchor" href="#参考资料建议收藏"></a> 参考资料（建议收藏）</h2><ul><li>阿里云：快速搭建 WordPress（包含镜像/一键部署等方案）<ul><li><a href="https://help.aliyun.com/zh/ecs/use-cases/quickly-build-a-wordpress-website">https://help.aliyun.com/zh/ecs/use-cases/quickly-build-a-wordpress-website</a></li></ul></li><li>阿里云：在 ECS 上部署宝塔面板<ul><li><a href="https://help.aliyun.com/zh/ecs/user-guide/deploy-the-web-environment">https://help.aliyun.com/zh/ecs/user-guide/deploy-the-web-environment</a></li></ul></li><li>宝塔文档：安装面板（安装命令与登录说明）<ul><li><a href="https://docs.bt.cn/getting-started/quick-installation-of-bt-panel">https://docs.bt.cn/getting-started/quick-installation-of-bt-panel</a></li></ul></li><li>阿里云：ICP备案申请全流程操作指南<ul><li><a href="https://help.aliyun.com/zh/icp-filing/basic-icp-service/user-guide/icp-filing-application-overview">https://help.aliyun.com/zh/icp-filing/basic-icp-service/user-guide/icp-filing-application-overview</a></li></ul></li></ul><h2 id="优秀参考视频推荐"><a class="markdownIt-Anchor" href="#优秀参考视频推荐"></a> 优秀参考视频推荐</h2><p>如果你觉得文字教程还不够直观，强烈推荐观看这个 B 站视频。该视频讲解得非常优秀且详细，涵盖了几乎所有实操细节，珠玉在前，我就不在视频演示上班门弄斧了：</p><ul><li><a href="https://www.bilibili.com/video/BV1Vg411w7os/">（从零开始搭建 WordPress 网站（阿里云+宝塔面板）</a></li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;这篇文章目标很明确：从购买阿里云服务器开始，一路走到“用域名打开 WordPress 首页，并能登录后台发文章”。过程中我会把新手最容易卡住的点（安全组端口、域名解析、备案、宝塔面板登录、SSL、伪静态/固定链接、SSH 密钥）讲清楚。&lt;/p&gt;</summary>
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="建立网站教程" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E5%BB%BA%E7%AB%8B%E7%BD%91%E7%AB%99%E6%95%99%E7%A8%8B/"/>
    
    
    <category term="WordPress" scheme="https://humanfireworks-web.netlify.app/tags/WordPress/"/>
    
    <category term="阿里云" scheme="https://humanfireworks-web.netlify.app/tags/%E9%98%BF%E9%87%8C%E4%BA%91/"/>
    
    <category term="宝塔面板" scheme="https://humanfireworks-web.netlify.app/tags/%E5%AE%9D%E5%A1%94%E9%9D%A2%E6%9D%BF/"/>
    
    <category term="动态网站" scheme="https://humanfireworks-web.netlify.app/tags/%E5%8A%A8%E6%80%81%E7%BD%91%E7%AB%99/"/>
    
    <category term="建站" scheme="https://humanfireworks-web.netlify.app/tags/%E5%BB%BA%E7%AB%99/"/>
    
  </entry>
  
  <entry>
    <title>Twikoo 评论系统加载失败修复</title>
    <link href="https://humanfireworks-web.netlify.app/2026/devlogs/2026/01/twikoo-fix/"/>
    <id>https://humanfireworks-web.netlify.app/2026/devlogs/2026/01/twikoo-fix/</id>
    <published>2026-01-18T05:30:00.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<h3 id="2026-01-18-twikoo-评论系统加载失败修复"><a class="markdownIt-Anchor" href="#2026-01-18-twikoo-评论系统加载失败修复"></a> [2026-01-18] Twikoo 评论系统加载失败修复</h3><ul><li><strong>🔍 现象</strong>:<ul><li>博客文章底部的 Twikoo 评论区无法加载。</li><li>仅显示 “说些什么吧！” 提示语和 Twikoo 图标。</li><li>没有输入框和评论列表。</li></ul></li><li><strong>🧐 原因</strong>:<ul><li>主题配置文件 (<code>themes/twilight/_config.yml</code>) 中引用的 Twikoo 核心 JS 文件 CDN 链接失效 (404 Not Found)。</li><li>失效链接: <code>https://npm.elemecdn.com/twikoo@1.6.44/dist/twikoo.all.min.js</code></li></ul></li><li><strong>✅ 解决</strong>:<ul><li><strong>修改文件</strong>: <code>themes/twilight/_config.yml</code> (约第 715 行)</li><li><strong>操作</strong>: 将失效的 <code>elemecdn</code> 替换为稳定的 <code>jsDelivr</code> 源。</li><li><strong>代码变更</strong>:<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">twikoo:</span></span><br><span class="line">  <span class="comment"># src: https://npm.elemecdn.com/twikoo@1.6.44/dist/twikoo.all.min.js  &lt;-- 旧链接 (失效)</span></span><br><span class="line">  <span class="attr">src:</span> <span class="string">https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.all.min.js</span>  <span class="string">&lt;--</span> <span class="string">新链接</span> <span class="string">(可用)</span></span><br></pre></td></tr></table></figure></li></ul></li><li><strong>⚠️ 警示</strong>:<ul><li><strong>不要随意修改此 CDN 链接</strong>，除非确认新链接可用。</li><li>如果评论区再次消失，首先检查此 JS 文件链接是否能正常访问。</li></ul></li></ul>]]></content>
    
    
      
      
    <summary type="html">&lt;h3 id=&quot;2026-01-18-twikoo-评论系统加载失败修复&quot;&gt;&lt;a class=&quot;markdownIt-Anchor&quot; href=&quot;#2026-01-18-twikoo-评论系统加载失败修复&quot;&gt;&lt;/a&gt; [2026-01-18] Twikoo 评论系统加载失败修复&lt;</summary>
      
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="日志" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E6%97%A5%E5%BF%97/"/>
    
    
    <category term="Bug修复" scheme="https://humanfireworks-web.netlify.app/tags/Bug%E4%BF%AE%E5%A4%8D/"/>
    
    <category term="Twikoo" scheme="https://humanfireworks-web.netlify.app/tags/Twikoo/"/>
    
    <category term="故障排查" scheme="https://humanfireworks-web.netlify.app/tags/%E6%95%85%E9%9A%9C%E6%8E%92%E6%9F%A5/"/>
    
  </entry>
  
  <entry>
    <title>手把手教你部署 Hexo 静态博客到 GitHub Pages</title>
    <link href="https://humanfireworks-web.netlify.app/2026/articles/hexo-deployment-guide/"/>
    <id>https://humanfireworks-web.netlify.app/2026/articles/hexo-deployment-guide/</id>
    <published>2026-01-16T10:07:50.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<p>想拥有一个属于自己的个人博客吗？本文将手把手教你如何使用 Hexo 框架搭建静态博客，并免费部署到 GitHub Pages 上。</p><span id="more"></span><h2 id="1-环境准备"><a class="markdownIt-Anchor" href="#1-环境准备"></a> 1. 环境准备</h2><p>在开始之前，我们需要安装两个核心工具：Node.js 和 Git。</p><h3 id="11-安装-nodejs"><a class="markdownIt-Anchor" href="#11-安装-nodejs"></a> 1.1 安装 Node.js</h3><p>Hexo 是基于 Node.js 的，所以必须先安装它。</p><ul><li><strong>下载地址</strong>：<a href="https://nodejs.org/">Node.js 官网 (推荐下载 LTS 版本)</a></li><li><strong>验证安装</strong>：打开终端（cmd 或 PowerShell），输入以下命令：<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>如果有版本号输出（例如 <code>v18.x.x</code>），说明安装成功。</li></ul><h3 id="12-安装-git"><a class="markdownIt-Anchor" href="#12-安装-git"></a> 1.2 安装 Git</h3><p>Git 用于版本控制和将代码推送到 GitHub。</p><ul><li><strong>下载地址</strong>：<a href="https://git-scm.com/downloads">Git 官网</a></li><li><strong>验证安装</strong>：<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br></pre></td></tr></table></figure></li></ul><h3 id="13-配置-git-用户信息重要"><a class="markdownIt-Anchor" href="#13-配置-git-用户信息重要"></a> 1.3 配置 Git 用户信息（重要）</h3><p>安装完 Git 后，必须配置用户名和邮箱，否则无法提交代码。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">&quot;你的GitHub用户名&quot;</span></span><br><span class="line">git config --global user.email <span class="string">&quot;你的GitHub注册邮箱&quot;</span></span><br></pre></td></tr></table></figure><hr /><h2 id="2-准备-github-仓库与-ssh-key"><a class="markdownIt-Anchor" href="#2-准备-github-仓库与-ssh-key"></a> 2. 准备 GitHub 仓库与 SSH Key</h2><h3 id="21-创建仓库"><a class="markdownIt-Anchor" href="#21-创建仓库"></a> 2.1 创建仓库</h3><ol><li>注册并登录 <a href="https://github.com/">GitHub</a>。</li><li>点击右上角的 <code>+</code> 号，选择 <strong>New repository</strong>。</li><li><strong>Repository name</strong>（关键）：必须填写为 <code>你的用户名.github.io</code>。<ul><li>例如：如果你的用户名是 <code>firefly</code>，仓库名必须是 <code>firefly.github.io</code>。</li><li><em>注意：必须完全匹配，大小写最好也一致。</em></li></ul></li><li>选择 <strong>Public</strong>（公开）。</li><li>建议勾选 <strong>Add a README file</strong>（初始化仓库）。</li><li>点击 <strong>Create repository</strong>。</li></ol><h3 id="22-配置-ssh-key"><a class="markdownIt-Anchor" href="#22-配置-ssh-key"></a> 2.2 配置 SSH Key</h3><p>为了让你的电脑能安全地向 GitHub 推送代码，我们需要配置 SSH 密钥。</p><ol><li><p><strong>生成密钥</strong>：<br />在终端（或 Git Bash）中输入以下命令（替换为你注册 GitHub 的邮箱）：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t ed25519 -C <span class="string">&quot;your_email@example.com&quot;</span></span><br></pre></td></tr></table></figure><p>出现提示时一直按回车即可。</p></li><li><p><strong>获取公钥</strong>：<br />找到生成的公钥文件（通常在 <code>C:\Users\你的用户名\.ssh\id_ed25519.pub</code> 或 <code>id_rsa.pub</code>），用记事本打开并复制里面的内容。<br />或者在终端使用命令查看：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Windows PowerShell</span></span><br><span class="line"><span class="built_in">cat</span> ~/.ssh/id_ed25519.pub</span><br></pre></td></tr></table></figure></li><li><p><strong>添加到 GitHub</strong>：</p><ul><li>进入 GitHub -&gt; 点击右上角头像 -&gt; <strong>Settings</strong>。</li><li>点击左侧 <strong>SSH and GPG keys</strong> -&gt; <strong>New SSH key</strong>。</li><li><strong>Title</strong> 随便填（如 <code>My Laptop</code>），<strong>Key</strong> 粘贴刚才复制的内容。</li><li>点击 <strong>Add SSH key</strong>。</li></ul></li><li><p><strong>验证连接</strong>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@github.com</span><br></pre></td></tr></table></figure><p>输入 <code>yes</code> 确认指纹。如果看到 <code>Hi username! You've successfully authenticated...</code>，说明配置成功。</p></li></ol><hr /><h2 id="3-安装与初始化-hexo"><a class="markdownIt-Anchor" href="#3-安装与初始化-hexo"></a> 3. 安装与初始化 Hexo</h2><p>接下来我们在本地创建博客。</p><ol><li><p><strong>安装 Hexo CLI</strong>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure></li><li><p><strong>初始化博客</strong>：<br />找一个文件夹（例如 <code>F:\MyBlog</code>），在此处打开终端（Shift + 右键 -&gt; 在此处打开 PowerShell 窗口），执行：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo init blog</span><br><span class="line"><span class="built_in">cd</span> blog</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure><p><em>提示：如果报错权限不足，请尝试以管理员身份运行终端。</em></p></li><li><p><strong>本地预览</strong>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo server</span><br><span class="line"><span class="comment"># 或者简写为</span></span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure><p>打开浏览器访问 <code>http://localhost:4000</code>，你应该能看到默认的 Hexo 页面了。按 <code>Ctrl + C</code> 停止服务。</p></li></ol><hr /><h2 id="4-更换主题"><a class="markdownIt-Anchor" href="#4-更换主题"></a> 4. 更换主题</h2><p>默认主题比较简单，我们可以更换为更好看的主题（例如 Reimu）。</p><ol><li><p><strong>下载主题</strong>：<br />在博客根目录下运行：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/D-Sketon/hexo-theme-reimu.git themes/reimu</span><br></pre></td></tr></table></figure></li><li><p><strong>启用主题</strong>：<br />打开博客根目录下的 <code>_config.yml</code> 文件，找到 <code>theme</code> 字段，修改为：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">reimu</span></span><br></pre></td></tr></table></figure></li></ol><hr /><h2 id="5-部署到-github-关键步骤"><a class="markdownIt-Anchor" href="#5-部署到-github-关键步骤"></a> 5. 部署到 GitHub (关键步骤)</h2><p>最后一步，将博客发布到互联网！为了防止源码丢失，我们采用 <strong>源码与静态页面分离</strong> 的策略。</p><h3 id="51-安装部署插件"><a class="markdownIt-Anchor" href="#51-安装部署插件"></a> 5.1 安装部署插件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><h3 id="52-配置部署信息"><a class="markdownIt-Anchor" href="#52-配置部署信息"></a> 5.2 配置部署信息</h3><p>打开根目录下的 <code>_config.yml</code>，拉到最底部，修改 <code>deploy</code> 部分。<br /><strong>建议使用 <code>gh-pages</code> 分支部署静态页面</strong>，这样不会覆盖仓库里的源码（如果以后你把源码也传上去的话）。</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">git@github.com:你的用户名/你的用户名.github.io.git</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">gh-pages</span>  <span class="comment"># 推荐推送到 gh-pages 分支</span></span><br></pre></td></tr></table></figure><p><em>注意：请将 <code>你的用户名</code> 替换为你实际的 GitHub 用户名。</em></p><h3 id="53-一键部署"><a class="markdownIt-Anchor" href="#53-一键部署"></a> 5.3 一键部署</h3><p>执行以下命令三连：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean    <span class="comment"># 清除缓存</span></span><br><span class="line">hexo generate <span class="comment"># 生成静态文件 (简写 hexo g)</span></span><br><span class="line">hexo deploy   <span class="comment"># 部署到 GitHub (简写 hexo d)</span></span><br></pre></td></tr></table></figure><h3 id="54-开启-github-pages"><a class="markdownIt-Anchor" href="#54-开启-github-pages"></a> 5.4 开启 GitHub Pages</h3><p>部署成功后，还需要告诉 GitHub 从哪个分支展示网页。</p><ol><li>回到你的 GitHub 仓库页面。</li><li>点击上方的 <strong>Settings</strong> (设置)。</li><li>在左侧菜单栏找到 <strong>Pages</strong>。</li><li>在 <strong>Build and deployment</strong> 下的 <strong>Source</strong>，选择 <code>Deploy from a branch</code>。</li><li>在 <strong>Branch</strong> 选项里，选择 <strong>gh-pages</strong> 分支，目录选 <code>/(root)</code>，然后点击 <strong>Save</strong>。</li><li>稍等几分钟（顶部会显示 “Your site is live at…”），此时再访问 <code>https://你的用户名.github.io</code>，你的博客就上线啦！</li></ol><hr /><h2 id="常用命令速查"><a class="markdownIt-Anchor" href="#常用命令速查"></a> 常用命令速查</h2><table><thead><tr><th style="text-align:left">命令</th><th style="text-align:left">简写</th><th style="text-align:left">说明</th></tr></thead><tbody><tr><td style="text-align:left"><code>hexo server</code></td><td style="text-align:left"><code>hexo s</code></td><td style="text-align:left">启动本地预览</td></tr><tr><td style="text-align:left"><code>hexo generate</code></td><td style="text-align:left"><code>hexo g</code></td><td style="text-align:left">生成静态文件</td></tr><tr><td style="text-align:left"><code>hexo deploy</code></td><td style="text-align:left"><code>hexo d</code></td><td style="text-align:left">部署到远程</td></tr><tr><td style="text-align:left"><code>hexo clean</code></td><td style="text-align:left"><code>hexo cl</code></td><td style="text-align:left">清理缓存（遇到问题时先执行这个）</td></tr><tr><td style="text-align:left"><code>hexo new &quot;文章标题&quot;</code></td><td style="text-align:left"><code>hexo n</code></td><td style="text-align:left">新建文章</td></tr></tbody></table><p>希望这篇教程能帮到你，快去搭建属于你的个人博客吧！</p>]]></content>
    
    
    <summary type="html">&lt;p&gt;想拥有一个属于自己的个人博客吗？本文将手把手教你如何使用 Hexo 框架搭建静态博客，并免费部署到 GitHub Pages 上。&lt;/p&gt;</summary>
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="建立网站教程" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E5%BB%BA%E7%AB%8B%E7%BD%91%E7%AB%99%E6%95%99%E7%A8%8B/"/>
    
    
    <category term="Hexo" scheme="https://humanfireworks-web.netlify.app/tags/Hexo/"/>
    
    <category term="GitHub" scheme="https://humanfireworks-web.netlify.app/tags/GitHub/"/>
    
    <category term="教程" scheme="https://humanfireworks-web.netlify.app/tags/%E6%95%99%E7%A8%8B/"/>
    
    <category term="博客搭建" scheme="https://humanfireworks-web.netlify.app/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"/>
    
  </entry>
  
  <entry>
    <title>Vercel 自动化部署标准流程备忘录</title>
    <link href="https://humanfireworks-web.netlify.app/2025/articles/vercel-deploy-memo/"/>
    <id>https://humanfireworks-web.netlify.app/2025/articles/vercel-deploy-memo/</id>
    <published>2025-12-25T13:44:21.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<p>这份指南用来搭建 Hexo 博客，可以把博客搭建到 Vercel，和 Netlify 平台，实现自动部署。</p><h2 id="一-核心原理"><a class="markdownIt-Anchor" href="#一-核心原理"></a> 一、 核心原理</h2><p><strong>摒弃旧思维</strong>：不要手动执行 <code>hexo g</code> 生成 <code>public</code> 文件夹，更不要手动上传 <code>public</code> 文件夹。<br /><strong>拥抱 CI/CD</strong>：我们只需要维护“源代码”，部署工作交给云端。</p><p>流程如下：</p><ol><li><strong>你</strong>：写文章 -&gt; <code>git push</code> 源代码到 GitHub。</li><li><strong>Vercel</strong>：监测到 GitHub 仓库更新 -&gt; 拉取最新源码 -&gt; 自动执行 <code>hexo generate</code> -&gt; 将生成的 <code>public</code> 目录发布到全球节点。</li></ol><h2 id="二-首次部署检查清单-配置篇"><a class="markdownIt-Anchor" href="#二-首次部署检查清单-配置篇"></a> 二、 首次部署检查清单 (配置篇)</h2><p>在上传代码前，请确保项目里_config.yml和_config_reimu.yml这两个文件配置正确，否则会出现“只有文字没样式”或者上传失败等问题，意思就是要把源代码上传到 GitHub 仓库，而不是用hexo 上传public 文件.</p><h3 id="1-检查-_configyml-站点配置文件"><a class="markdownIt-Anchor" href="#1-检查-_configyml-站点配置文件"></a> 1. 检查 _config.yml (站点配置文件)</h3><p>Root 路径：必须设为 /，除非你的博客在子目录。</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">url:</span> <span class="string">`https://你的域名.vercel.app`</span>   <span class="comment"># 这里填Vercel分配的域名，或者留空</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/</span>                         <span class="comment"># 关键！必须是斜杠</span></span><br></pre></td></tr></table></figure><h3 id="2-检查-packagejson-确保云端有环境"><a class="markdownIt-Anchor" href="#2-检查-packagejson-确保云端有环境"></a> 2. 检查 package.json (确保云端有环境)</h3><p>Vercel 的服务器是空的，它需要根据 <code>package.json</code> 安装 Hexo。<br /><strong>关键点</strong>：确保 <code>dependencies</code> 或 <code>devDependencies</code> 里包含 <code>hexo</code> 及相关渲染插件。</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo-site&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;private&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;build&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo generate&quot;</span><span class="punctuation">,</span>  <span class="comment">// 必须有这个命令</span></span><br><span class="line">    <span class="attr">&quot;clean&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo clean&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;server&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo server&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;dependencies&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;hexo&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^6.0.0&quot;</span><span class="punctuation">,</span>          <span class="comment">// 必须有！不能只在本地全局安装</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-archive&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-category&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-index&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-tag&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-ejs&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-stylus&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-marked&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-theme-landscape&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^0.0.3&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><p><em>提示：如果缺失依赖，可以在本地运行 <code>npm install hexo --save</code> 来添加到文件里。</em></p><h3 id="3-检查-_configyml-站点配置"><a class="markdownIt-Anchor" href="#3-检查-_configyml-站点配置"></a> 3. 检查 _config.yml (站点配置)</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">url:</span> <span class="string">https://your-blog.vercel.app</span>  <span class="comment"># 建议填 Vercel 分配的域名或自定义域名</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/</span>                            <span class="comment"># 必须是斜杠</span></span><br></pre></td></tr></table></figure><h2 id="三-vercel-项目设置-首次配置"><a class="markdownIt-Anchor" href="#三-vercel-项目设置-首次配置"></a> 三、 Vercel 项目设置 (首次配置)</h2><p>在 Vercel 导入 GitHub 项目时，注意以下设置：</p><ol><li><strong>Framework Preset</strong>: 选 <code>Hexo</code>。</li><li><strong>Build Command</strong>: <code>hexo generate</code> (默认即可)。</li><li><strong>Output Directory</strong>: <code>public</code> (默认即可)。</li><li><strong>Node.js Version</strong> (重要):<ul><li>在 Settings -&gt; General -&gt; Node.js Version 中查看。</li><li>建议选择 <code>18.x</code> 或 <code>20.x</code> (LTS版本)。</li><li><em>注意：如果你的 Hexo 版本很老（如 3.x/4.x），可能需要降级 Node 版本到 14.x/16.x，但强烈建议升级 Hexo。</em></li></ul></li></ol><h2 id="四-日常更新流程-操作篇"><a class="markdownIt-Anchor" href="#四-日常更新流程-操作篇"></a> 四、 日常更新流程 (操作篇)</h2><p>当你写完新文章或修改了配置，只需要做这三步，Vercel 会自动处理剩下的事情。</p><h3 id="第一步本地预览可选"><a class="markdownIt-Anchor" href="#第一步本地预览可选"></a> 第一步：本地预览（可选）</h3><p>先在本地看看效果对不对，防止把错误推送到线上。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo s</span><br><span class="line"><span class="comment"># 浏览器打开 localhost:4000 确认无误后，按 Ctrl+C 停止</span></span><br></pre></td></tr></table></figure><h3 id="第二步提交代码到-github"><a class="markdownIt-Anchor" href="#第二步提交代码到-github"></a> 第二步：提交代码到 GitHub</h3><p>注意：不需要执行 hexo g 生成静态文件，直接提交源码即可。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git status  <span class="comment"># 确认所有文件都被添加</span></span><br><span class="line">git add .   <span class="comment"># 添加所有修改过的文件</span></span><br><span class="line">git commit -m <span class="string">&quot;更新了一篇新文章: 文章标题&quot;</span>  <span class="comment"># 提交修改，文章标题替换为你实际的文章标题</span></span><br><span class="line">git push    <span class="comment"># 推送到 GitHub 仓库</span></span><br></pre></td></tr></table></figure><p>也可以在vscode的git 插件里直接提交代码，十分方便。</p><h3 id="第三步喝杯茶等待自动更新-️"><a class="markdownIt-Anchor" href="#第三步喝杯茶等待自动更新-️"></a> 第三步：喝杯茶，等待自动更新 ☕️</h3><p>当你执行完 git push 后，Vercel 会在 1-2 分钟内自动检测到，并开始构建。</p><p>你可以访问你的网址查看更新。</p><h2 id="四-vercel-后台设置备忘-如果需要重新建项目"><a class="markdownIt-Anchor" href="#四-vercel-后台设置备忘-如果需要重新建项目"></a> 四、 Vercel 后台设置备忘 (如果需要重新建项目)</h2><p>如果你以后删除了项目要重新部署，请记住最关键的 “Build &amp; Development Settings”：</p><h3 id="framework-preset-框架预设"><a class="markdownIt-Anchor" href="#framework-preset-框架预设"></a> Framework Preset (框架预设):</h3><p>选 Hexo (如果没有 Hexo 选项，选 Other 也可以)。</p><h3 id="build-command-构建命令"><a class="markdownIt-Anchor" href="#build-command-构建命令"></a> Build Command (构建命令):</h3><p>填 hexo generate (或者 npm run build)。</p><h3 id="output-directory-输出目录-最容易出错的地方"><a class="markdownIt-Anchor" href="#output-directory-输出目录-最容易出错的地方"></a> Output Directory (输出目录) [最容易出错的地方]:</h3><ul><li>Hexo 项目必须填：public</li><li>Vue/Vite 项目填：dist</li></ul><h3 id="environment-variables-环境变量"><a class="markdownIt-Anchor" href="#environment-variables-环境变量"></a> Environment Variables (环境变量):</h3><p>如果有用到特殊插件需要 Token，记得在这里配置。</p><h2 id="五-常见故障自救"><a class="markdownIt-Anchor" href="#五-常见故障自救"></a> 五、 常见故障自救</h2><table><thead><tr><th>现象</th><th>可能原因</th><th>解决方法</th></tr></thead><tbody><tr><td>页面只有文字，没有样式</td><td>1. 输出目录配置错<br>2. _config.yml 里 root 不是 /</td><td>检查 Vercel 的 Output Directory 是否为 public。</td></tr><tr><td>文章没更新</td><td>你可能只在本地生成了，没 Push 源码</td><td>确保执行了 git push。</td></tr><tr><td>Vercel 构建报错 (Build Failed)</td><td>缺少依赖</td><td>检查 package.json 里是否有 hexo 和相关插件，重新 npm install 再推。</td></tr><tr><td>图片加载不出来</td><td>路径大小写问题</td><td>Windows 不区分大小写，但 Linux (Vercel) 区分。检查图片文件名大小写是否完全一致。</td></tr></tbody></table><h2 id="祝你的博客运营顺利"><a class="markdownIt-Anchor" href="#祝你的博客运营顺利"></a> 祝你的博客运营顺利！</h2>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;这份指南用来搭建 Hexo 博客，可以把博客搭建到 Vercel，和 Netlify 平台，实现自动部署。&lt;/p&gt;
&lt;h2 id=&quot;一-核心原理&quot;&gt;&lt;a class=&quot;markdownIt-Anchor&quot; href=&quot;#一-核心原理&quot;&gt;&lt;/a&gt; 一、 核心原理&lt;/h2&gt;
&lt;</summary>
      
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="建立网站教程" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E5%BB%BA%E7%AB%8B%E7%BD%91%E7%AB%99%E6%95%99%E7%A8%8B/"/>
    
    
    <category term="Hexo" scheme="https://humanfireworks-web.netlify.app/tags/Hexo/"/>
    
    <category term="Vercel" scheme="https://humanfireworks-web.netlify.app/tags/Vercel/"/>
    
    <category term="部署" scheme="https://humanfireworks-web.netlify.app/tags/%E9%83%A8%E7%BD%B2/"/>
    
  </entry>
  
  <entry>
    <title>PID控制实验室 - 交互式无人机高度模拟器</title>
    <link href="https://humanfireworks-web.netlify.app/2025/articles/pid-control-lab/"/>
    <id>https://humanfireworks-web.netlify.app/2025/articles/pid-control-lab/</id>
    <published>2025-11-22T08:30:00.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<h1 id="pid控制实验室-交互式无人机高度模拟器"><a class="markdownIt-Anchor" href="#pid控制实验室-交互式无人机高度模拟器"></a> PID控制实验室 - 交互式无人机高度模拟器</h1><p>今天我向大家分享一个交互式PID控制模拟器，这个工具可以帮助理解PID控制器的工作原理，通过模拟无人机高度控制来直观展示控制系统的响应特性。</p><h2 id="什么是pid控制"><a class="markdownIt-Anchor" href="#什么是pid控制"></a> 什么是PID控制？</h2><p>PID控制是最常见的控制算法之一，广泛应用于工业控制、机器人、无人机等领域。PID由三个部分组成：</p><ul><li><strong>比例（P）</strong>：根据当前误差的大小进行控制</li><li><strong>积分（I）</strong>：根据历史误差的累积进行控制</li><li><strong>微分（D）</strong>：根据误差的变化率进行控制</li></ul><p>通过合理调整这三个参数，可以实现对系统的精确控制。</p><h2 id="模拟器功能"><a class="markdownIt-Anchor" href="#模拟器功能"></a> 模拟器功能</h2><p>这个交互式模拟器提供了以下功能：</p><ol><li><strong>实时物理模拟</strong>：基于真实物理引擎的无人机高度控制模拟</li><li><strong>参数调节</strong>：可以实时调整Kp、Ki、Kd参数，观察系统响应变化</li><li><strong>可视化反馈</strong>：通过动画和图表直观展示控制效果</li><li><strong>AI助手</strong>：集成AI助手，提供PID控制原理的解释和建议</li></ol><h2 id="如何使用"><a class="markdownIt-Anchor" href="#如何使用"></a> 如何使用</h2><ol><li>访问 <a href="/pid-lab/index.html">PID控制实验室</a></li><li>调整PID参数（Kp、Ki、Kd）</li><li>点击&quot;开始&quot;按钮启动模拟</li><li>观察无人机如何响应控制指令，尝试达到目标高度</li><li>通过图表分析系统响应特性</li></ol><h2 id="参数调节建议"><a class="markdownIt-Anchor" href="#参数调节建议"></a> 参数调节建议</h2><ul><li><strong>Kp（比例增益）</strong>：增大Kp会加快系统响应，但可能导致超调和振荡</li><li><strong>Ki（积分增益）</strong>：Ki用于消除稳态误差，但过大会导致系统不稳定</li><li><strong>Kd（微分增益）</strong>：Kd可以抑制超调，提高系统稳定性，但对噪声敏感</li></ul><h2 id="教育价值"><a class="markdownIt-Anchor" href="#教育价值"></a> 教育价值</h2><p>这个模拟器非常适合：</p><ul><li>控制理论课程的教学演示</li><li>自学PID控制原理</li><li>工程师调试PID参数的参考</li><li>对控制系统感兴趣的初学者</li></ul><h2 id="技术实现"><a class="markdownIt-Anchor" href="#技术实现"></a> 技术实现</h2><p>该模拟器使用以下技术栈：</p><ul><li><strong>前端框架</strong>：React + TypeScript</li><li><strong>构建工具</strong>：Vite</li><li><strong>可视化</strong>：自定义Canvas动画 + Recharts图表库</li><li><strong>AI集成</strong>：Google Gemini API</li></ul><h2 id="未来计划"><a class="markdownIt-Anchor" href="#未来计划"></a> 未来计划</h2><p>未来我计划添加更多功能：</p><ul><li>支持更多控制对象（温度、速度等）</li><li>添加更多控制算法（LQR、模糊控制等）</li><li>提供预设场景和挑战</li><li>添加参数自动调优功能</li></ul><p>希望这个工具能够帮助大家更好地理解PID控制原理！如果有任何问题或建议，欢迎在评论区留言。</p><hr /><blockquote><p><strong>在线体验</strong>：<a href="/pid-lab/index.html">PID控制实验室</a></p></blockquote>]]></content>
    
    
      
      
    <summary type="html">&lt;h1 id=&quot;pid控制实验室-交互式无人机高度模拟器&quot;&gt;&lt;a class=&quot;markdownIt-Anchor&quot; href=&quot;#pid控制实验室-交互式无人机高度模拟器&quot;&gt;&lt;/a&gt; PID控制实验室 - 交互式无人机高度模拟器&lt;/h1&gt;
&lt;p&gt;今天我向大家分享一个交互式PID</summary>
      
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="技术工具" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E6%8A%80%E6%9C%AF%E5%B7%A5%E5%85%B7/"/>
    
    
    <category term="PID控制" scheme="https://humanfireworks-web.netlify.app/tags/PID%E6%8E%A7%E5%88%B6/"/>
    
    <category term="交互式模拟" scheme="https://humanfireworks-web.netlify.app/tags/%E4%BA%A4%E4%BA%92%E5%BC%8F%E6%A8%A1%E6%8B%9F/"/>
    
    <category term="控制理论" scheme="https://humanfireworks-web.netlify.app/tags/%E6%8E%A7%E5%88%B6%E7%90%86%E8%AE%BA/"/>
    
    <category term="教育工具" scheme="https://humanfireworks-web.netlify.app/tags/%E6%95%99%E8%82%B2%E5%B7%A5%E5%85%B7/"/>
    
    <category term="无人机" scheme="https://humanfireworks-web.netlify.app/tags/%E6%97%A0%E4%BA%BA%E6%9C%BA/"/>
    
  </entry>
  
  <entry>
    <title>人总在接近幸福时倍感幸福，在幸福进行时患得患失</title>
    <link href="https://humanfireworks-web.netlify.app/2025/articles/happiness-approach/"/>
    <id>https://humanfireworks-web.netlify.app/2025/articles/happiness-approach/</id>
    <published>2025-10-20T07:30:00.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<p>当《寻她芳踪》的终章咏叹在歌剧院穹顶之下如水银般流淌、盘旋，直至最终归于寂静，我依然被那股巨大的情感涡流裹挟，久久无法回到现实的坐席。那旋律，像一把钥匙，没有开启任何未来的门，却撬开了记忆的锈锁。刹那间，我仿佛不再是衣冠楚楚地端坐于此的成年人，而是变回了那个在夏日炽风中，嗅着塑胶跑道被阳光炙烤出独特气息的少年。</p><p>都说，人无法在当下真正知晓某一刻的价值，直到它被时间酿成一杯或甘或苦的回忆。而那句反复被验证的谶语，此刻也随着音乐的余波，在我心中激起回响：“人总是在接近幸福时倍感幸福，在幸福进行时却又患得患失。”</p><p>是的，回忆是一场无声的放映。</p><p>那是一个怎样的夏日午后？天空是洗净的蓝，没有一丝云的遮拦，阳光便毫无顾忌地倾泻下来，将整个世界照得通明，甚至有些刺眼。高中的操场，说大不大，说小不小，却像一个浓缩的青春剧场。几个班级的体育课被排在同一时段，于是这片小小的天地里，便上演着泾渭分明而又彼此交织的剧目。</p><p>舞台的中央，永远属于那群不知疲倦的&quot;疯子&quot;。他们是光之子，是风的宠儿，在滚烫的跑道上疾驰而过，大口喘息着，任由汗水从额角滑落，在脸颊上冲刷出闪亮的沟壑，最终在空中划出一道道晶莹的弧线，献祭给这片灼热的土地。那是一种蛮横的、不讲道理的生命力，种独属于青春的、近乎奢侈的挥霍。他们奔跑，似乎不是为了抵达任何终点，奔跑本身，就是意义的全部。</p><p>而我，以及大多数的我们，则是舞台边缘的&quot;背景板&quot;。在体育老师那句公式化的&quot;自由活动，注意安全&quot;之后，便如获得特赦令般四散开来，不约而同地寻觅着教学楼或看台投下的那片狭长阴影。我们靠着墙，坐在冰凉的台阶上，以一种与年龄不符的倦怠姿态，沉默地观望着那片阳光下的热烈。或许是做不完的试卷和背不完的公式偷走了我们的精力，又或许是少年时代无端的愁绪，让我们提前品尝到了某种成年人的疲惫。我们像一群提前进入休眠状态的植物，静默着，无精打采，与那些奔跑的身影构成了操场上最鲜明的对比。</p><p>我就在那片阴影的庇护下，从帆布袋子里，掏出了一本封面已经有些卷边的《挪威的森林》。那时的我，多么可笑啊，总觉得捧着一本村上春树，便能为自己那空洞的青春增添几分与众不同的质感。我模仿着书评里的语气，假装被某种深邃的孤独击中，蹙眉思考那些当时对我而言不过是印刷符号的句子。如今想来，那份故作深沉的姿态，不过是一场笨拙的自我表演。</p><p>文字的殿堂，需要用阅历的钥匙才能开启。没有在深夜痛哭过的人，如何能理解渡边彻那句&quot;死并非生的对立面，而是作为生的一部分永存&quot;？没有经历过爱与失去的拉扯，又怎能体会直子那如雾般脆弱而又令人心碎的美？那时的我，读不懂，只觉得索然无味，像是在品尝一道未加任何调料的菜肴。</p><p>直到多年以后，当我真正独自面对生活的旷野，才在某个不眠的深夜，忽然被书中的句子狠狠击中：</p><p>“我经常不敢相信自己已经二十多岁了，身边的人都在往前走，恋爱，工作，谈婚论嫁，只有我好像还停留在十年前的时光里，喜怒哀乐仍然在我的脸上，时间让我长了年岁，却没有让我成为一个合格的大人。”</p><p>“我以为我二十多岁，会去看山河大海，落日余晖，没想到到了谈婚论嫁的年龄，我还在找自己的路上。”</p><p>是的，没有足够的伤痕与迷惘，不足以读懂成长；没有用双脚丈量过孤独的旅程，不足以读懂人生。读懂一本书，原来真的需要用掉小半生，甚至是一生。</p><p>这也解释了为何，我从一个热衷于向身边人推荐书籍的文学青年，变成了一个沉默的阅读者。我渐渐明白，思想的超前，未必是件好事。当你的认知已经抵达了远方，而你的双脚却仍被禁锢在原地时，一种巨大的撕裂感便会随之而来。人，会轻易地陷入一种精致的虚无主义一看山不是山，看水不是水，觉得一切奋斗都渺茫，一切热情都可笑，所做皆无意义。</p><p>但世界并非如此冰冷而抽象的哲学命题。你终究要用你自己的体温，去触碰这个世界的真实。你要用你自己的眼睛，去遇见一些事，去认识一些人，去经历，去受伤，去将那些书本上的道理，内化成自己肌肤的记忆。</p><p>所以，不妨让自己变得纯粹一些，甚至，&quot;笨拙&quot;一些吧。</p><p>去认真地看一朵花是如何在寂静的清晨，舒展它被露水打湿的每一片花瓣；去耐心听一条溪流是如何在蜿蜒的山谷里，吟唱着它亘古不变的歌谣。在外界看来，这样的人或许与傻子无异，他们错过了太多&quot;有用&quot;的信息和&quot;高效&quot;的社交。但人之为人，总要有一些看似无用的坚持吧，那些不为任何功利目的，只为内心片刻安宁的&quot;笨拙&quot;，才是我们对抗世界坚硬外壳的柔软铠甲。</p><p>这么多年走过来，来自外界的评价从未停歇。朋友善意地提醒我&quot;不要总活在自己的世界里&quot;，亲人担忧地劝我&quot;要更合群一些&quot;。这些声音，曾让我一度怀疑自己。但当我独自一人时，我清晰地听见内心的回响：沉浸在自己的世界里，又有什么不好？</p><p>那不是一座与世隔绝的孤岛，而是我的精神庇护所，是我的秘密花园。在那里，我得以与真实的自己对话，厘清纷乱的思绪，确认内心真正的渴望与价值排序。当我清楚地知道自己需要什么。外界的评价，便也如风过无痕，于我无关紧要了。</p><p>路，或许依旧很远，仿佛歌剧中那永无止境的寻觅。但只要双脚依然踏在路上，每一步，都是对虚无主义最有力的反击。行走本身，便是抵达。</p><p>歌剧院的灯光再次亮起，将我从回忆的深海中打捞上岸。掌声雷动，而我却在想，那些在夏日跑道上肆意挥洒汗水的&quot;疯子&quot;们，他们后来又奔向了何方？他们是否也曾在幸福中患得患失，在迷惘中寻找方向？</p><p>或许，我们每个人，终其一生，都在上演着一出属于自己的《寻她芳踪》。我们寻找的，是远方，是理想，是那个在时间的洪流中，被我们不经意间遗落的、最本真的自己。而那些被我们忽略的、稍纵即逝的幸福瞬间，终将会在未来的某一天，化作夜空中最温柔的星辰，在我们回望时，照亮来时的路。</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;当《寻她芳踪》的终章咏叹在歌剧院穹顶之下如水银般流淌、盘旋，直至最终归于寂静，我依然被那股巨大的情感涡流裹挟，久久无法回到现实的坐席。那旋律，像一把钥匙，没有开启任何未来的门，却撬开了记忆的锈锁。刹那间，我仿佛不再是衣冠楚楚地端坐于此的成年人，而是变回了那个在夏日炽风中，嗅</summary>
      
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="情感杂谈" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E6%83%85%E6%84%9F%E6%9D%82%E8%B0%88/"/>
    
    
    <category term="人生感悟" scheme="https://humanfireworks-web.netlify.app/tags/%E4%BA%BA%E7%94%9F%E6%84%9F%E6%82%9F/"/>
    
    <category term="青春回忆" scheme="https://humanfireworks-web.netlify.app/tags/%E9%9D%92%E6%98%A5%E5%9B%9E%E5%BF%86/"/>
    
    <category term="文学随笔" scheme="https://humanfireworks-web.netlify.app/tags/%E6%96%87%E5%AD%A6%E9%9A%8F%E7%AC%94/"/>
    
    <category term="成长思考" scheme="https://humanfireworks-web.netlify.app/tags/%E6%88%90%E9%95%BF%E6%80%9D%E8%80%83/"/>
    
  </entry>
  
  <entry>
    <title>Hello World</title>
    <link href="https://humanfireworks-web.netlify.app/2025/articles/hello-world/"/>
    <id>https://humanfireworks-web.netlify.app/2025/articles/hello-world/</id>
    <published>2025-08-24T07:30:00.000Z</published>
    <updated>2026-01-22T15:28:08.995Z</updated>
    
    <content type="html"><![CDATA[<h1 id="我是谁"><a class="markdownIt-Anchor" href="#我是谁"></a> 我是谁？</h1><p>我是 墓葬未亡人（Unwound Person）</p><h1 id="关于我"><a class="markdownIt-Anchor" href="#关于我"></a> 关于我：</h1><p>主修： 自动化 (Automation)<br />热衷： Blender / 独立游戏开发 / 叙事艺术 / 嵌入式<br />状态： Leveling Up…</p><p>我不试图变得从容，我只试图保持真实。<br />在这个博客里，你不会看到完美的大神教程，只会看到一个“懂代码的准艺术家”是如何在 Bug 和模型布线中，一步步构建出心中理想国的。<br />目标是成为一名“一人军队”的独立游戏制作人。（开玩笑的，博主就是一个爱幻想的普通人）</p><h2 id="加油吧少年"><a class="markdownIt-Anchor" href="#加油吧少年"></a> 加油吧！少年。</h2>]]></content>
    
    
      
      
    <summary type="html">&lt;h1 id=&quot;我是谁&quot;&gt;&lt;a class=&quot;markdownIt-Anchor&quot; href=&quot;#我是谁&quot;&gt;&lt;/a&gt; 我是谁？&lt;/h1&gt;
&lt;p&gt;我是 墓葬未亡人（Unwound Person）&lt;/p&gt;
&lt;h1 id=&quot;关于我&quot;&gt;&lt;a class=&quot;markdownIt-Ancho</summary>
      
    
    
    
    <category term="文章" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/"/>
    
    <category term="日志" scheme="https://humanfireworks-web.netlify.app/categories/%E6%96%87%E7%AB%A0/%E6%97%A5%E5%BF%97/"/>
    
    
  </entry>
  
</feed>
