1Panel 新手建站教程：从买域名、用 Codex 写网站到部署上线

1Panel 新手建站教程：从买域名、用 Codex 写网站到部署上线

想做一个自己的个人主页、作品集或者小工具网站，却不知道从哪里开始？这篇教程会带你走完一条完整路线：买域名，在 GSVPS 选服务器，安装 1Panel，用 Codex 写出网页，最后通过自己的域名访问网站。

我们要做的是一个“个人主页＋简单计算器”。访客既能看你的介绍，也能在网页里输入数字、得到计算结果。页面和计算逻辑全部在浏览器里运行，第一版不需要数据库，也不需要一直开着自己的电脑。

**本文以 1Panel V2 的静态网站部署为例。

一、先弄清楚这几个东西分别做什么

建站可以理解为开一家小店：

整个流程：域名 → DNS → 服务器 → 1Panel 中的网站目录 → 访客看到网页。

Codex 通常在你的电脑上修改项目；1Panel 在服务器上管理部署。电脑里的文件不会因为写完了，就自动出现在服务器上，后面还有“上传”这一步。

二、买一个域名，先看续费再付款

打开你选择的域名注册商官网，注册账户，搜索想要的域名。你可以用自己的名字、品牌名或者工具名称，挑一个容易输入、容易记住的名字。

购买前看清三项：第一年的费用、以后每年的续费、是否另外购买了邮箱或其他增值服务。先买一个域名、注册一年即可，没必要为了练习一次买很多。

下单时填写自己的真实联系资料，使用能长期接收邮件的邮箱，并按注册商提示完成验证。付款成功后，进入“我的域名”，确认域名已在自己的账户中；设置到期提醒，避免网站做好后忘记续费。域名是按注册期限持有使用权，需要定期续费，相关基础说明可参考 ICANN 的域名注册指南。

本文用 example.com 代表你买到的域名，用 203.0.113.10 代表服务器 IP。它们是说明用的示例，操作时必须换成自己的实际值。

完成标志：你能在注册商后台看到这个域名，并找到 DNS 或域名解析入口。

三、在 GSVPS 选服务器，第一台够用就好

进入 GSVPS 商家列表，先看商家，再进入商家详情页比较配置和购买条件。GSVPS 用来查资料与比较产品，具体付款、开机和售后在对应商家完成。

针对本文这个小网站，可以把下面的配置当作选购起点。这是为新手操作预留空间的建议，不是某个套餐的性能保证。

例如，你可以打开 RakSmart 商家页或 VMISS 商家页，查看实际套餐，再结合预算和目标访客所在地区选择。示例商家不代表每个套餐都适合本文：下单前仍要确认系统、内存、公网 IP、端口政策和管理权限。

不要只看“第一期多少钱”。还要看续费金额、流量额度、超额处理、退款条件，以及能否在后台重装系统。只支持共享 NAT、无法开放所需端口的方案，先不作为本文练习对象。

找到合适套餐后，在商家详情页点“立即购买”，进入商家网站完成订单。开通后保存四样信息：公网 IP、SSH 端口、登录用户名、密码或密钥。SSH 端口通常是22，也可能被商家修改，以开通信息为准。

完成标志：商家后台显示服务器正在运行，你已经拿到登录信息。

四、连接服务器，安装 1Panel

1. 打开终端，登录服务器

Windows 可以打开 PowerShell 或 Windows Terminal；macOS 可以打开“终端”。如果商家提供网页控制台，也可以先通过网页控制台操作。

假设开通信息是 root 用户、22端口，输入：

ssh root@203.0.113.10

如果端口不是22，例如商家给的是2222，使用：

ssh -p 2222 root@203.0.113.10

用户名也要按开通信息替换。首次连接会出现服务器指纹确认，核对商家控制台提供的指纹；有疑问先通过网页控制台确认，不要忽略主机身份变化的提示。

输入密码时，终端可能完全不显示字符，这是正常现象。输入完成后按回车。若商家使用 SSH 密钥，按它提供的密钥登录说明操作。

登录后，如果当前不是 root，但账户有 sudo 权限，先运行：

sudo -i

后面的安装命令在服务器终端里运行，不是在自己电脑上的另一个 PowerShell 窗口里运行。不要在已经承载其他业务的机器上直接重装系统或安装第二套面板；本教程使用全新的服务器。

2. 安装面板

在 Ubuntu 服务器上准备下载工具：

apt update
apt install -y curl ca-certificates

根据 1Panel V2 官方在线安装文档，以管理员身份执行交互式安装命令：

bash -c "$(curl -sSL https://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)"

该命令会下载并执行官方安装脚本。按提示设置安装位置、面板端口、用户名和密码；如果提示需要安装 Docker，按提示完成。Docker 可以先理解为面板运行部分应用使用的工具，不必现在学习容器编排。

安装完成后，把终端显示的访问地址、端口、安全入口和账户信息保存到自己的密码管理器。安全入口是网址最后的一段路径，访问时也需要带上。

3. 放行需要的端口

