所有教程都该重塑：我零基础上线了一个网站

前段时间，我用 AI编程 做了一版《随园食单》的展示页我用AI又把《随园食单》印到了画轴上，效果好得让我惊了一跳。那一刻我突然很想把这个小网页作品“上线”，让更多人看到AI + 文化的乐趣。

问题来了：

我完全不懂技术，上线网站要怎么做？

这大概是很多“文科生式 AI 编程者”的共同困境。你能用 AI 写网页，但不会让它出现在互联网上。

在今天之前，我也一样手足无措。

直到这次，我终于摸索出了一套： 免费、简单、0基础可复制的上线方法。

并且，我意识到： 在 AI 时代，所有教程都该重塑了。专注于流程和细节的图文教程已经过时了，所有教程应该着重于知识盲点的普及。

一句话教程：知识点 + AI

我把我上线网站的教程总结成两点：

一个知识点：Cloudflare 可以免费上线静态网站。

一个工具：AI 带我操作所有细节。Chatgpt、豆包、元宝、千问都可以。

知道方向后，我对 AI 说：

“我现在是一个小白 ,完全不懂网络知识 ，我现在想把AI写的一个静态网站发布为人人都可以访问的网站, 我听别人说用CF最方便 。帮我解释下具体什么意思啊”

然后——所有步骤、截图、卡点、报错，全让 AI 带我走完。

这就是关键： 自己不用啃黑话。

剩下的，全交给 AI。

我的成果

我的网站里塞了 300 多 M 的图片，流程算是偏复杂的。 但我回家吃完饭，边问 AI 边操作，大概 3 小时就上线了。

网站地址是： looklookseesee.top

如果你的网页更简单，1 小时足够。

AI 怎么帮我的？ 就是这样👇 我卡住——截图给它。 它理解——告诉我点哪里。 我照做——继续前进。

整个体验就像有个永远不烦的技术顾问站在你旁边。

而全程，最大的难点可能就是知道这个确信的方案：用CloudFlare部署网站。

为什么我说“所有教程都该重写”？

这次经历让我意识到：

① 传统流程型教程已经落伍了

截图步骤再详细，也会因为界面更新而失效。 但 AI 不会过时，它会根据当下界面重新给指引。

② 传统教程太粗糙

只讲核心步骤，不讲细节。 但 AI 擅长补全每一个细节，包括你没想到的问题。

③ 未来的学习应该是“探索式”

教程只是告诉你知识盲点： “用 Cloudflare 就能上线。”

其他细节的操作过程，不应该照搬死记，而应该由 AI 带你走。

所以未来的教程侧重点应该是：

给出方向，补齐他人的知识盲区。

古法教程之：白嫖CloudFlare上线一个网站

为了记录过程，我也做了一版“古法图文教程”。

它并不严谨，只作为个人复盘参考。我觉得你完全没有必要往下看，拉倒最后帮我完成一下完读率关闭页面即可。

背景：

本方法适用于静态网页或者一些轻量级的网页的部署（上线）。

静态网页就是内容固定不变、只负责展示信息、无法根据用户操作实时改变内容的网页。常见的例子包括公司简介、产品说明书、简单的博客文章等。这类形态的网页技术难度低，很适合用一些免费资源进行部署。

步骤：

1.准备：确认你的网站文件。首先需要确认需要上线发布的网站源文件里有标准的index.html文件，其他命名的不行。

2.注册 Cloudflare。进入官网注册一个账号（用邮箱即可）。

https://dash.cloudflare.com/sign-up

3.进入 Cloudflare 控制台，选择Create application（创建应用）。

4.选择上传文件方式。很简单的网页就选“Drag and drop your files",这种的话就是直接从本地上传。因为我的网页里面有300M的图片，经过研究，还是选择第一种方式，也就是从Github的代码库里上传。其实后续使用发现，还是从github上传文件方便，这样你如果代码修改了直接上传到github上就行了，网站内容会直接同步更新。

