把静态站部署到自己的服务器上

网站在本地能跑了，但 localhost 只有我自己能看见。我想让它变成 turgidcat.space，全世界都能访问。

这中间隔着一整条我之前完全不懂的链路。这篇记录我是怎么一步步把它打通的。

先搞清楚要哪些东西

我花了不少时间才理清，一个网站要上线，至少需要：

1. 一台有公网 IP 的服务器（我租的云服务器，最便宜那种）
2. 一个域名（我在域名商那里买的 turgidcat.space）
3. 一个 Web 服务器软件（我用的 nginx）
4. 把我构建出来的文件放到服务器上

听起来简单，每一步对我来说都是新世界。

第一步：域名指向服务器

在域名商的管理后台，有一个叫 DNS 解析的地方。我要加一条记录：

类型: A
主机记录: @         （代表根域名 turgidcat.space）
记录值: <我的服务器公网IP>

加完之后，turgidcat.space 这个名字就开始”指向”我的服务器了。不过 DNS 生效要等一会儿，一开始我刷新了半天访问不了，还以为做错了，其实是没等够时间。

后来我又加了一条 www 的，指向同一个 IP，这样 www.turgidcat.space 也能用。

第二步：服务器装 nginx

我用 SSH 连上服务器（Windows 上我用的是某个 SSH 客户端，连上去就是一个黑乎乎的命令行）。然后：

sudo apt update
sudo apt install nginx

装完之后，在浏览器输入服务器 IP，看到了 nginx 的欢迎页——这意味着 Web 服务器跑起来了。那一刻很有成就感，哪怕那还只是默认页面。

第三步：告诉 nginx 我的网站在哪

nginx 的配置文件在 /etc/nginx/sites-available/（至少 Ubuntu 上是这样）。我新建了一个：

server {
    listen 80;
    listen [::]:80;
    server_name turgidcat.space www.turgidcat.space;

    root /var/www/turgidcat;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

几个关键字段的意思我慢慢搞懂的：

• listen 80：监听 80 端口（HTTP 默认端口）
• server_name：哪些域名归这个配置管
• root：网站文件放在服务器的哪个目录
• try_files：先找文件、再找目录、都没有就返回 404

然后启用这个配置：

sudo ln -s /etc/nginx/sites-available/turgidcat /etc/nginx/sites-enabled/
sudo nginx -t          # 测试配置有没有写错
sudo systemctl reload nginx   # 重新加载

第四步：把文件传上去

我本地 npm run build 之后，会生成一个 dist/ 目录，里面是一堆 HTML/CSS/JS。我要把这些文件传到服务器的 /var/www/turgidcat。

第一次我用的是最笨的办法：在 SSH 客户端里用 SFTP，一个文件夹一个文件夹地拖。

后来学会用命令行的 scp：

scp -r dist/* user@serverIP:/var/www/turgidcat/

一行命令搞定。每次更新网站，构建 + 传文件，两个命令的事。

第五步：上 HTTPS

裸 HTTP 在浏览器里会显示”不安全”，看着不专业。我用了 Let’s Encrypt，免费的 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d turgidcat.space -d www.turgidcat.space

certbot 会自动帮我改 nginx 配置、申请证书、配上自动续期。跑完之后，https://turgidcat.space 就能访问了，浏览器的小锁也亮起来了。

我踩的坑

• 防火墙：一开始访问不了，折腾半天发现是服务器安全组没开 80/443 端口。这种”明明配对了但就是不通”的问题最折磨新人。
• 权限：文件传上去 403 Forbidden，是因为 nginx 用户读不了我的文件。sudo chown -R www-data:www-data /var/www/turgidcat 解决。
• 缓存：改了文件刷新没变化，是浏览器缓存。Cmd/Ctrl+Shift+R 强刷一下。
• Astro 的 trailing slash：Astro 默认生成的链接和 nginx 的目录解析偶尔会打架，配 try_files 的时候要注意。

部署这件事的本质

我现在回看，部署其实是把你本地的一个文件夹，安全地、正确地、让全世界能访问地放到一台一直开着的电脑上。

听起来神秘，拆开就是这几步。AI 帮我把每一步的命令都写好了，但真正让我学会的，是亲手敲一遍、报错一次、再修一次的那个过程。

现在每次我更新网站，跑 npm run build，然后 scp 上去，reload nginx——这一套动作已经形成肌肉记忆了。这种”我掌控了从代码到上线全流程”的感觉，是单纯让 AI 替我做永远给不了的。

---

如果你也想把自己的东西放到互联网上：租个最便宜的服务器，买个域名，然后别怕报错。 每一个报错都是一次学习，每一次部署成功都是一次小小的胜利。