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

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

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

Astro Homepage

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

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

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

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

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

我一开始也一样。

我想要的其实很简单：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

GitHub Homepage

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

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

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

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

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

Hero 区（第一屏）
一句话说明：你是谁？帮谁？解决什么问题？
这是客户打开网站的第一印象，也是整个官网转化率的核心。
Services / 我们能做什么
用 3–4 个模块，清晰地描述你提供的服务，不要写得太营销，
更像是一个靠谱顾问在认真解释自己的工作范围。
Why Us / 为什么选择我们
把你的小公司真正的优势写出来：
- 比如“小而精、灵活、有跨文化经验、懂某个细分行业”等等。
Cases / 典型案例（哪怕只有 2–3 个）
不一定要写得很长，但要真实、有画面感，
让人感觉你是“真的干过事”的。
News / 公司动态
这可以非常简单，比如：
- 新服务上线
- 参加了某个活动
- 发布了一篇行业观察
- 让公司显得是“活的”。
Insights / Blog / 文章
这里是你输出观点、行业洞察的地方。
它会成为你在潜在客户心中的“专家形象”的关键部分。
Contact / 联系我们（带表单）
最重要的一块。
不只是一个邮箱地址，而是一个真正的联系表单，
客户可以直接留下：公司名、姓名、邮箱、咨询内容。
所有这些信息都应该被保存下来，而不是只躺在你的邮箱里。

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

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

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

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

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

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

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

有了 GitHub，你就有了：

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

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

接下来你只要做一件事：

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

Cloudflare Pages

然后它会帮你：

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

对你来说，这意味着：

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

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

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

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

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

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

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

这会带来几个好处：

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

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

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

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

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

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

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

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

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

这就是：

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

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

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

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

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

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

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

Cloudflare Turnstile

对你来说，这意味着：

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

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

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

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

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

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

Resend Homepage

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

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

邮件收到了，但如果：

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

只靠邮箱是很难处理的。

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

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

这就相当于：

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

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

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

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

想清楚你要什么：
- 我要一个什么风格的首页？
- 我想要哪些板块？
- 联系表单要收集哪些信息？
- 数据要保存在哪里？
- 访客提交后我要收到什么通知？
把这些需求尽量用自然语言说清楚，
交给 AI，让它帮你：
- 生成页面结构；
- 调整布局；
- 选择合理的颜色和排版；
- 写连接 Turnstile / Resend / D1 的逻辑；
- 给出部署方案和文件结构建议。
你的工作从“自己写代码”变成了：
- 做产品经理：想清楚要什么功能；
- 做设计师：决定呈现风格；
- 做编辑：写出对客户友好的文案；
- 做 CEO：决定什么上线、什么延后。

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

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

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

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

用一张纸画出官网的结构
标出：Hero / Services / Why Us / Cases / News / Insights / Contact。
把每个区域的文案写粗略版本，先不要纠结句子是否完美
重点是：讲清楚你是谁、你做什么、你擅长什么、别人找你能得到什么。
注册 GitHub 和 Cloudflare 账号
不需要懂技术，只要跟着引导往下点就行。
用 AI 帮你生成网站框架
比如你可以对 AI 说：

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

然后让 AI 用你刚才写的文案填进去。
把 AI 给你的文件放进 GitHub 仓库，让 Cloudflare Pages 连接它
从这一刻起，你第一次拥有了一个“真的在线的官网”。
接着，只做两件事：不断打磨首页 & 搭建 Contact 表单
- 首页要越来越清晰地表达你的价值；
- Contact 表单要越来越好用（字段恰到好处、不吓人）。
再进一步，把联系信息“接入邮箱 + 存入数据库”
这一步可以让 AI 帮你写中间逻辑，
你的重点是：
- 写下你希望表单提交后发生什么；
- 确认每次提交你都能收到电邮；
- 确认这些记录被保存。
等这一切跑起来，你再慢慢加 blog、案例页、新闻更新
每加一个内容，你的网站就更“像一个认真营业的公司”。

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

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

你不缺技术栈，你缺的是一条“不会把自己吓退的路径”。
很多创业者不是不懂技术，而是被“建站这件事”过度神话了。
一个小公司官网，不需要酷炫到像大厂官网。
它只要：
- 干净、清晰、真诚；
- 能讲清楚你做什么；
- 能让人方便地联系上你；
- 能让你留住今天的每一条线索。
即使你不写一行代码，现在的工具和 AI 也足够把你扶上马。
你需要做的是：
- 学会用故事讲清楚你的业务；
- 学会用简单的方式告诉工具“你想要什么”；
- 学会一点点耐心和迭代。
官网的完成不是结束，而是你与市场对话的开始。
以后你写的每一篇 blog、每一次首页微调、每一次表单优化、
本质上都是在对未来客户说一句：

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

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

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