使用 ChatGPT 构建网站——创建并部署你的第一个网页

本章内容

理解创建并部署网页的流程
使用 ChatGPT 提示生成完整网页
复制生成的网页代码
将代码保存为 HTML 文件
将你的网页文件部署到网上

要相信 ChatGPT 可以在不学任何网页开发代码的情况下帮你创建一个可正常工作的完整网站，听起来仍然像天方夜谭，这点我能理解：即便你对 ChatGPT 的工作原理略知一二，这整个过程仍带有一种难以言喻的"魔法"味道。毕竟，这可不是让 ChatGPT 给你讲一个敲门笑话或写一首歌颂芜菁的十四行诗；我们要的是那些能"做点有用事情"的网页所需的全部代码。按任何标准来说，这都是复杂的请求，所以如果你仍持怀疑态度，那是完全合理的。

本章的目标是向你展示：在 ChatGPT 的帮助下，确实可以创建一个网页。我不会再深入探讨 ChatGPT 的理论（这方面已经讲得够多）。相反，我会带你做一个完整示例：通过提示（prompt）让 ChatGPT 生成一个功能性网页的代码，并在本章结束时把它放到互联网上。在本章为了在一章之内完成完整流程，网页必须非常简单，但它会起作用，而且还会稍微有点乐趣（取决于你对双关语的喜爱程度）。

2.1 理解流程

为了创建本章的可运行网页，我将使用在第 1 章中介绍的提示→复制→保存→部署循环（参见图 2.1）：

向 ChatGPT 提示以生成网页代码。
复制得到的代码。
将代码粘贴到文本编辑器中，然后保存为 HTML 文件。
将该 HTML 文件部署到网页托管服务上。

图 2.1 本章将使用的提示→复制→保存→部署循环

本章其余各节将对上述每一步作详细展开。

2.2 使用提示让 ChatGPT 生成网页代码

首先你需要打开 ChatGPT。有以下几种选择：

如果你没有 OpenAI 账户，去 chat.openai.com 使用 GPT-3.5。
如果你有 OpenAI 账户但没有 ChatGPT Plus，去 chat.openai.com 使用 GPT-3.5。
如果你有 ChatGPT Plus 订阅，去 chat.openai.com 然后选择 GPT-4。
如果你偏好使用 Bing Copilot，去 bing.com，点击 Copilot，然后选择 Precise（精确）对话风格。
如果你有 Microsoft 账户，去 copilot.microsoft.com 并选择 Precise（精确）对话风格。

在我的示例中，我使用 ChatGPT 应用并选了 GPT-4（见图 2.2）。

图 2.2 在 ChatGPT 应用中选择 GPT-4 作为语言模型

现在 ChatGPT 已就绪，下一步是给模型一个提示以生成网页代码。我想强调的一点是：其实可以用一个提示让 ChatGPT 输出一个可运行网页的完整代码。为了实现这一点，我们必须把页面要求大幅简化，所以这不会是一个复杂、多功能且带大量花哨效果的页面。

但它也不必只是个最底层的 "Hello World!" 页面。通常，如果你有一个简单页面的想法，就让 ChatGPT 根据你的描述生成代码。这个描述会因想法而异，但你可以考虑包含以下一些或全部要素：

目标（Goal）------你希望 ChatGPT 生成什么（本例中是网页）
数据（Data）------如果有的话，告诉 ChatGPT 你希望它使用的数据
动作（Action）------你希望网页做什么（总体或基于你指定的数据）
界面（Interface）------你希望用户如何发起动作或与页面交互

下面是我用的提示（参见图 2.3）：
Create web page code that stores 50 puns and displays a random pun each time the user clicks a button.

图 2.3 ChatGPT 应用中我准备发送的提示

按 Goal--Data--Action--Interface 框架，这个提示的组成如下：

Create web page code------告诉 ChatGPT 生成整个网页的代码。
that stores 50 puns------告诉 ChatGPT 创建 50 条双关语作为页面数据。
and displays a random pun------告诉 ChatGPT 随机选取一条双关语显示。
each time the user clicks a button------告诉 ChatGPT 提供一个按钮，用户每点击一次就显示另一个随机双关语。

在 ChatGPT 的文本输入框里输入提示，点击"发送消息"，等待结果。

2.2.1 检查结果

