如何让AI为您编写单页网站并免费上线

想要创建一个简单的教育网站但不知道如何编码？AI可以为您编写网站代码！我们将创建一个适合显示时间线、课程摘要或学生资源的单页网站。

我们将使用的构建块

为了使我们的网站看起来和工作得很好，我们将使用两个协同工作的免费工具：

Tailwind CSS 使事物自动看起来很好——它就像拥有可以轻松使用的预制设计片段。例如，您只需编写类似bg-blue-500的内容来使某物变为蓝色，而无需编写复杂的样式代码。

Font Awesome 为我们提供专业图标——这是一个巨大的图标集合，您可以用于社交媒体按钮或菜单图标等。只需选择您想要的图标，它们就可以使用了。

这些工具在有人访问您的网站时自动从互联网加载——无需下载或安装！

如何要求AI编写您的网站

这是您要输入的内容以获取AI编写您的网站代码：

请为我编写一个完整的网站，适合放在一页上。我需要：

1. 内容（全部在一页长的滚动页面上）：
   - 告诉我您想要哪些部分以及其中包含什么
   - 它们应该如何从上到下排列
   - 一个菜单，让人们跳转到不同部分

2. 使其在手机和电脑上工作：
   - 使用Tailwind进行样式设计
   - 使用Font Awesome图标
   - 文本和图片应在任何屏幕尺寸上看起来都很好

3. 设计：
   - 告诉我您想要什么颜色
   - 您希望事物如何排列
   - 任何其他风格偏好

示例：要求制作历史时间线网站

以下是要求制作教育时间线页面的示例：

请为我编写一个关于太空竞赛（1955-1975）的单页网站。我需要：

1. 内容（从上到下）：
   - 标题部分，内容为"太空竞赛：太空探索时间线"
   - 简要介绍太空竞赛是什么
   - 时间线部分包含重大事件：
     * 每个事件都应有日期、标题和描述
     * 使用图标表示不同类型的事件（火箭发射、里程碑等）
     * 在大屏幕上事件应左右交替
   - 底部参考资料部分
   - 菜单，让学生跳转到不同十年

2. 使其在课堂上工作：
   - 使用Tailwind使其看起来很好
   - 使用Font Awesome图标：
     * 太空主题图标（火箭、宇航员等）
     * 时间线标记
     * 导航箭头
   - 必须在以下设备上工作：
     * 课堂投影仪（大屏幕）
     * 学生手机
     * 学校平板电脑

3. 风格：
   - 深蓝色背景（太空主题）
   - 白色或浅蓝色文字
   - 使日期突出
   - 用线条连接时间线事件
   - 如果可能，添加一些微妙的星星效果

如何保存您的网站

1. 正确保存代码

   • 复制AI给您的所有代码
   • 打开简单的文本编辑器：
     • 如果您使用Windows：打开记事本
     • 如果您使用Mac：打开TextEdit
     • 重要：不要使用Word或Google Docs！
   • 将代码粘贴到文本编辑器中
   • 保存为index.html（ exactly like that）
   • 确保它不会保存为index.html.txt

2. 制作Zip文件

   • 找到您的index.html文件
   • 右键单击该文件
   • 选择压缩或zip：
     • Windows：“发送到”然后”压缩（zipped）文件夹”
     • Mac：“压缩index.html”
   • 您应该得到一个包含您的index.html的zip文件

如何将您的网站上线

1. 准备您的文件

   • 使用文本编辑器保存您的index.html文件：
     • Windows：使用记事本
     • Mac：使用TextEdit
     • 重要：不要使用Word或Google Docs！
   • 确保它保存为index.html（ exactly like that）
   • 创建包含您的index.html文件的zip文件：
     • Windows：右键单击>“发送到”>“压缩（zipped）文件夹”
     • Mac：右键单击>“压缩index.html”

2. 部署到Static.app

   • 访问static.app
   • 点击”免费上传”按钮或将您的zip文件拖到页面上
   • 创建您的免费账户时会提示您
   • 您的网站将立即上线，网址由他们提供
   • 收藏或保存此URL——这是您的网站地址！

注意：Static.app在您上传网站时为您提供免费的子域/URL。您将使用此URL与他人分享您的网站。

获得良好结果的提示

1. 在分享前检查您的网站

   • 在浏览器中打开网站以确保其正常工作
   • 点击所有链接以确保它们指向正确的地方
   • 在您的计算机和手机上查看您的网站
   • 确保所有文本都易于阅读

2. 从简单开始

   • 从基本设计开始
   • 一次添加一个功能
   • 保持您的内容清晰和有组织
   • 在添加更多内容之前确保一切正常工作

3. 使其成为您自己的

   • 更改颜色以匹配您的风格
   • 添加您自己的照片和文本
   • 包含您的社交媒体链接
   • 持续更新

实际效果

想看看这是什么样子？查看我们的太空竞赛时间线示例，这是使用上述提示创建的。

资料来源

• Tailwind CSS 文档
• Font Awesome 文档
• Static.app 帮助中心