第三期正文

题记：这是我「OPC（One Personal Company）探索实录」系列的第三期。

上一期发了 DiffMaster 之后，有朋友问：“官网怎么搭的？服务器如何部署？如何让别人访问？HTTPS 怎么搞的？SEO 怎么做？”

这一期就把从买服务器到官网上线的全套流程拆开，一步一坑地聊。

一、开头：先把锅架好

先说一下这一期会聊什么：

1. 服务器选哪家、备案有多折腾（含吐槽）
2. 官网怎么开发的（AI 辅助，真香）
3. 怎么部署上线（1Panel 点一点就行）
4. HTTPS 自动续签（再也不用怕证书过期）
5. 大模型帮我做 SEO 优化
6. 百度统计接入（看看谁来了）
7. 花了多少钱、多少时间

废话不多说，开整。

二、服务器与备案：选了腾讯云，然后开始了漫长的“再备案”

2.1 服务器选哪家

服务器我用的腾讯云。原因很简单：我之前就买过，而且刚好有活动 4c/4g 79 元/年，超划算有木有 😃

如果你正好也要买服务器，可以看看腾讯云的活动（云服务器、数据库、COS、CDN、短信等都有），链接放这里：https://curl.qcloud.com/Po8pq7QM

配置不用太高，轻量应用服务器就够了，跑一个静态网站 + 轻量后端完全没问题。

2.2 备案吐槽（此处有情绪 😤,ayayaya~）

这里要说一个让我血压升高的事情。

我的域名 boyeye.com 之前在阿里云已经备案完成了。我以为：备案都过了，换个服务器商应该可以直接解析吧？

天真。

腾讯云告诉我：接入服务商不同，需要重新备案。

是的，你没有看错——域名已经备案过了，但因为换了个云厂商，就要再备一次。

流程一个不少：

• 拍照（举着承诺书那种）
• 填表（还要写“网站内容介绍”）
• 等管局审核（又是好几天的焦虑）

我当时的状态：😤→😐→😮‍💨→🙏

经验总结：备案跟的是服务器，不是域名。跨云迁移之前，请提前规划好时间，这活儿急不来。

吐槽归吐槽，流程还是走完了。

当当当当~

如果你没有 ICP 备案，就算配置了域名解析，也会很快被拦截——网页会显示“未备案，暂不能被访问”。

2.3 番外：先把门牌号搞定——域名购买与解析

在说服务器和备案之前，其实还得先有一个域名。没有域名就好比开店没有招牌——谁找得到你？

我是在阿里云买的域名

域名注册商我用的阿里云万网，地址放这里：https://wanwang.aliyun.com/domain/

理由其实很简单：

• 牌子大，稳定
• 功能全（免费云解析、安全锁这些都有）
• 价格透明，首年有时还有优惠

我买的是 boyeye.com，.com 还是最通用、最不容易出错的。而且域名也不贵，越不规则的越便宜，有的才几块钱一年。

如果你还没想好用什么后缀，无脑 .com 或者 .cn 基本不会错。除非你的产品有明显的“调性”（比如 .fun 适合兴趣类、.vip 适合高端服务），否则主流后缀最稳妥。

买完之后要做什么？——配置域名解析

买完域名只是一个开始。真正让域名“指向”你的服务器，需要做“解析”。

我的操作步骤（在三家平台都通用的流程）：

1. 登录阿里云万网的控制台 → 找到“域名列表”
2. 点击“解析” → 进入云解析 DNS 管理后台
3. 添加记录：
   • 记录类型：选 A 记录（用来指向服务器的 IP 地址）
   • 主机记录：填 @（代表主域名 boyeye.com）或者你要用的子域名，比如 diff（代表 diff.boyeye.com）
   • 记录值：填腾讯云服务器的公网 IP 地址（注意：不是内网 IP）
   • TTL：默认 10 分钟就行（除非你频繁换 IP）
4. 点击“确认”，解析就配置好了。

关于生效时间：阿里云的解析通常几分钟到几十分钟就会生效，不需要等太久。

一个小经验：配置完解析后，可以用 ping diff.boyeye.com 或者在浏览器里直接访问试试。如果能显示你的服务器默认页面（比如 Nginx 欢迎页），就说明解析已经生效了。

这里有一个很常见的坑（值得注意）

解析配置完 ≠ 域名能打开网站。

因为你还需要：

1. 服务器上配置站点（后文会讲 1Panel 里怎么配）
2. 备案完成（如果服务器在国内，域名必须先备案才能解析生效）

我这次在腾讯云买服务器，但域名在阿里云注册——跨云是可以的，只要在域名注册商那里把解析指向腾讯云的 IP 就行。

但备案必须和服务器厂商一致，所以我才有了前面那段“从阿里云到腾讯云再备一次案”的糟心经历。

