用免费的网上工具，给小公司做一个“像样的官网”：

一个非技术创业者的完整实战故事

这不是一篇教你写代码的文章，而是一篇
“我怎么用几乎 0 成本＋AI＋网上免费工具，把自己公司的官网＋博客＋获客表单搭出来”的复盘。
你不需要技术背景，只需要一点耐心和好奇心。

一、很多小公司都有同一个问题：

“我知道自己该有个官网，但不知道从哪下手”

很多创业者都会经历这样一个阶段：

• 客户开始问：“你们有官网吗？可以发个链接给我看看？”
• 你手里只有 PPT、Notion 链接、或一堆零散资料；
• 你知道，“我是该有个像样的官网了”，
  但一想到要建站，就脑子里全是问号：

我要不要找外包？
要不要买服务器？
是不是得找个工程师？
费用会不会失控？
我这种小公司，值不值得折腾？

我一开始也一样。

我想要的其实很简单：

1. 一个看起来专业、干净的官网首页，
2. 有一点内容输出的地方（blog/insights），
3. 有一个能真正“接到客户信息”的联系表单，
4. 这些东西最好都在我自己手里，而不是锁在某个昂贵的 SaaS 后台里。

听上去不难，但如果走“传统路线”，这件事往往会变得非常重：

• 找外包公司，流程复杂+费用不低；
• 自己搭 WordPress，要买服务器、装插件、维护安全；
• 或者用一些“傻瓜式建站工具”，但可定制性有限、还经常被各种付费墙拦住。

直到后来，我逐渐摸清了一条完全不同的路：
用互联网已经存在的一堆免费工具，把公司官网按“乐高积木”的方式拼出来。

二、我一开始以为需要这些东西，其实后来发现都不用

刚开始时，我以为必须要准备：

• 一台服务器（云主机之类）
• 一个复杂的建站系统
• 自己搭数据库
• 各种“专业后台”
• 甚至还要搞安全加固、备份等等……

后来实际走了一圈，发现：

对于一个小型 B2B 公司来说，这些东西都是“过度设计”。
你真正需要的，是一个能清晰表达你价值的首页，加上一个可靠的“联络我”入口，再加上一点日常内容输出。

如果你用对了工具，这几件事其实可以做到：

• 不买服务器
• 不用自己管数据库
• 不用自己配置邮件服务器
• 不用懂前端框架细节
• 还可以借助 AI 帮你写代码、改排版、甚至帮你部署

于是，我开始重新设计自己的“建站策略”。

三、新路线：用一套“现代免费工具组合”搭出完整官网

最后，我挑出的组合，大概是这样一套“乐高”：

• GitHub：代码和文件的“家”，记录整个网站的历史版本；
• Cloudflare Pages：帮你把网站发布到全世界，相当于“免费的静态网站托管+CDN”；
• 一个静态网站框架（例如 Astro）：让页面结构清晰，适合内容型网站（官网＋博客）；
• Cloudflare Turnstile：替代传统验证码，让联系表单不被机器人滥用；
• Resend：一个专门帮你发邮件的服务，每有一个新咨询就给你发一封邮件；
• Cloudflare D1：一个轻量数据库，专门用来保存“谁在你的网站上留了联系方式”；
• AI 助手（比如 ChatGPT / Codex）：帮你写页面、改版式，甚至帮你连接上述所有服务。

如果你完全不写代码，你只需要理解这些工具“各自干什么”的角色，大致就够了：

• GitHub：像你的“版本笔记本”，记录每一次修改；
• Cloudflare Pages：像免费且全球加速的“网站服务器”；
• Turnstile：像一个优雅的门卫，帮你挡掉机器人；
• Resend：像一间专业的“邮件邮局”；
• D1：像一个小而轻的“客户线索簿”；
• AI：像一个听你指挥的“兼职技术合伙人”。

四、先别谈技术，先把“官网应该长什么样”想清楚

在真正搭网站之前，我做了一个很重要的决策：
先不要想技术栈，先把“官网的内容结构”想明白。

对于一家小而精的公司，我最后沉淀出的结构是：

1. Hero 区（第一屏）
   一句话说明：你是谁？帮谁？解决什么问题？
   这是客户打开网站的第一印象，也是整个官网转化率的核心。

2. Services / 我们能做什么
   用 3–4 个模块，清晰地描述你提供的服务，不要写得太营销，
   更像是一个靠谱顾问在认真解释自己的工作范围。

3. Why Us / 为什么选择我们
   把你的小公司真正的优势写出来：

   • 比如“小而精、灵活、有跨文化经验、懂某个细分行业”等等。

4. Cases / 典型案例（哪怕只有 2–3 个）
   不一定要写得很长，但要真实、有画面感，
   让人感觉你是“真的干过事”的。

5. News / 公司动态
   这可以非常简单，比如：

   • 新服务上线
   • 参加了某个活动
   • 发布了一篇行业观察
   • 让公司显得是“活的”。