下面是我从 ChatGPT 收到的第一个响应代码（注意：ChatGPT 为你生成的代码每次可能不同）：

xml 复制代码

 <!DOCTYPE html>
<html>
<head>
    <title>Pun Generator</title>                                                    ①   
    <style>
        body {                                                                      ②
            font-family: Arial, sans-serif;                                         ②
        }                                                                           ②
        #displayPun {                                                               ③
            font-size: 24px;                                                        ③
            margin-top: 20px;                                                       ③
        }                                                                           ③
    </style>
</head>
<body>
    <h1>Welcome to Pun Generator!</h1>                                              ④
    
    <button id="generatePun">Generate Pun</button>                                  ⑤
    
    <p id="displayPun"></p>                                                         ⑥
    <script>
        var puns = [                                                                ⑦
            "Time flies like an arrow; fruit flies like a banana.",                 ⑦
            "I used to be a baker because I kneaded dough.",                        ⑦
            "I used to play piano by ear, but now I use my hands.",                 ⑦
            // Add the rest of the 50 puns here...                                  ⑦
        ];    
        document.getElementById("generatePun").
addEventListener("click", function() {                                              ⑧
            var randomPunIndex = Math.floor(Math.random() * puns.length);           ⑧
            document.getElementById("displayPun").innerText = puns[randomPunIndex]; ⑧
        });                                                                         ⑧
    </script>
</body>
</html>

注释说明：

① 页面标题

② 将 Arial 字体应用到页面

③ 以 24 像素字体并在顶部留 20 像素间距显示双关语

④ 页面主标题

⑤ 用户点击以得到新双关语的按钮

⑥ 显示随机双关语的页面区域

⑦ （部分）页面数据：一组双关语

⑧ JavaScript 代码：从数据中抽取随机双关语

有三点需要注意：

虽然这是一个简单页面，但代码本身看起来相当复杂，所以如果你觉得这些代码很陌生，不必担心------你不需要理解每一行，只需知道它能工作（结合下面第 3 点）。
ChatGPT 是非确定性的（nondeterministic），即便用相同的提示，它也不会每次都生成完全相同的代码。因此，如果你在 ChatGPT 中运行我的提示，很可能得到与上面不同的代码。
ChatGPT 在最初的生成里只写了 3 条双关语，然后放了个注释 // Add the rest of the 50 puns here... 把剩下的事交给你。这种行为很常见，但并不意味着你被卡住了。我用一个简单提示让它完成余下工作：
Can you fill in the rest of the puns for me?
ChatGPT 重新生成了完整包含 50 条双关语的代码（中间有时需要点"Continue Generating / 继续生成"按钮，让它继续输出）。因为这是较多的数据生成，等待几分钟是正常的。

理解与定制代码 （可选）

如果你想理解或定制 ChatGPT 生成的代码（这是可选的），下面几条说明有帮助：

HTML 是由一系列标签组成，用来指定页面对象（段落、标题、列表、链接等）。大多数 HTML 标签是字母字符并被尖括号 < > 包围。例如段落用 <p> 开始、</p> 结束。上面 ChatGPT 生成的 HTML 里有行：
css 复制代码
```
<h1>Welcome to Pun Generator!</h1>
```
<h1> 和 </h1> 标示一级标题（更多关于标题见第 3 章），因此文本 "Welcome to Pun Generator!" 会作为页面的主标题显示。
CSS 由一系列属性（properties）组成，用来指定页面对象的样式。例如 font-size 属性决定文本大小，若设为 24px（像素），对应的 CSS 声明是：
css 复制代码
```
font-size: 24px;
```
注意属性名后的冒号 : 和声明末尾的分号 ;。CSS 声明被归入规则（rule），规则包括要应用声明的对象及用 {} 包围的声明块，如前例中：
css 复制代码
```
#displayPun {
   font-size: 24px;
   margin-top: 20px;
}
```
这里 #displayPun 对应 HTML 里：
bash 复制代码
```
<p id="displayPun"></p>
```
<title> 与 </title> 标签之间的文本是浏览器标签页中显示的页面标题，你可以编辑这段文本（不要改动标签本身）。
你可以通过修改 font-size 的值来改变双关语文本的大小，单位用 px（像素）。
<h1> 标签之间的文本是主页面标题，你也可以编辑它（不要删改标签）。
用户点击的按钮由 <button> 标签定义，标签内的文本就是按钮上显示的字，你可以修改它。
ChatGPT 把页面数据存储在数组（array）里。在示例中数组的每个元素是用双引号包裹的字符串（双关语），元素之间用逗号分隔。你可以编辑、增加或删除数组项，但要确保每个元素仍被双引号包裹并以逗号分隔，且不要删除包围数组的方括号 []。

