个人博客自建指南（6）：上线部署 —— 从方案选择到 ECS 落地

前言

第4篇我们在本地把 VitePress 跑起来了，第5篇我们调整了博客主题样式，浏览器能看到博客首页。但那是只有你自己能看到的“本地预览”。如果你想让朋友、同事，或者未来的合作方也能访问你的博客，就需要把它部署到公网上。

这篇就来解决这个问题。我会先列举几种常见的上线方案，然后详细介绍我推荐且正在使用的 ECS 方案 —— 从构建、上传到 Nginx 配置，一步步带你走完。

本篇假设你已经拥有一台 ECS 云服务器（已安装 Nginx）、一个备案域名（如 jiejinx.cn），并且域名已解析到 ECS 的公网 IP。
如果你还没有这些基础设施，可以参考《树莓派专栏（7）：ECS 反代》 中的 第三节 阿里云 ECS 选购与基础配置，完成前期准备，再回来继续。

一、上线部署方案一览

方案	优点	缺点	适合场景
GitHub Pages	免费，自动 CI/CD	国内访问不稳定	面向海外 / 不介意速度的国内读者
Netlify / Vercel	免费额度够用，自动 CI/CD，体验比 GitHub Pages 好	国内访问依然不稳（国外服务）	面向海外 / 技术博主
Cloudflare Pages	免费，CF CDN 加持	国内访问比纯 GitHub 稍好但仍不稳	面向海外为主
国内云静态托管（腾讯云静态网站 / 阿里云 OSS + CDN）	国内访问快，付费但便宜	要配 CDN 和 HTTPS	国内读者为主
虚拟主机	便宜（几十元/年）	功能有限，无 SSL 自由	纯静态博客
云服务器 ECS	完全可控，可跑更多服务	需备案，有年费	想长期经营、扩展其他服务

如果你已经有自己的域名和备案，并且希望获得最大的灵活性和可控性，我推荐 ECS 方案 —— 这也是我在用的方案。以下内容将围绕 ECS 展开。

二、构建静态文件

打开终端，进入本地项目根目录下执行：

cd F:\web\jiejinx-blog
pnpm run build

构建完成后，产物位于 docs/.vitepress/dist/ 目录下。这个目录就是你要部署到服务器的全部内容——纯 HTML、CSS、JS 文件，不依赖任何后端环境。

你可以打开 dist/index.html 本地预览（但部分资源路径可能因 base 配置需要服务器环境才能正确加载，所以直接双击可能不正常，属正常现象）。

三、上传到 ECS

3.1 前置条件

请参考《树莓派专栏（7）：ECS 反代》 第三节 阿里云 ECS 选购与基础配置，完成前期准备。

3.1 在 ECS 上创建目录

登录到你的 ECS（SSH），创建存放博客文件的目录：

sudo mkdir -p /var/www/html/blog
sudo chown -R ecs-user:ecs-user /var/www/html/blog

如果你的 ECS 用户不是 ecs-user，请替换为你的实际用户名。

3.2 本地 scp 推送

在本地 PowerShell 或终端中，进入项目根目录，执行：

cd F:\web\jiejinx-blog

scp -r docs/.vitepress/dist/* ecs-user@你的ECS公网IP:/var/www/html/blog/

输入密码后等待传输完成。如果文件较多，第一次可能稍慢，后续增量更新只需重新 build 并再次 scp 即可。

四、ECS Nginx 配置

4.1 创建配置文件

在 ECS 上 修改Nginx 配置文件, 复制运行以下脚本：

sudo tee /etc/nginx/conf.d/jiejinx.cn.conf > /dev/null << 'EOF'
server {
    listen 80;
    listen [::]:80;
    server_name jiejinx.cn www.jiejinx.cn;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name jiejinx.cn www.jiejinx.cn;

    ssl_certificate     /etc/nginx/ssl/jiejinx.cn/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/jiejinx.cn/privkey.pem;

    charset utf-8;
    root /var/www/html/blog;
    index index.html;

    location / {
        try_files $uri $uri.html $uri/ /index.html;
    }
    
    # HTML 入口：不缓存，每次都问服务器，防止浏览器缓存导致新文章链接404
    location ~* \.html$ {
      add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # 带哈希的静态资源：一年长缓存
    location /assets/ {
      add_header Cache-Control "public, max-age=31536000, immutable";
    }
}
EOF

4.2 检查配置并重载 Nginx

sudo nginx -t
sudo systemctl reload nginx

4.3 验证

在浏览器中访问 https://jiejinx.cn（你的主域名） ，应该能看到你的 VitePress 博客首页。如果一切正常，恭喜 —— 你的博客已经成功上线！

五、后续维护

每次写完新文章，只需要三步即可更新线上博客：

# 1. 本地构建
pnpm run build

# 2. 推送到 ECS
scp -r docs/.vitepress/dist/. ecs-user@你的ECS公网IP:/var/www/html/blog/

# 3. 刷新浏览器即可看到更新

六、总结

这篇我们完成了：

1. 了解了多种上线方案，并选择了 ECS 方案
2. 本地构建生成静态文件
3. 通过 scp 上传到 ECS
4. 配置 Nginx 使 jiejinx.cn指向博客目录
5. 验证上线成功

至此，你的个人博客从零搭建到公网可访问的全流程已经闭环。 如果你还没有 ECS 和备案域名，或者对 HTTPS 证书申请、安全组配置等基础操作有疑问，强烈建议先阅读 《树莓派专栏（7）：ECS 反代》 第三节 阿里云 ECS 选购与基础配置，那里有从零开始的完整记录。

说明：本文假设你已具备 ECS、域名备案、Nginx 安装等基础条件。如果尚未完成，请先移步 树莓派专栏 补齐前置步骤。