6. Insights / Blog / 文章
   这里是你输出观点、行业洞察的地方。
   它会成为你在潜在客户心中的“专家形象”的关键部分。

7. Contact / 联系我们（带表单）
   最重要的一块。
   不只是一个邮箱地址，而是一个真正的联系表单，
   客户可以直接留下：公司名、姓名、邮箱、咨询内容。
   所有这些信息都应该被保存下来，而不是只躺在你的邮箱里。

当你把这些块写出来后，其实你已经完成了官网最难的部分：
你把“你是谁”“你做什么”“别人为什么要找你”讲清楚了。

接下来，才是“用工具把这些内容呈现出来”的问题。

五、如何用这套工具，把内容变成一个真正跑起来的网站？

下面这部分我尽量用“非技术”的语言概括整个流程，你可以当作一个“路线图”。

1. GitHub：你的内容与结构的“中央仓库”

你可以把 GitHub 理解为一个在线的“版本笔记本”：

• 你所有网站相关的文件（文字、布局、配置）都放在这里；
• 每次你做修改，都像是给笔记本加了一页，并自动打上时间标签；
• 哪天发现改错了，你可以随时回到之前的版本。

有了 GitHub，你就有了：

• 一个不会丢的地方存放你的官网；
• 一个可以被 AI 帮你修改的代码仓库；
• 一条很清晰的“成长轨迹”：从最初第一版，到后来越来越稳的版本。

2. Cloudflare Pages：让你的网站真正“对外上线”

接下来你只要做一件事：

告诉 Cloudflare Pages：“我的网站代码在 GitHub 的这个仓库里。”

然后它会帮你：

• 每次你在 GitHub 上确认修改，它就自动重新构建网站；
• 把最新的版本发布到互联网上；
• 自动配置 HTTPS（浏览器里的小锁头）；
• 自动用 CDN 帮你加速，让世界各地访问都够快。

对你来说，这意味着：

• 你不需要买服务器；
• 不需要自己部署什么东西；
• 甚至不需要知道“服务器”这个词具体怎么回事。

你只要记得一句话：
“我改完东西，推到 GitHub，Cloudflare 就会帮我上线。”

3. 博客 / Insights：让官网成为“内容资产”的入口

小公司做官网，最大的误区是：

只把官网当“在线名片”，而不是“内容与信任的容器”。

你可以在网站上加一个简单的“文章列表”：

• 用来写行业观察；
• 用来记录你在项目中的一些经验；
• 用来回答客户常见的问题。

这会带来几个好处：

1. 你逐渐积累起自己的“内容资产”；
2. 潜在客户通过搜索，可能先看到你的文章，再顺着认识你；
3. 老客户也能从你的文章中看到你的持续精进。

在这一步，技术层面其实非常简单，你只需要告诉 AI：

“帮我生成一个简单的博客列表页面和文章详情页面，
我只需要能添加新文章、显示发布日期、标题和内容。”

网站这时就不只是“一个静态的名片页”，而是真正成为了你对外表达和沟通的主阵地。

六、让“联系表单”真正成为获客入口，而不是摆设

几乎每个官网都有“Contact”页面，但大部分都非常鸡肋：

• 要么只是一个邮箱地址；
• 要么是一个表单，填了之后你也不知道消息去哪了；
• 要么收一堆垃圾机器人提交的信息，严重影响体验。

我希望我的官网做到的是：

1. 访客填写表单；
2. 我立刻收到一封邮件；
3. 同时，这条信息会被保存下来，成为一条 lead 记录，
   以后可以用来跟进、统计、分析。

这就是：

“一个真正有用的联系表单”
≈ “一个简化版的获客系统入口”。

为了达成这件事，我用到了三块“乐高”：

1. Turnstile：防垃圾的“隐形门卫”

联系表单，是最容易被机器人滥用的地方：

• 有的脚本会疯狂往各个网站提交垃圾广告、钓鱼链接；
• 如果你不做保护，很可能每天邮箱里都是垃圾信息。

传统的验证码要你选红绿灯、选斑马线，非常影响体验。
Turnstile 的好处是：

• 无需用户点一堆奇怪的图片；
• 验证过程默默在后台完成；
• 对真实用户几乎“透明”，但对机器人很不友好。

对你来说，这意味着：

• 你可以放心地在官网公开表单；
• 真实客户不会被打扰；
• 你的邮箱不会被垃圾淹没。

2. Resend：每条表单提交，都变成一封“提醒邮件”

当访客填写完表单并提交后，我要的效果很简单：

• 我能马上收到一封电邮：
  • 标题里包含：公司名 / 姓名；
  • 邮件正文里有：公司、联系人、邮箱、电话、咨询内容；
• 我可以直接点“回复”，跟客户进行进一步沟通。

Resend 就像一个专门替你托管“发信功能”的服务：

• 你不需要搭建自己的邮件服务器；
• 不需要关心邮件协议；
• 不需要研究 SPF、DKIM 那些专业名词；
• 只要告诉系统：“有新表单，就发一封邮件到我的地址”。

