> **从"只有我自己电脑能打开"到挂上公网：一个周末走完的建站全流程，附 5 条可直接复制的提示词 #腾讯云#**

---

## 摘要

一个纯静态页面从本地走到公网，听起来是"前端的事"，实际做完发现它牵扯四件互不相干的事：机器、域名备案、HTTPS、图片存储，最后还要防一下扫描。本文记录我用一个周末走完全程的过程，附 **5 条可直接复制的提示词**（把路径换成你自己的就能跑），以及 4 个我实际踩到的坑——每个都写清了"为什么会错"，而不只是"后来改好了"。

**关键词**：WorkBuddy；提示词；轻量应用服务器；对象存储；主机安全；建站

---

## 一、困境

上周把一个介绍页面写完了。HTML 调好，样式也顺眼，双击打开一切正常。

然后我意识到一个问题：**它现在只存在于我这台电脑里。**

要给别人看，只能截图，或者打个压缩包让人下载解压。可我花时间做这个页面，全部的意义就是让别人能直接打开它。

于是那个周末我没干别的，就把它挂到了网上。整个过程不算难，但有几个地方如果一开始就知道，能省掉大半天。

---

## 二、先把"上线"这件事拆开

我原来以为上线就是"把文件传上去"。真做的时候发现，它其实是四件不相干的事：

| 要解决的 | 说白了是什么 | 对应的东西 |
|---|---|---|
| 文件放哪 | 得有一台一直开着的机器存着它 | 云服务器 |
| 别人怎么找到 | 得有个地址，最好是自己记得住的 | 域名 + 备案 |
| 打开别报错 | 浏览器现在对 http 会标"不安全" | SSL 证书 |
| 别出事 | 页面一公开就会被扫，得有点基本防护 | 主机安全 |

很多人觉得"上线"是个工程，是因为把这几件事混在一起想了。拆开之后，每一件都不复杂。

---

## 三、第一步：买一台"够用就行"的机器