5.将网站代码上传到Github上。代码上传到github对于小白其实也不难。直接在AI编程软件里让AI帮你上传即可，这里不细聊。

6.Cloudflare Pages 连接 GitHub 。当代码都上传到Github后，回到Cloudflare，选择连接 GitHub。第一次会让你进行授权。默认确认即可。

7.部署。在 Cloudflare 授权完成后，在Cloudflare的页面里你会看到你的 GitHub 仓库列表。找到刚刚创建的仓库：点击 Begin setup。

填写技术架构，因为我这个属于静态网页，都是默认值，一直点击下一步。

一直点击下一步，所有都设置好后，Cloudflare 就会自动执行如下操作：

拉取 GitHub 代码

发布到 Pages

分配一个公开访问的网址

所有都执行完毕后，页面上会出现一个大地球，就是意味发布成功了。同时会给出一个可以公开访问的地址。其实这个地址就是我们要的网址了。我的这个案例里网址是：

https://ai-suiyuanshidan.pages.dev/

但是一般来说，Cloudflare提供的免费网址容易被屏蔽。所以最好换一个自己的网址访问会比较流畅。“网址”从专业的角度称呼，又叫“域名”。

8.申请一个域名。这是唯一需要自己花钱的地方。但是也不贵，一个后缀是.xyz或者.top的域名一年也就十几块钱。域名的购买有很多供应商渠道，结合自己的情况问一下AI即可。选一个最便宜的就行。

9.绑定自己域名。当买好域名后，如何将自己的这个域名和我们实际的网站资源对应上呢。再做三步。

第一步：在 Cloudflare 中给域名占个位置

返回。

点击右上角的“ADD”（添加站点）。选择第一个Connect a domain。

输入您刚才购买的域名（比如yoursite.xyz，注意不要带www或http），然后点“继续”。

选择套餐：往前，找到“Free” ($0)套餐，点击选中它，然后点“继续”。

DNS扫描：它会扫描你现在的设置，直接点底部的“继续”即可。

步骤关键来了：页面会显示**“Replace with Cloudflare's nameservers”。你会看到两个名字，长得像这样（每个人的不一样）：

jake.ns.cloudflare.com

lola.ns.cloudflare.com

请将这两个地址复制下来，或者保留此页面别关。

第二步：在域名厂商那进行“移交”手续

打开并登录购买域名的网站。我是在买的。

点击右上角的“管理我的域名”（或者顶部蓝色的“域名管理器”）。

在列表中找到您的域名。

在域名的右侧，找到“NameServers”这一栏，点击那个蓝色的小地球图标。

删除旧的：把里面原有的NameSilo默认地址（通常是ns1.dnsowl.com这种）全部删除。

填入新的：把你在第一步里复制的Cloudflare的那两个地址，分别粘贴到NameServer 1和NameServer 2的格子里。

点击下面的“提交”保存。

第三步：回到Cloudflare 确认

回到刚才那个Cloudflare的页面，点击底部的“Continue”。

它会让你做个快速设置（快速入门指南），你可以一直点“保存”或“稍后”跳过，以后再调整。

等待生效：这一步l理论需要三十到几小时（全球 DNS 刷新），但正常都是实时生效。当您 Cloudflare 发来的邮件说“Active”，或者在 Cloudflare 首页看到您的域名变成绿色对勾时，就说明托管成功了！这步操作的本质上就是把域名的管理权（托管服务器商）从域名管理商那里改成cloudflare了。

10.将域名绑定到您的网站上。点击Cloudflare 左侧菜单的“Workers & Pages”。点进刚才配置的那个项目（ai-suiyuanshidan）。

点击“自定义域”标签。点击“设置自定义域”。输入新域名（比如yoursite.xyz或www.yoursite.xyz）。点击“激活域名”。因为已经将域名托管给过 Cloudflare 了，所以这里它会自动帮助设置好所有 DNS 记录，不需要手动修改了。等到列表里显示“Active”代表这个网站就成功绑定了我们自己的域名了。