这样，你的网站从此不再是一个“静态摆件”，
而是一个会自动跟你打招呼的获客入口。

3. D1：把每一个访客都留在你的“线索本”里

邮件收到了，但如果：

• 你忙起来没看；
• 想统计过去一个月有多少人联系过你；
• 想知道哪些是来自官网首页、哪些是来自某篇文章；

只靠邮箱是很难处理的。

所以我需要一个地方，把每一个 lead 结构化地记录下来。
D1 就是干这个用的：

• 每一条“联系提交”都会变成一条记录；
• 里面有：来源、姓名、邮箱、公司、咨询内容、时间、额外信息（比如浏览器类型）；
• 你可以随时查过去一段时间的 lead 情况：
  • 数量变化；
  • 行业类型；
  • 哪些渠道带来的更多。

这就相当于：

你的网站自带一个简化版的“CRM 表”，
不用再疯狂搜邮箱或者翻 Excel。

七、AI 在里面扮演的角色：不是替代你，而是“放大你”

在这个整个过程中，AI 的角色非常关键，但它 不是“替代人”，而是让你一下子拥有一个技术合伙人。

你不需要自己琢磨所有细节，你需要做的是：

1. 想清楚你要什么：

   • 我要一个什么风格的首页？
   • 我想要哪些板块？
   • 联系表单要收集哪些信息？
   • 数据要保存在哪里？
   • 访客提交后我要收到什么通知？

2. 把这些需求尽量用自然语言说清楚，
   交给 AI，让它帮你：

   • 生成页面结构；
   • 调整布局；
   • 选择合理的颜色和排版；
   • 写连接 Turnstile / Resend / D1 的逻辑；
   • 给出部署方案和文件结构建议。

3. 你的工作从“自己写代码”变成了：

   • 做产品经理：想清楚要什么功能；
   • 做设计师：决定呈现风格；
   • 做编辑：写出对客户友好的文案；
   • 做 CEO：决定什么上线、什么延后。

从某种意义上说，这套体系就是：

用 AI + 免费云服务，给自己配了一个“虚拟技术团队”。

八、如果让你从零开始，我会建议你这样一步步来

假设你现在什么都没有，但已经看完了这篇文章，我会建议你按这个顺序来走：

1. 用一张纸画出官网的结构
   标出：Hero / Services / Why Us / Cases / News / Insights / Contact。

2. 把每个区域的文案写粗略版本，先不要纠结句子是否完美
   重点是：讲清楚你是谁、你做什么、你擅长什么、别人找你能得到什么。

3. 注册 GitHub 和 Cloudflare 账号
   不需要懂技术，只要跟着引导往下点就行。

4. 用 AI 帮你生成网站框架
   比如你可以对 AI 说：

   “我想做一个面向日本企业的咨询/产品/开发支持公司官网，
   布局参考 XX 网站风格，
   请帮我生成适合的小公司官网结构和 HTML/布局文件。”

   然后让 AI 用你刚才写的文案填进去。

5. 把 AI 给你的文件放进 GitHub 仓库，让 Cloudflare Pages 连接它
   从这一刻起，你第一次拥有了一个“真的在线的官网”。

6. 接着，只做两件事：不断打磨首页 & 搭建 Contact 表单

   • 首页要越来越清晰地表达你的价值；
   • Contact 表单要越来越好用（字段恰到好处、不吓人）。

7. 再进一步，把联系信息“接入邮箱 + 存入数据库”
   这一步可以让 AI 帮你写中间逻辑，
   你的重点是：

   • 写下你希望表单提交后发生什么；
   • 确认每次提交你都能收到电邮；
   • 确认这些记录被保存。

8. 等这一切跑起来，你再慢慢加 blog、案例页、新闻更新
   每加一个内容，你的网站就更“像一个认真营业的公司”。

九、写给每一个正在创业、还没来得及做官网的人

如果你看到这里，我想对你说几句心里话。

1. 你不缺技术栈，你缺的是一条“不会把自己吓退的路径”。
   很多创业者不是不懂技术，而是被“建站这件事”过度神话了。

2. 一个小公司官网，不需要酷炫到像大厂官网。
   它只要：

   • 干净、清晰、真诚；
   • 能讲清楚你做什么；
   • 能让人方便地联系上你；
   • 能让你留住今天的每一条线索。

3. 即使你不写一行代码，现在的工具和 AI 也足够把你扶上马。
   你需要做的是：

   • 学会用故事讲清楚你的业务；
   • 学会用简单的方式告诉工具“你想要什么”；
   • 学会一点点耐心和迭代。

4. 官网的完成不是结束，而是你与市场对话的开始。
   以后你写的每一篇 blog、每一次首页微调、每一次表单优化、
   本质上都是在对未来客户说一句：

   “我在认真经营这家公司，也在认真为你准备。”

如果你已经走到了这一步，那么，你和那套“看起来很专业的公司官网”之间，
其实只差一个决定：开始动手。

剩下的，就交给这些免费的工具，
和那个随时可以帮你写代码与排版的 AI “技术搭档”。