结论：域名可以在 A 云买，服务器可以在 B 云租，但备案跟着服务器走。跨云操作没问题，就是备案可能要再来一次。

官网域名 diff.boyeye.com 终于可以正常解析了。

三、官网开发：Claude Code + UI/UX Pro Max

3.1 为什么要用 AI 做官网

说实话，我一个后端偏全栈的，审美和前端效率都不是我的强项。

但是做产品官网，又绕不开“好看”这件事。怎么办？

让 AI 来。 我选了 Claude Code + 一个叫 UI/UX Pro Max 的 Skill。

工具链接：https://uupm.cc/#features ，按照教程即可完成安装

大家来瞅瞅看，这么多套主题，比我自己做的那可是天壤之别：

3.2 UI/UX Pro Max 是什么（30 秒介绍）

它是一个 AI 驱动的设计智能库，里面内置了：

• 57 种 UI 样式
• 95 种配色方案
• 56 种字体搭配
• 29 种落地页模式
• 等等……

对于我这种“能写代码但不会设计”的人来说，简直是救命稻草。

3.3 我的实操过程

第一步：用自然语言描述需求

我对 Claude Code 说：

“帮 DiffMaster 做一个官网落地页。产品是一个文档对比浏览器插件，支持 Word/PDF/文本比对，本地处理不上传，免费。风格要科技感、简洁、可信。”

第二步：AI 自动推理

UI/UX Pro Max 开始工作：

• 产品类型 → 开发工具
• 推荐风格 → 科技感、简洁
• 推荐落地页模式 → Hero + Features + CTA
• 推荐配色 → 科技蓝（主色）+ 白色（背景）+ 橙色（CTA 按钮）

第三步：生成代码

AI 直接生成了一个完整的 HTML/CSS 页面，包含：

• 头部 Hero 区域（产品名称 + 一句话说明 + CTA 按钮）
• 功能列表（三个核心功能卡片）
• 使用场景（程序员/产品/编辑/法务/学生）
• 底部（获取方式 + 链接）

第四步：微调

生成的代码已经能直接用。我只改了几个地方：

• 替换成了真实的 Chrome 商店链接和官网链接
• 加了一个 GIF 演示图
• 调整了手机端的间距

效果：以前做一个像样的官网要几小时甚至几天，现在几十分钟就能拿到一个可用的版本。

技术人的审美短板，被 AI 补上了。真的，强烈安利。

当当当当~ 成品在这里：http://diff.boyeye.com/ 大家来看看哟，你也快去试试吧。

四、部署上线：1Panel + 静态网站 + HTTPS 自动续签

官网代码写完了，接下来要让它“活”在互联网上。

4.1 为什么用 1Panel

以前配 Nginx、配 HTTPS，我要打开终端敲命令，遇到报错就 Google 半天，很痛苦。

1Panel 是一个 Linux 面板，把所有的运维操作都变成了可视化、点一点。至于为什么不用宝塔？一是它开源、没广告，二是单纯觉得配色好看，用着舒服。

优点：不懂命令行的小白也能快速上手。

4.2 静态网站部署流程（三步走）

第一步：在 1Panel 中创建静态网站站点

在 1Panel 后台点“网站” → “创建静态网站” → 填域名 diff.boyeye.com。完成。

第二步：上传官网文件

1Panel 支持拖拽上传，或者通过内置的文件管理器上传。我把官网的 HTML/CSS/JS 文件整个文件夹拖进去。

第三步：配置域名映射

1Panel 自动识别了刚才创建的站点，域名已经绑定好了。点一下“启用”。

整个过程不到 5 分钟，没有任何命令行。

以前我要敲 scp、mv、nginx -t、systemctl reload nginx……现在：点一点，上传一下，完事。

4.3 HTTPS 证书：自动获取 + 自动续签（重点）

这是我最喜欢的功能。

以前：手动申请证书 → 手动上传到服务器 → 手动配 Nginx → 设个日历提醒每 3 个月换一次 → 每次换的时候都提心吊胆。

现在：在 1Panel 里点“网站” → 点域名 → 点“SSL” → 点“申请证书” → 勾选“自动续签” → 完成。

整个过程不到 1 分钟。之后证书快过期时，1Panel 会自动续签，我再也不用管了。

然后在网站里启用 HTTPS，选择刚刚申请的证书，就 OK 啦。

这里必须给 1Panel 点个赞。这种“少操心”的体验，对 OPC 来说太重要了。

五、大模型优化与统计：让官网能被搜到、被看到

网站上线了，但如果没人知道它存在，就等于没有。

5.1 大模型辅助 SEO 优化

我直接问了 DeepSeek：

