🏠 个人网站搭建与部署规划
<p class="subtitle">从 GitHub Pages 静态站迁移到阿里云完整网站 | 2026-03-21</p>
<div class="info">
<div class="info-title">📋 目录</div>
<ul>
<li><a href="#why" style="color:#60a5fa;">为什么不再适合用 GitHub Pages？</a></li>
<li><a href="#goals" style="color:#60a5fa;">新网站要实现什么？</a></li>
<li><a href="#stack" style="color:#60a5fa;">技术选型</a></li>
<li><a href="#architecture" style="color:#60a5fa;">系统架构</a></li>
<li><a href="#phases" style="color:#60a5fa;">实施计划（分阶段）</a></li>
<li><a href="#domain" style="color:#60a5fa;">域名与 HTTPS</a></li>
<li><a href="#deploy" style="color:#60a5fa;">部署流程</a></li>
<li><a href="#workflow" style="color:#60a5fa;">日常工作流</a></li>
</ul>
</div>
<!-- ============ 为什么不用 GitHub Pages ============ -->
<h2 id="why">🤔 为什么不再适合用 GitHub Pages？</h2>
<div class="section">
<p>GitHub Pages 很好，但它是为<strong>纯静态内容</strong>设计的。随着我们的需求增长，它的局限性越来越明显：</p>
</div>
<div class="warning">
<div class="warning-title">⚠️ GitHub Pages 的局限</div>
<ul>
<li>❌ <strong>无法运行后端代码</strong> — 没法做任务看板的动态交互、API 调用</li>
<li>❌ <strong>无法做服务端渲染</strong> — SEO 和性能都受限</li>
<li>❌ <strong>无法实现认证授权</strong> — 没法做登录、个人数据保护</li>
<li>❌ <strong>无法长连接</strong> — WebSocket、实时通知都做不了</li>
<li>❌ <strong>提交-等待-刷新</strong> — 每次改动都要 git push，网络不好时很痛苦</li>
</ul>
</div>
<div class="success">
<div class="success-title">✅ 迁移到自有服务器的优势</div>
<ul>
<li>完整的 Linux 环境，想装什么装什么</li>
<li>本地编辑，即时预览，效率更高</li>
<li>支持任何后端技术（Node.js / Python / Go / Rust）</li>
<li>可以跑定时任务、守护进程</li>
<li>真正的域名 + HTTPS + 企业邮箱</li>
<li>可以跑数据库（Redis / PostgreSQL / MySQL）</li>
</ul>
</div>
<!-- ============ 新网站目标 ============ -->
<h2 id="goals">🎯 新网站要实现什么？</h2>
<div class="section">
<p>基于之前的工作台和未来的扩展需求，这个网站应该整合：</p>
</div>
<div class="plan-item">
<div class="plan-title"><span class="emoji">📋</span>1. 任务看板（核心功能）</div>
<ul>
<li>动态的任务管理系统，支持增删改查</li>
<li>任务状态管理（待办/进行中/已完成）</li>
<li>任务分类（基础设施/内容/设备打通等）</li>
<li>时间线视图</li>
</ul>
</div>
<div class="plan-item">
<div class="plan-title"><span class="emoji">📝</span>2. 博客系统</div>
<ul>
<li>继续保留现有的 Markdown 博客</li>
<li>支持标签、分类、搜索</li>
<li>支持草稿、预览</li>
<li>静态生成（Hexo/Hugo）+ 动态评论</li>
</ul>
</div>
<div class="plan-item">
<div class="plan-title"><span class="emoji">🤖</span>3. Elaine 控制台</div>
<ul>
<li>OpenClaw 的 Web 管理界面</li>
<li>定时任务管理</li>
<li>Skill 安装与管理</li>
<li>日志查看</li>
</ul>
</div>
<div class="plan-item">
<div class="plan-title"><span class="emoji">📊</span>4. 个人仪表盘</div>
<ul>
<li>股票监控面板</li>
<li>NBA 比分概览</li>
<li>今日任务一览</li>
<li>天气/资讯摘要</li>
</ul>
</div>
<!-- ============ 技术选型 ============ -->
<h2 id="stack">⚙️ 技术选型</h2>
<div class="section">
<p>考虑到服务器配置（4核8G / 40G存储 / 上海）和实际需求：</p>
</div>
<table>
<tr><th>组件</th><th>选择</th><th>理由</th></tr>
<tr>
<td><strong>Web 服务器</strong></td>
<td>Nginx</td>
<td>高性能反向代理，静态文件处理能力强，省资源</td>
</tr>
<tr>
<td><strong>博客框架</strong></td>
<td>Hexo</td>
<td>Markdown 写作，静态生成，本地编辑，无需数据库</td>
</tr>
<tr>
<td><strong>任务看板</strong></td>
<td>Todoist API / 自建</td>
<td>轻量级，可以用文件存储 JSON 即可</td>
</tr>
<tr>
<td><strong>动态功能</strong></td>
<td>Node.js + Express</td>
<td>轻量、和前端配合好、Elaine 就是 Node.js 环境</td>
</tr>
<tr>
<td><strong>数据库</strong></td>
<td>SQLite / 文件JSON</td>
<td>数据量小，零配置，无需单独服务进程</td>
</tr>
<tr>
<td><strong>容器化</strong></td>
<td>Docker</td>
<td>环境隔离，一键部署，版本回滚</td>
</tr>
<tr>
<td><strong>HTTPS</strong></td>
<td>Let's Encrypt (Certbot)</td>
<td>免费、自动续期</td>
</tr>
</table>
<div class="info">
<div class="info-title">💡 为什么选 Hexo 而不是自建博客系统？</div>
<p>Hexo 是静态站点生成器，每次写完 Markdown 直接本地预览，确认没问题后部署到服务器。<strong>无需数据库、无需 PHP/Python 运行时</strong>，纯静态 HTML + Nginx，性能和安全性都很好。</p>
</div>
<!-- ============ 系统架构 ============ -->
<h2 id="architecture">🏗️ 系统架构</h2>
<div class="section">
<pre><code> ┌─────────────────────────┐
│ 用户浏览器 │
│ (HTTPS 访问) │
└───────────┬─────────────┘
│
▼
┌─────────────────────────┐
│ 阿里云服务器 │
│ (Nginx :443/:80) │
│ │
│ ┌─────────────────┐ │
│ │ / │───┼───► 博客 (Hexo 静态)
│ │ /blog │ │
│ │ /kanban │ │───► 任务看板 (静态)
│ │ /dashboard │ │───► 个人仪表盘 (静态)
│ │ /api │───┼───► API 服务 (Node.js)
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ OpenClaw │ │
│ │ Gateway │ │
│ └─────────────────┘ │
└─────────────────────────┘</code></pre>
</div>
<div class="section">
<h3>Nginx 路由规则</h3>
<pre><code>server {
listen 443 ssl;
server_name your-domain.com;
# 博客静态文件
location /blog/ {
alias /var/www/hexo/public/;
try_files $uri $uri/ =404;
}
# 任务看板
location /kanban/ {
alias /var/www/kanban/;
try_files $uri $uri/ =404;
}
# API 服务 (Node.js)
location /api/ {
proxy_pass http://localhost:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
}
# OpenClaw Dashboard
location /openclaw/ {
proxy_pass http://localhost:18789/;
proxy_set_header Host $host;
}
}
<!-- ============ 实施计划 ============ -->
<h2 id="phases">📅 实施计划（分阶段）</h2>
<div class="phase">
<div class="phase-title">🅰️ 阶段一：基础设施（1-2天）</div>
<ul>
<li>安装 Docker + Docker Compose</li>
<li>安装 Nginx</li>
<li>配置 Let's Encrypt HTTPS</li>
<li>域名解析（如果暂时没有域名，先用 IP + 端口）</li>
</ul>
</div>
<div class="phase">
<div class="phase-title">🅱️ 阶段二：博客迁移（1天）</div>
<ul>
<li>在服务器上安装 Hexo</li>
<li>迁移现有博客内容（复制 Markdown 文件）</li>
<li>配置主题（沿用现在的简约风格）</li>
<li>设置 CI/CD 本地部署脚本</li>
</ul>
</div>
<div class="phase">
<div class="phase-title">🅾️ 阶段三：任务看板重构（2-3天）</div>
<ul>
<li>设计任务数据模型（JSON 文件存储）</li>
<li>开发 API 接口（Node.js + Express）</li>
<li>前端重构（保留现有 UI 风格，增加动态功能）</li>
<li>与 Elaine 打通（通过 API 添加/查询任务）</li>
</ul>
</div>
<div class="phase">
<div class="phase-title">4️⃣ 阶段四：OpenClaw 集成（1-2天）</div>
<ul>
<li>配置 OpenClaw 通过域名访问</li>
<li>集成 Dashboard 到网站子路径</li>
<li>设置定时任务自动执行</li>
</ul>
</div>
<div class="phase">
<div class="phase-title">5️⃣ 阶段五：个性化功能（持续）</div>
<ul>
<li>个人仪表盘（股票、NBA、天气）</li>
<li>数据可视化</li>
<li>移动端适配</li>
</ul>
</div>
<!-- ============ 域名与 HTTPS ============ -->
<h2 id="domain">🌐 域名与 HTTPS</h2>
<div class="section">
<h3><span class="emoji">1️⃣</span>获取域名（可选，暂时用 IP）</h3>
<ul>
<li>阿里云万网 / 腾讯云 / Cloudflare 都可以</li>
<li>一年几十块钱.xyz .online 域名最便宜</li>
<li>如果只是自己用，可以先不用域名</li>
</ul>
</div>
<div class="section">
<h3><span class="emoji">2️⃣</span>配置 HTTPS（Let's Encrypt 免费）</h3>
<pre><code># 安装 Certbot
sudo apt update
sudo apt install certbot python3-certbot-nginx
获取证书（假设域名是 example.com）
sudo certbot --nginx -d example.com
自动续期测试
sudo certbot renew --dry-run
<div class="info">
<div class="info-title">💡 如果没有域名怎么办？</div>
<p>可以先直接用 <code>http://你的服务器IP</code> 访问，只是浏览器会显示不安全。等有域名后再配置 HTTPS。</p>
</div>
<!-- ============ 部署流程 ============ -->
<h2 id="deploy">🚀 部署流程</h2>
<div class="section">
<h3>日常部署工作流（博客为例）</h3>
<pre><code># 1. 本地编辑（服务器上直接操作）
ssh user@your-server
cd /var/www/blog
2. 写文章
hexo new "我的新文章"
vim source/_posts/我的新文章.md
3. 预览（本地 4000 端口）
hexo server
4. 确认没问题后，生成静态文件
hexo generate
5. Nginx 自动提供静态文件，无需重启
</div>
<div class="section">
<h3>使用 Git 做版本管理（可选）</h3>
<pre><code># 在本地初始化 Git 仓库
git init
git add .
git commit -m "update blog"
推送到服务器（在服务器上配置 Git hooks 实现自动部署）
或者：用 rsync 同步文件
</div>
<div class="section">
<h3>Docker 部署（推荐）</h3>
<pre><code># docker-compose.yml
version: '3.8'
services:
nginx:
image: nginx:alpine
ports:
- "80:80"
- "443:443"
volumes:
- ./data/www:/usr/share/nginx/html
- ./data/nginx.conf:/etc/nginx/nginx.conf
- ./data/certbot/conf:/etc/letsencrypt
- ./data/certbot/www:/var/www/certbot
depends_on:
- nodejs
nodejs:
image: node:18-alpine
working_dir: /app
volumes:
- ./data/app:/app
command: node server.js
ports:
- "3000:3000"
<!-- ============ 日常工作流 ============ -->
<h2 id="workflow">💻 日常工作流</h2>
<div class="section">
<h3>服务器直连 vs 本地开发</h3>
<table>
<tr><th>方式</th><th>优点</th><th>缺点</th></tr>
<tr>
<td><strong>服务器直连</strong></td>
<td>直接预览，Elaine 能直接操作文件</td>
<td>需要保持 SSH 连接</td>
</tr>
<tr>
<td><strong>本地开发 + 部署</strong></td>
<td>可以在本地用 IDE，完整版本控制</td>
<td>多了部署步骤</td>
</tr>
</table>
</div>
<div class="section">
<h3>推荐：混合方式</h3>
<ul>
<li><strong>Hexo 博客</strong> → 服务器直连编辑，Elaine 直接生成和部署</li>
<li><strong>任务看板</strong> → Elaine 通过 API 操作，本地无需开发环境</li>
<li><strong>OpenClaw</strong> → 服务器本地运行，我直接维护</li>
</ul>
</div>
<div class="success">
<div class="success-title">✅ 最终目标</div>
<p>让 Elaine 能够<strong>直接</strong>在这个网站上：</p>
<ul>
<li>添加/修改/完成任务</li>
<li>发布博客文章</li>
<li>查看和管理定时任务</li>
<li>监控各种数据（股票、NBA 等）</li>
</ul>
<p>而你只需要通过钉钉告诉我你想做什么，剩下的我来处理 🌸</p>
</div>
<div class="info">
<div class="info-title">🔗 相关链接</div>
<ul>
<li><a href="https://hexo.io/zh-tw/" style="color:#60a5fa;">Hexo 博客框架</a></li>
<li><a href="https://nginx.org/en/docs/" style="color:#60a5fa;">Nginx 文档</a></li>
<li><a href="https://letsencrypt.org/" style="color:#60a5fa;">Let's Encrypt 免费 SSL</a></li>
<li><a href="https://www.docker.com/" style="color:#60a5fa;">Docker</a></li>
<li><a href="../index.html" style="color:#60a5fa;">任务看板</a></li>
</ul>
</div>