在继续下一步之前，我给你一些其它适用于单页网站的提示建议，供你实验或定制你自己的页面。

2.2.2 几个单页网站的提示示例

如果你想跟着做并用 ChatGPT 创建自己的单页网站，可以使用上面的提示，或者如果你已有想法就用自己的提示。如果你还没主意，这里给出一些示例：

注意：ChatGPT 在同一聊天会话中会"记住"你先前的提示与它生成的内容。尝试下面提示之前，建议开启一个新聊天，以免结果被之前对话影响。

Create web page code that displays a list of ten X things to do in Y（X 为形容词，如 fun/interesting，Y 为城市或地点）。示例：
Create web page code that displays a list of ten entertaining things to do in Miami's South Beach area.
Generate the code for a web page that provides a recipe for making X（X 为菜名）。示例：
Generate the code for a web page that provides a recipe for making panna cotta.
Provide web page code that lists the steps required to X（X 为项目、维修、保养等）。示例：
Provide web page code that lists the steps required to replace a bathroom faucet.
Create web page code that explains how X works（X 为机器、设备、科学原理等）。示例：
Create web page code that explains how a hologram works.
Generate the code for a web page that stores X and displays a random Y when the user clicks a button（X 是一些数据，Y 是某种组合或结果）。示例：
Generate the code for a web page that stores a dozen each of the following: names, verbs, colors, adjectives, and nouns. When the user clicks a button, the code should assemble and display a random sentence that uses the template "Name verb the color, adjective noun."
Provide web page code that displays X in a list and stores a Y associated with each X. When the user chooses X from the list, the page displays the associated Y（X 例如词、人物或对象，Y 可为诗歌、传记或描述）。示例：
Provide web page code that displays six rarely used adjectives in a dropdown list and stores a limerick associated with each adjective. When the user chooses an adjective from the list, the page displays the associated limerick.

你可以直接使用上述示例提示，或在此基础上按需自定义，来生成自己想要的页面。

2.3 复制 ChatGPT 生成的网页代码

当 ChatGPT 生成完代码后，下一步就是复制这些代码。复制方式取决于你使用的是 ChatGPT 应用、Bing Copilot 还是 Microsoft Edge 中的 Copilot 侧边栏。每种界面通常都会以图标或按钮形式提供"复制代码（Copy Code）"功能。各界面的具体复制方法可参见附录 A。如果你像我一样使用 ChatGPT 应用，代码会出现在一个单独的 HTML 代码窗口中，窗口右上角有一个"复制代码"按钮（见图 2.5）。

图 2.5 在 ChatGPT 应用中复制生成代码：点击代码窗口右上角的"复制代码"。

复制后，代码会保存在电脑的剪贴板（Clipboard）中，这是一个用于存放最近复制内容的临时存储区。为避免剪贴板中的代码被覆盖，请在进行下一步之前不要在电脑上复制或剪切其他内容。

2.3.1 将网页代码保存为 HTML 文件

复制了 ChatGPT 生成的网页代码后，现在要把它粘贴到文本文件并保存为 HTML 文件。操作前，先在文件管理器中（Windows 的 File Explorer，macOS 的 Finder）创建一个子文件夹，用于存放所有网页工程。例如，可以在用户文档（Documents）目录下新建名为 sites 或 public_html 的文件夹。

然后按照下列步骤将复制的代码保存为 HTML 文件：

打开你的文本编辑器。
新建一个文本文件（大多数编辑器选择 File > New，或按 Ctrl-N（Windows）/ Cmd-N（macOS））。
选择 Edit > Paste 将剪贴板中的代码粘贴到新文件中，或者按 Ctrl-V（Windows）/ Cmd-V（macOS）。
选择 File > Save（或按 Ctrl-S / Cmd-S），此时会弹出"另存为（Save As）"对话框。
导航到刚创建的用于存放网站项目的文件夹（例如 sites 或 public_html）。
点击"新建文件夹（New Folder）"按钮并为该项目文件夹命名。你接下来会把整个该文件夹上传到网站主机，因此文件夹名称应只包含小写字母、数字、连字符（-）和/或下划线（_），不要使用空格。
在文件名处输入 index.html。
点击保存（Save）。文本编辑器会把你的 HTML 文件写入磁盘。图 2.6 示例为我把 Pun Generator 的代码保存为 HTML 文件的情形。