“帮我的 DiffMaster 官网做 SEO 优化和 GEO 优化，它是一个文档对比浏览器插件。”

DeepSeek 给了我几个建议：

建议一：关键词布局

在以下位置自然融入关键词：

• Title：DiffMaster - 文档对比工具 | 支持 Word/PDF 比对 | 免费插件
• Description：DiffMaster 是一款免费的浏览器插件，支持文本、Word、PDF 等多种文档的差异对比，本地处理不上传，保护隐私。
• H1：DiffMaster：文档对比工具
• 各 H2：为什么选 DiffMaster、支持多种文档格式、谁在用 DiffMaster

关键词包括：文档对比工具、PDF 对比插件、Word 差异对比、代码对比工具。

建议二：结构化数据（Schema.org）

DeepSeek 建议添加 SoftwareApplication 类型的结构化数据，让搜索引擎更准确地理解这是一个软件产品。我在官网 head 里加了一段 JSON-LD 代码，包含了产品名称、描述、价格（免费）、操作系统、应用类别等信息。

建议三：内容策略

DeepSeek 建议在官网增加“使用场景”板块，覆盖更多长尾关键词。于是我加了：

• 针对程序员：PR diff、代码审查
• 针对产品经理：PRD 版本对比
• 针对编辑：稿件修改对比
• 针对法务：合同条款对比
• 针对学生：论文修改对比

GEO 优化（生成式搜索优化）是我后来补充的概念：让大模型在回答相关问题时，能优先引用你的官网内容。结构化数据 + 关键词布局 + 高质量内容是基础。

5.2 百度统计接入：看看谁来了

官网不能是“瞎子”，我得知道有没有人来、从哪来的。

接入步骤（超级简单）：

1. 注册百度统计账号（免费）
2. 在“代码管理”中获取一段 JS 代码
3. 复制这段代码
4. 在 1Panel 的官网设置中，找到“footer 区域”，粘贴进去
5. 保存

整个过程 5 分钟。

我看到了什么数据（诚实版）：

目前数据还比较惨不忍睹——记得把自己的 IP 过滤掉，不然看着好像有几百个“自己”在访问，过滤完一看：0。@.@~

• 每天 UV 确实不多（嗯，毕竟还没怎么推广）
• 主要来源：直接访问 + 上期知乎文章的引流
• 已经有少量关键词搜索进来了，比如“pdf 对比工具”“word 文档对比”

看到有人通过搜索找到我的官网时，有一种莫名的开心——就像在黑屋子里开了一盏小灯，虽然不太亮，但知道有人在找。

六、总结：成本、时间、以及下一期预告

6.1 成本清单

项目	费用
服务器（腾讯云轻量）	活动价，一年 79 元
域名	boyeye.com，一年 19 元（你可以买更便宜的）
官网开发（Claude Code + UI/UX Pro Max）	0 元
1Panel 面板	0 元（开源免费）
HTTPS 证书	0 元（自动申请）
百度统计	0 元
合计	98 元/年

结论：把一个产品官网从 0 做到“能用、能搜到、能统计”，技术成本几乎为 0。真正的成本是时间。

6.2 时间投入

环节	耗时
服务器购买 + 备案	备案等了一周（实际操作约 2 小时）
官网开发（AI 辅助）	约 2 小时
1Panel 部署 + HTTPS 配置	约 1 小时
SEO 优化 + 百度统计	约 1 小时
合计（实际动手时间）	约 6 小时

一个周末的下午就能把官网搞定。门槛比以前低太多了。（当然，视你的技术能力，时间可能有增减，毕竟我也是摸索着走过来的）

6.3 下一期预告

官网搭好了，统计有了，接下来就是让更多人看到。

下一期：《OPC 周记#4：我把 DiffMaster 发到了 5 个地方，哪个渠道最有用？——推广实验数据复盘》

我会真实记录：

• 在某乎/某金/某DN/某红书发帖的效果
• 哪个渠道带来了最多的安装量和关注量
• 哪些渠道是“无效努力”

数据好看不好看，我都写。球球老少爷们（话说不会真有女生来看我这种文吧（惊掉下巴）继续来看。

七、如果你也在折腾网站

欢迎在评论区告诉我：

你的官网用的是哪家服务器？备案用了多久？

或者如果你也在用 1Panel / Claude Code / 百度统计，可以交流一下心得。

如果大家在操作中遇到问题，也欢迎在评论区或者私信留言，我看到的话会尽量提供一些技术支持。

评论区见。

下期预告：《OPC 周记#4：推广实验数据复盘——我把 DiffMaster 发到了 5 个地方》

免责声明：本文分享的是个人开发经历和工具使用体验，不构成技术建议或商业承诺。工具和价格可能随时间变化，请以官网为准。