如何用 AI + Cloudflare 免费部署一个自己的网站？

好的，这就是我的语文作业了。反正我做的剪报肯定不会挂在外面的。这样还可以发 CSDN 上骗几个阅读量。要是我做成挂墙上的手抄报了那不就没人看了嘛 awa。

网站架构

那当然做网站的第一步肯定是要明确自己的网站是干什么的。比如这个网站就是个随便写写文章，教一些乱七八糟的东西的。你知道了自己的网站是干什么的了，你就可以确立你网站的架构了。

相信你一定已经试过了让 AI 直接输出 HTML 了，那你肯定就会问，网站架构是什么？我们为什么需要它？我不学什么网站架构，直接让 AI 把完整的 HTML 打出来，发网上，不就是了吗？要那么麻烦吗？

那你肯定就会发现，AI 输出的网站，风格是差不多的，配色是乱七八糟的，没有自己的个性。而使用已经有了的网站架构，就可以把控件直接封装起来，把控件的风格直接确定下来。

而且如果直接把控件封装，你的代码就会从 1 风格变成 2，变得更好修改：

1：

<div class="somecardclass">
    <script>
        // js for card
    </script>
    <p>
        p1
    </p>
</div>
<div class="somecardclass">
    <script>
        // js for card
    </script>
    <p>
        p2
    </p>
</div>
<div class="somecardclass">
    <script>
        // js for card
    </script>
    <p>
        p2
    </p>
</div>

2：

<Card>
    p1
</Card>
<Card>
    p2
</Card>
<Card>
    p3
</Card>

就很好。这就是封装思想。把复杂的实现全部隐藏到代码底层，这样调用的时候就会更无脑，心情更舒畅。

那么现在就要了解一下不同的架构的适用范围了。

名称优势场景
Astro快，小，轻量！博客、文档、推销等等以内容为主的文章（比如本站就是 Astro！）
React/Vue/Angular交互性强，灵活全面文本编辑、论坛等应用

而且有些架构直接是可以互相嵌套的，比如用 Astro 做页面本身，用 React 做动画。

所以到时候只要告诉 AI 你的需求，要求它一定要使用合适的架构（因为我们下面要用 cloudflare 部署所以你应该提前告诉它，让它选择 cloud 支持的架构），按照它说的一步步做就可以啦！

发布网站

那半天时间和 AI 博弈做出来的网站不能放一个 localhost:8080 给自己访问啊，localhost 这个“网址”的含义是“我自己的电脑”，你用自己的浏览器能打开你自己的电脑，那别人用浏览器肯定打不开你的电脑啊。那怎么把这个网站给到所有人呢？

我们就需要一台服务器，把我们的网站发给所有人。

这里我推荐大家使用 cloudflare！cloudflare 确实是好用的网站部署工具。有很多免费的服务，比如什么反爬虫、人机验证之类的，如果需要可以学一学。

GitHub仓库

首先注册一个 Github 账号，打不开的看 这个。

创建

如果你还没有安装 GitHub Desktop，先打开微软商店下一个。

下载安装完成后，打开应用并使用你的 GitHub 账号登录。。

GitHub Desktop 需要将你的项目文件夹识别为一个 Git 仓库，才能进行后续的上传操作。操作步骤如下：

  1. 打开 GitHub Desktop。
  2. 点击左上角菜单栏的 File → Add Local Repository（添加本地仓库）。
  3. 在弹出的窗口中，点击 Choose… 按钮，浏览并选中你存放网站文件的文件夹。
  4. 确认路径无误后，点击 Add Repository 按钮。

如果你的文件夹尚未被初始化为 Git 仓库，GitHub Desktop 会自动提示你将其初始化为一个新仓库。按提示操作即可，非常简单。

添加成功后，你会在 GitHub Desktop 左侧看到这个仓库，右侧会显示该文件夹内的所有文件。

发布

将文件夹添加到 GitHub Desktop 后，你需要进行一次“提交”，相当于给当前版本的文件做一个快照，并附上一段说明文字。

  1. 在 GitHub Desktop 界面左下角，你会看到 Summary（摘要）和 Description（描述）输入框。
  2. 在 Summary 中填写本次提交的简要说明，例如“首次上传网站代码”或“Initial commit”。
  3. 在 Description 中写更详细的描述。（如果实在懒乱写也不是不行）
  4. 点击下方的蓝色按钮。

这样，你的文件更改就保存到了本地仓库中。

提交完成后，文件还只存在于你的本地电脑上。接下来需要将它“发布”到 GitHub 的远程仓库，这样别人才能看到，也方便后续部署。

  1. 在 GitHub Desktop 界面的右上角，点击 Publish repository 按钮。（如果你的仓库已经发布过，这个按钮会变成 Push origin）
  2. 在弹出的 Publish Repository 窗口中：
    • Name 字段：输入你想要的仓库名称，可以使用默认的本地仓库名。
    • Description 字段：可选，输入仓库的描述。
    • 选择仓库是 Public（公开）还是 Private（私有）。
  3. 点击 Publish Repository 按钮。

GitHub Desktop 会自动在 GitHub 上创建一个远程仓库，并将你本地的所有文件上传上去。

如果之后你对网站文件做了修改，只需要再交一次就可以发到 GitHub。

上传完成后，打开浏览器，登录你的 GitHub 账号，进入你的仓库页面，应该能看到所有网站文件都已经成功上传了。

使用 GitHub，是因为 Git 工具可以让你在不小心把自己的网站搞坏了，还有机会退回到以前的版本。

CloudFlare部署

这样子你的网站的文件夹就在 GitHub 上了，可以被 cloud 复制过来了。接下来就要让 cloud 把文件夹拿过来，再部署成真正的网站了！

  1. 打开 cloudflare dash。

  2. 注册以后点击 workers-and-pages，点击创建。

  3. 点击“想要部署 Pages？开始使用（最下面的小灰字）”（worker 因为一些原因在中国大陆不能用）。

  4. 选择 导入现有 Git 存储库 选项卡中的开始按钮，然后同样是登录上你的 GitHub 账号然后选择你刚刚上传的那个库。

  5. 选择你的架构和部署命令（不会问 AI）再点击部署，设置好网站地址就可以啦！

不出意外的话，你现在在浏览器中就可以直接看见自己的网站啦！