图 2.6 ChatGPT 生成的代码保存为 HTML 文件

在图 2.6 的顶部附近，你可以看到文本编辑器显示的 HTML 文件路径，例如：
paul/Documents/public_html/pun-generator/index.html

该路径表示我在用户文档（Documents）下建立了 public_html 子文件夹用于存放所有网站。在前述步骤中，我先进入 public_html，再创建 pun-generator 子文件夹，然后把代码保存为该子文件夹内的 index.html。

现在你可以在浏览器中测试页面了。

2.4 在浏览器中测试你的网页

把网页代码保存到本地文件后，最好在部署前先在浏览器里快速检查一遍页面。最简单的测试方法是直接在浏览器中打开保存的 HTML 文件。步骤如下：

在浏览器中调出"打开文件"对话框：
- Windows 浏览器：按 Ctrl-O。
- macOS 浏览器：选择 File > Open File 或按 Cmd-O。
在打开对话框中导航到你保存 HTML 文件的目录。
选择该 HTML 文件。
点击"打开（Open）"。
浏览器会根据 HTML 标签和 CSS 属性渲染并显示网页。

在本机打开文件适合本地测试；如果想让他人也能访问你的页面，就需要把它部署到网站主机上。

2.5 部署你的网页

部署网页就是把 HTML 文件上传到你的网页托管（web host）上。具体上传流程因主机而异，请参考你所用主机提供商的帮助文档。一般流程如下：

登录你的网站托管提供商。
找到上传网页文件的页面或面板。
上传你在前面创建的子文件夹（包括该文件夹下的 index.html）。

在本示例中，我把 Pun Generator 部署到了 Cloudflare，按下列步骤操作（更详细的说明请参见附录 B）：

在 Cloudflare 仪表盘侧栏中，找到 "Workers & Pages" 并点击 Overview（概览）。
点击 "Create Application" 按钮（见图 2.7）。如果这是你第一次在 Cloudflare 部署，界面上可能没有该按钮，可以跳过这一步。

图 2.7 在 Overview 页面点击 Create Application

点击 Pages 选项卡。
向下滚动到 "Create Using Direct Upload" 部分，然后点击 Upload Assets。
输入项目名称，然后点击 Create Project（见图 2.8）。

图 2.8 输入项目名称，然后点击 Create Project

通过下面任一方法上传你的网站文件夹：
a) 将网站文件夹拖放到上传区域；或
b) 点击 "Select from Computer"，然后选择 Upload Folder，在弹出的对话中定位到你的项目文件夹并点击 Upload。
如果浏览器提示确认上传，点击 Upload。
点击 Deploy Site（部署站点）。
点击链接在浏览器中查看已部署站点。图 2.9 显示我的 Pun Generator 部署到 https://pun-generator.pages.dev 的效果。

图 2.9 Pun Generator 网站部署在 Cloudflare Pages

就这样：借助 ChatGPT 的帮助，你在短短几步之内就创建并部署了一个网页。页面很简单，但本书后续内容会教你如何让 ChatGPT 帮你构建更复杂、更实用的网站。

总结

使用 ChatGPT 帮助构建网页的基本流程是：提示（prompt）→ 复制（copy）→ 保存（save）→ 部署（deploy）。
在向 ChatGPT 提示时，应包括目标（要生成什么页面）、所需数据、页面应执行的操作以及用户如何与界面交互。
如果 ChatGPT 没把你需要的全部内容一次输出完，向它发起第二个提示以请求遗漏的部分。
通过界面上的"复制代码（Copy Code）"图标或按钮复制生成代码。
使用操作系统的文件管理器创建一个用于存放网站项目的文件夹。
在文本编辑器中新建文件、粘贴代码并保存为项目子文件夹内的 index.html。
最后将项目文件上传到你选用的网站托管服务以完成部署。