有的商家把服务器入口规则叫“安全组”，有的叫“云防火墙”。服务器内部也可能启用了系统防火墙，两边都要核对。

这里的“自己的公网 IP”是你上网时对外使用的地址，不是家里电脑的 192.168 内网地址。网络变化后，可能需要更新管理端口的允许来源。

不要为了省事把所有端口全部开放，也不要关闭整个防火墙。本文不使用数据库，不需要开放3306等数据库端口。

4. 打开面板

把安装结果里的完整地址复制到浏览器，按显示的协议、IP、端口和安全入口访问。不要只输入服务器 IP，也不要猜一个固定的面板端口。

如果忘了入口，可以在服务器终端执行：

1pctl user-info

这些输出包含管理信息，不要公开截图。首次访问成功后，在面板设置中检查账户安全选项，并配置面板自身的 HTTPS；面板 HTTPS 和稍后给网站开启的 HTTPS 是两处设置。

完成标志：浏览器能登录 1Panel，并看到服务器概览。

五、用 Codex 写出第一个网站

1. 在电脑上新建项目文件夹

在自己的电脑上创建一个空文件夹，例如 my-first-site。打开 Codex，选择这个本地文件夹作为项目，确认它能够读写该目录。如果界面要求选择运行位置，使用本地环境。具体入口可以参考 OpenAI 官方项目说明与本地和云端环境说明。

本文只需要 Codex 帮你写网站，不需要在网页中接入 AI 模型，因此不要往网页代码里填写 OpenAI API Key，也不用把服务器密码交给它。

2. 把需求说清楚

你可以直接复制下面这段要求：

请在当前文件夹中创建一个适合新手部署的中文个人网站。

页面内容：个人介绍、三个作品展示卡片、邮箱联系链接，
以及一个能输入两个数字并计算加减乘除的小工具。

技术要求：
1. 只使用原生 HTML、CSS 和 JavaScript。
2. 文件为 index.html、style.css、script.js，图片放在 assets 目录。
3. 不使用 npm、React、Next.js、数据库或后端服务。
4. 不依赖外部 CDN、字体服务或第三方接口。
5. 手机和电脑都能正常显示，文件路径使用相对路径。
6. 计算器检查空输入、非数字和除以零，显示清楚的中文提示。
7. 联系方式使用 mailto 链接，不要制作假装能提交的留言表单。
8. 不要加入密钥、账户密码、统计脚本和演示登录功能。

请实际创建文件，检查页面链接、资源路径和计算逻辑。
最后用新手能看懂的方式说明：如何本地打开，应该测试哪些操作，
以及通过 1Panel 静态网站部署时应该上传哪些文件。

这段要求最关键的是“原生 HTML、CSS、JavaScript”。第一版采用这种方式，生成的就是可以直接交给 Web 服务器展示的文件，不需要另外配置 Node.js 运行环境。

3. 在电脑上先看效果

让 Codex 完成后，打开 index.html，检查个人介绍、作品链接、页面样式与计算器。本文这种不加载接口、没有模块导入的简单页面，可以直接用浏览器打开。如果 Codex 实际生成了需要本地服务的功能，让它先改回约定的三个文件结构。

计算器至少试四组输入：正常数字、空输入、小数和除以零。缩小浏览器窗口，看看手机宽度时有没有内容挤出屏幕。

需要修改时，继续在原来的对话中说明，例如：“把作品展示改成两列，手机一列；计算结果保留合理的小数位；联系邮箱换成我的公开邮箱。”每次完成后再检查一次。

完成标志：项目文件真实存在，页面能打开，按钮能工作，展示内容已经换成自己的。

六、在 1Panel 创建网站，把文件传上去

1. 安装 OpenResty

回到服务器的 1Panel，进入“应用商店”，找到 OpenResty 并安装。它负责接收浏览器请求、把网页文件返回给访客。

本文先安装网站需要的这一项，不必把 MySQL、Redis、PHP 等应用都装上。遇到80或443端口被占用时，先检查是否已有其他 Web 服务，不要随意删除原有服务。

2. 创建静态网站

进入“网站”，点击“创建网站”，选择“静态网站”。填写你自己的主域名，例如 example.com；如果也准备使用 www.example.com，把它添加为其他域名。别名可以填写 my-first-site，便于识别目录。

此时先不勾选 HTTPS，等 HTTP 能正常访问后再申请证书。1Panel 的网站类型和域名字段可对照官方创建网站说明。

3. 找到真实的网站目录

创建后进入该网站的设置，找到“网站目录”，打开它显示的实际根目录。不要把网上某个固定路径照抄过来，因为安装位置、网站别名和运行目录可能不同。

通过面板文件管理上传 index.html、style.css、script.js，以及项目确实用到的 assets 目录。如果使用 ZIP 上传，解压后要核对层级：

网站根目录/
├── index.html
├── style.css
├── script.js
└── assets/        （有图片等资源时才需要）

错误示例是“网站根目录 / my-first-site / index.html”：首页被多套了一层目录，访客未必能访问到。