我对着套餐页看了半天，配置项太多，不知道哪一档够用。与其自己猜，我直接把需求描述清楚丢给 [WorkBuddy](https://developer.cloud.tencent.com/techpedia/2610) 做对比。

**提示词 1 · 配置选型（可直接复制）**

```text
我是个人用户，要部署一个纯静态页面（约 2MB，每天访问量几十次，无数据库、无后端），
请对比腾讯云轻量应用服务器的入门几档套餐，输出一张表格，包含：
1) 每档的 CPU/内存/带宽/月流量/系统盘
2) 哪一档对我这个场景够用，为什么
3) 哪些配置项是我用不到的（我担心多花钱）
4) 我需要额外注意的限制（比如流量超出后会怎样）
最后给一个明确建议，不要罗列所有可能性。
```

它给的结论很直接：我这个场景 CPU 和内存都不是瓶颈，**瓶颈是月流量**——因为图片会吃掉大部分流量。这句话直接影响了后面第五步的决定（把图片搬去对象存储）。

我按它的建议选了入门档。买的时候有三个点注意一下：

- **地域**选离自己近的，访问快，备案也简单
- **镜像**选干净的系统镜像，别选预装一堆东西的面板镜像
- 购买页会问你要不要**顺带买域名**，域名在哪买都行，但要提前想好

---

## 四、第二步：部署——我让它写了个脚本

手动做是这几步：本地打包 → 传到服务器 → 备份旧版本 → 解压替换 → 重启 nginx。第一次做的时候我手敲了一遍，第二次就不想再敲了。

**提示词 2 · 生成部署脚本（可直接复制）**

```text
我的本地目录【D:\site\dist】里是打包好的静态文件，要部署到服务器【/var/www/mysite】。
请写一个 bash 脚本，完成以下步骤：
1) 把本地 dist 目录同步到服务器（保留目录结构）
2) 部署前先把服务器上的旧版本备份到 /var/www/backup/ 下，目录名带日期
3) 替换为新版本
4) 重启 nginx
要求：
- 每一步失败就停下并打印明确原因，不要静默继续
- 不要删除任何东西，只做备份和替换
- 脚本末尾输出这次部署的文件数量和耗时
```

它给的脚本我改了两处路径就能用。**这里有个原则值得说：涉及"覆盖、删除、重启"这类动作的脚本，一定要在提示词里写死"失败就停、不许静默继续"。** 我第一版没写这句，结果某次传一半断了，脚本照样把半份文件替换上去，页面白屏，我花了二十分钟才反应过来是部署没传完。

### 踩坑一：403 不是"文件没传上去"

第一次部署完打开页面，报 403 Forbidden。我第一反应是文件没传成功，又传了两遍，还是 403。

实际上**文件是在的，是 nginx 的运行用户读不了它**。我建的目录权限是 root 独有，nginx 跑在 www-data 用户下，它连目录都进不去，所以给你 403 而不是 404。

> **区分一下：404 是"找不到文件"，403 是"文件在，但你没权限读"。** 搞清楚这一条，能省掉很多次无意义的重复上传。

---

## 五、第三步：HTTPS——现在 http 会被浏览器标不安全

域名解析配好之后，我用 http 打开，浏览器地址栏直接标了个"不安全"。现在这个提示对访问者的劝退效果很强，所以这一步不能省。

腾讯云有免费的 SSL 证书可以申请，申请完把证书文件放到服务器上，再让 nginx 用起来。

**提示词 3 · 生成 nginx 配置（可直接复制）**

```text
服务器是 Ubuntu，站点根目录【/var/www/mysite】，域名【example.com】，
SSL 证书文件路径是【/etc/nginx/ssl/example.com.pem】和【...key】。
请生成一份完整的 nginx 配置文件，要求：
1) 80 端口全部 301 跳转到 443
2) 启用 gzip 压缩，只压 html/css/js/json
3) 静态资源设置 30 天缓存，图片目录单独设置 180 天
4) 关闭目录列表（防止别人直接浏览文件夹）
5) 隐藏 nginx 版本号
6) 加一段注释说明每个配置块为什么这么写
另外告诉我证书到期前怎么自动续期。
```

**这里必须提醒一句：AI 生成的配置，路径和证书文件名一定要自己核对一遍。** 它会按通用习惯写成 /var/www/html 或者它自己假设的证书名，跟你的实际不一致，执行会直接报错。核对路径这一步花不了两分钟，但能省掉排查报错的时间。

### 踩坑二：备案是前置条件，不是最后一步

这是我最该早点知道的一条。机器买好、文件传上去、用 IP 访问——能打开。但我想用自己的域名，这才发现**域名要备案，而备案需要等待审核**。

如果一开始就知道，我应该在买机器的同一天就提交备案，让它慢慢走流程。**任何涉及备案、审核的事，都要放在第一步做——它不占你的工作时间，但占用你的等待时间。**

---

## 六、第四步：图片搬去对象存储

页面里有四十来张图，第一版我把它们全塞在服务器同一个目录里。页面能跑，但打开明显慢。

按第一步 WorkBuddy 给的判断，我这个场景的瓶颈本来就是流量，而图片是流量大头，所以这一步必须处理。

**提示词 4 · 批量压缩 + 上传 + 替换路径（可直接复制）**

```text
本地【D:\site\assets】目录下有约 40 张图片，总大小约 2.3MB。
请写一个脚本完成：
1) 批量压缩（jpg 质量 80，宽度超过 1600px 的等比缩小到 1600px）
2) 上传到对象存储存储桶【桶名】【地域】
3) 把 HTML 和 CSS 文件里所有指向本地图片的路径，替换成对象存储的地址
4) 输出一份对照表：原文件名 / 压缩前大小 / 压缩后大小 / 新地址
执行前先把"准备做哪些动作"列给我确认，确认后再执行。
```

它先列了动作清单给我看，我确认后才跑。**这一步的"先确认"是我特意加的**——它会修改我几十个文件的引用路径，万一搞错了整个页面图片全挂，先看一眼清单最省事。

做完的结果：

| 指标 | 处理前 | 处理后 |
|---|---|---|
| 图片总体积 | 约 2.3 MB | 约 420 KB |
| 首屏加载时间 | 约 6 秒 | 约 1.2 秒 |
| 换机器要不要重传图 | 要 | 不要，图在存储上 |

成本上也没什么负担，这种存储是按实际用量算的，我这点图片的量基本可以忽略。而它带来的最大好处不是快，是**图片和代码分了家**。

> **图片和代码的生命周期不一样**：代码天天改，图片基本不动。放在一个目录里，迟早会出现"我换个机器，图全丢了"。分开之后，机器可以随时换，素材始终在那儿。

---

## 七、第五步：第二天，日志里一堆人在扫我

地址发出去第二天，我想看看有没有人来。我拉了 nginx 的访问日志，肉眼扫了几行就觉得不对劲——一堆请求在试我根本不存在的后台路径。

**提示词 5 · 分析访问日志（可直接复制）**

```text
我上传了 nginx 的 access.log，请分析后输出：
1) 明显是自动扫描/探测的请求（比如在试 admin、wp-login、.env、phpmyadmin 这类路径的）
   给出这些请求的数量、来源 IP 排行、尝试的路径排行
2) 真实用户的正常请求有哪些特征（用来跟扫描区分）
3) 有没有单位时间请求量异常高的 IP
4) 结论：我这个站需不需要处理，如果需要，处理动作是什么
用表格输出，不要罗列日志原文。
```

结论让我印象很深：**不是针对我，是全网无差别扫的。** 三百多次请求来自十几个 IP，试的全是通用后台路径——它根本不知道我是什么站。

但那一瞬间的感受很真实：**页面公开的那一刻，它就不再只属于你了。**

我把 [主机安全](https://cloud.tencent.com/document/product/296) 开起来了。配的时候发现比自己想的简单，主要是不加心里不踏实。装完之后能看到登录记录、异常进程、漏洞提醒这些，相当于给这台机器加了个"值班的"。

### 踩坑三：防火墙端口没放通——本地能连，外网连不上

这个坑很迷惑人：我在服务器上用 curl 访问自己的页面，正常返回；但在自己电脑的浏览器打开，一直转圈。

原因是服务器的**安全组/防火墙没放通 80 和 443**。安全组是云平台层面的一道墙，位于你的机器外面——**它挡掉请求的时候，你登录到机器内部是看不出任何异常的**，因为请求根本没进来。

> **排查顺序记一下：外网打不开，先看云平台的安全组，再看机器自己的防火墙，最后才怀疑服务本身。** 反着查，会把时间全花在最不该怀疑的地方。

---

## 八、算一下账

整个周末的花费比我预想的低。这些钱买到的不只是"一个页面能被打开"：

- 我以后写的东西，可以有一个自己的位置放，不用都寄在别人的平台上
- 图片素材有地方存了，不用再塞在手机相册里
- 我知道了整个流程长什么样，下次再做只要一半时间

**第一次做这类事，成本从来不只是钱，主要是"不知道怎么开始"的那段时间。** 走通一次之后，它就从"技术问题"降级成"操作问题"了——这四步现在对我来说，就是四件按顺序做完的事。

---

## 九、这套方法不适合什么

得说清楚边界，免得有人照着做发现不对：

- **动态网站、带数据库的应用**：本文只讲纯静态页面的部署。有后端、有数据库的站，还涉及环境变量、数据备份、连接池这些，不是这个流程能覆盖的。
- **访问量大的站**：单台入门机器扛不住高并发，那时候要考虑负载均衡和 CDN，方案完全不同。
- **用模板建站类产品的人**：如果页面是拖拽出来的、代码在平台上，那部署这一步平台会帮你做，本文的流程用不上。
- **要改的东西很多、又不懂命令行的**：脚本能帮你省下手敲，但出错了看报错仍然需要一点基础。建议第一次做的时候找个能问的人。

---

## 十、写在最后

整条路走下来，真正卡住我的从来不是技术，是**不知道下一步该做什么**。

如果你也卡在"页面写好了，只有我自己电脑能打开"这一步，我的建议和开头一样：**先把它拆成四件事，然后从买机器开始**。剩下的，遇到问题就问、就查，一晚上能走完我花了一个周末的路。

评论区可以聊。卡在哪一步，我大概都踩过。



从"只有我自己电脑能打开"到挂上公网：一个周末走完的建站全流程，附 5 条可直接复制的提示词 #腾讯云#

虾总

云计算

运维

前端

从零把静态页面挂上公网的完整流程：选轻量服务器、部署脚本、配置HTTPS、图片转对象存储、防护扫描。附5条可直接复制的提示词和4个常见坑（403权限、备案时序、防火墙端口、流量瓶颈），帮你避开弯路，周末即可完成建站。

轻量应用服务器

数据备份

代码解释

负载均衡

主机安全

对象存储

云服务器

防火墙

服务器

数据库

WorkBuddy 

Ubuntu

2026上云采购 | AI焕新·智启新局

cloudpages

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

4核4G3M云服务器 新用户低至38元/年！

lighthouse

对象存储COS新用户低至1元！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

从"只有我自己电脑能打开"到挂上公网：一个周末走完的建站全流程，附 5 条可直接复制的提示词 #腾讯云#-腾讯云开发者社区-腾讯云

从"只有我自己电脑能打开"到挂上公网：一个周末走完的建站全流程，附 5 条可直接复制的提示词 #腾讯云#

从"只有我自己电脑能打开"到挂上公网：一个周末走完的建站全流程，附 5 条可直接复制的提示词 #腾讯云#

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