确认默认首页包含 index.html，并处理好面板原先创建的默认首页文件。替换前可以先下载备份。不要往公开网站目录里上传服务器密码、SSH 私钥或 .env 等配置文件。

完成标志：在面板显示的网站根目录里，直接能看到自己的 index.html。

七、做 DNS 解析，让域名找到服务器

进入域名当前使用的 DNS 服务商后台，添加下面两条记录。刚注册的域名，如果没有改过 Nameserver，通常使用注册商提供的解析；如果已经换成其他 DNS 服务，就去实际生效的服务商那里修改。

@ 表示根域名，例如 example.com；www 表示 www.example.com。只准备使用根域名时，可以只添加第一条，并只在面板绑定根域名。

记录值只填 IP，不填 http://，也不填面板端口。不要再为同一个名称保留互相冲突的旧 A 或 CNAME 记录；没有配置 IPv6 时，也不要添加或遗留指向错误服务器的 AAAA 记录。

如果已经使用 Cloudflare DNS，这次先选择“仅 DNS”，暂不开启代理，方便直接检查源站；没有使用 Cloudflare 就继续使用当前 DNS，不必为了这篇教程迁移。记录管理的字段可参考 Cloudflare 官方 DNS 说明。

保存后，在自己电脑终端查询：

nslookup example.com
nslookup www.example.com

查询到的地址应与服务器公网 IP 一致。DNS 缓存需要时间，没生效时先检查修改位置和记录值，不要连续更换一堆配置。

随后在浏览器访问 http://example.com。这时应该看到自己上传的首页。直接访问服务器 IP 不一定打开同一个网站，因为一台服务器可以按不同域名区分网站。

完成标志：HTTP 域名地址能显示自己的页面，图片、样式和计算器都正常。

八、申请 HTTPS 证书，正式用加密地址访问

先确认两个条件：需要申请证书的域名已经解析到这台服务器，外网能够通过80端口访问网站。

在 1Panel 的“证书”管理中创建 ACME 账户，填写自己的有效邮箱，再申请证书。以界面中可用的 Let's Encrypt 为例，填写需要使用的域名；同时使用根域名和 www 时，把两个名称都纳入证书。

本文先选 HTTP 验证。它通过网站路径验证你对域名的控制权，要求 OpenResty 与对应网站可访问；申请普通域名证书即可，先不要使用 *.example.com 这样的通配符。具体申请选项参考 1Panel V2 证书申请说明。

申请成功后，还要返回“网站 → 该网站设置 → HTTPS”，选择刚申请的证书并保存。仅仅在证书列表看到“申请成功”，不代表已经给网站启用了它。启用方式见网站 HTTPS 配置说明。

先确认 https://example.com 能正常访问，再开启 HTTP 自动跳转到 HTTPS。使用 www 时，也检查 https://www.example.com。开启可用的自动续签选项，并保留验证需要的条件；以后仍需关注续签结果。

网站证书只负责对应网站，不会自动替面板登录地址配置证书。两者需要分别管理。

完成标志：HTTPS 地址可以打开，浏览器没有证书警告，页面资源也正常加载。

九、以后改网站，就重复“本地修改、检查、上传”

第一版上线后，更新并不复杂：先让 Codex 在电脑里的项目上修改，本地确认效果，备份服务器现有文件，再上传需要替换的文件。

上传新首页之前，先传好它引用的新图片、CSS 和 JavaScript，避免页面短暂找不到资源。如果更新后仍看到旧样式，可以强制刷新浏览器，并确认服务器上的文件时间确实变化。多文件改动时，尽量选择访问较少的时间更新。

为方便恢复，把源码留在自己的电脑中；在 1Panel 的网站备份入口建立备份，并额外下载一份到服务器以外的位置。网站备份入口可参考 1Panel 官方说明。

上线前再用手机流量打开一次域名，确认不依赖自己家的网络。检查 HTTPS、导航链接、图片和计算器；确认公开页面没有测试资料、密码或者密钥。记下域名和服务器的续费时间，之后定期更新系统与面板，并在更新前备份。

十、遇到问题，先按现象找对应位置

如果不知道报错是什么意思，把具体错误文字、正在做的步骤，以及不含密码的截图发给 Codex，让它先解释原因、再给出排查顺序。不要一上来要求它重装服务器。

十一、下一步再做登录、留言和数据库

完成本文后，你已经走通了一个真实的上线流程：代码来自自己的项目文件夹，文件放在远程服务器，别人通过域名和 HTTPS 访问。

后续若要增加用户登录、多人留言、订单或者需要保密的 API 调用，就要引入后端程序与数据库。浏览器里的 JavaScript 对访客可见，不能把私密凭据藏进其中；需要保密的操作应交给服务器端处理。

这时可以让 Codex 继续补充后端、持久化数据、环境变量和部署文档，再使用 1Panel 的运行环境或容器部署，并通过网站反向代理转发请求。后端项目不能直接当作本文的静态文件上传；它需要启动服务、配置数据存储与备份。这适合作为完成第一个网站后的第二阶段。