使用 ChatGPT 构建网站——介绍

数据智能老司机
381 阅读19分钟

本章内容包括：

  • 介绍 ChatGPT
  • 理解借助 ChatGPT 可以创建哪些类型的网页
  • 了解使用 ChatGPT 创建网页的局限性
  • 学习如何通过 ChatGPT 创建属于自己的网页

英国科幻作家阿瑟·C·克拉克曾提出三条被称为“克拉克三定律”的箴言，其中最广为引用的是第三条：“任何足够先进的技术都与魔法无异。” 如果你一直想创建网页但被技术门槛吓退，那么这本书的核心理念——通过 ChatGPT 的帮助创建你自己的网站——或许会让你觉得像魔法一样。对此毫不奇怪，因为近年来，如果有什么技术值得被称为“足够先进”，那一定是 ChatGPT 和类似的所谓生成式 AI。这类人工智能应用不仅可以创作诗歌、散文，还可以生成网页。

在本章中，我的目标是揭开 ChatGPT 的神秘面纱，让它看起来不那么神奇，而是更加实用。在接下来的内容中，你将会了解 ChatGPT 的基础知识，概览它可以帮助你创建的网页类型（以及为了平衡视角，也会提到它不能创建的网页类型），并通过一个非技术性的幕后揭秘，展示如何利用 ChatGPT 执行这项看似神奇的任务——实际上，它仅仅是数学的运用：将一个简单的文字请求转化为一整套完整的、可以直接浏览的网页。

1.1 什么是 ChatGPT？

除非过去一两年你隐居山林，否则你很可能听说过 GPT 和/或 ChatGPT——这些人工智能代理已经席卷全球（至少在关注社交媒体的那部分世界）。不过，知道 ChatGPT 是一回事，真正了解 ChatGPT 是什么又是另一回事。

为了帮助你理解 ChatGPT 是什么以及它的功能，我们可以逐步解析它名字的每一部分含义。首先来看 GPT：

  • G：GPT 中的 G 代表 “生成式”（Generative），意思是 GPT 能够创建——或生成——新的内容。GPT 是一个大语言模型（Large Language Model，LLM），通常用于生成文本，例如文章、故事，甚至诗歌。对于本书的目的而言，GPT 的生成能力还扩展到了编程代码，尤其是网页底层的代码。
  • P：GPT 中的 P 代表 “预训练”（Pretrained），这意味着 GPT 被训练时接触了大量的文本（这也是“大”语言模型中的“大”所指的内容）。在预训练过程中，GPT 学习了语言的模式和结构，例如句子通常是如何构成的。特别是，它可以根据已有文本预测接下来通常出现的单词或短语。从某种意义上讲，这正是 GPT 的核心功能：预测下一个单词！此外，GPT 还接受了规模极大的编程数据的训练，由于编程代码的规律性比普通文本更强，GPT 在生成代码方面表现得尤为出色。
  • T：GPT 中的 T 代表 “转换器”（Transformer），这意味着 GPT 能够将输入的文本（比如创建网页的请求）转化为最重要的组件，同时忽略或降低不重要部分的优先级。这使得 GPT 能够生成更相关、更准确的结果。

ChatGPT 中的 “Chat” 部分意味着你可以以对话的方式与 GPT 互动，就像普通的聊天交流一样。在创建网页的上下文中，这些“对话”通常是你提出某个页面组件的需求，ChatGPT 提供所需的代码。不过，ChatGPT 对当前对话中的历史消息有有限的“记忆”能力，这在某些网站创建任务中可能会有所帮助。

截至撰写本文时，主要有两个版本的 GPT 可用：GPT-3.5（于 2022 年 11 月发布）和 GPT-4（于 2023 年 3 月发布）。如果你使用 OpenAI 应用（稍后将讨论），无论是免费 ChatGPT 账户（详见附录 A）还是无账户，你都只能访问 GPT-3.5；如果你拥有付费的 ChatGPT Plus 账户，并使用 OpenAI 应用，则可以同时访问 GPT-3.5 和 GPT-4。

要使用 ChatGPT 帮助你创建网页，你有以下三种首选方式：

  1. OpenAI 应用——这是由 GPT 和 ChatGPT 的创造者 OpenAI 运营的在线应用。你可以通过 chat.openai.com 访问该应用。无需 OpenAI 账户即可访问，但有账户可以解除某些限制（有关如何创建账户以访问 ChatGPT，请参见附录 A）。如果你拥有付费的 ChatGPT Plus 账户，可以在 GPT-3.5 和 GPT-4 之间进行选择，如图 1.1 所示。

image.png

微软 Bing 的 Copilot——这是微软搜索引擎的 AI 增强版本，提供了一种聊天功能，其背后使用的是 GPT-4，同时还可以访问互联网。访问 bing.com，然后选择 Copilot 标签即可开始，如图 1.2 所示。值得注意的是，使用 Bing Copilot 不需要 ChatGPT 账户。（如果你对三种“对话风格”选项感到好奇，我会在附录 A 中详细说明它们。）

image.png

微软 Copilot——这是微软基于 ChatGPT 的独立实现版本，使用的是 GPT-4 模型。你可以通过访问 copilot.microsoft.com 开始使用，如图 1.3 所示。需要注意的是，使用微软 Copilot 不需要 ChatGPT 账户，但需要一个微软账户。（同样，对于三种“对话风格”选项的解释，请参见附录 A。）

image.png

注意：有很多种直接或间接访问 ChatGPT 的方法。例如，有专门针对 iOS 和 Android 的 ChatGPT 应用程序。这些方法适合用来随意体验 ChatGPT，但如果是为了创建网页，最好还是使用 OpenAI 应用、Bing Copilot 或 Microsoft Copilot，因为它们能更方便地访问 ChatGPT 生成的代码。

那么应该选择哪种方式访问 ChatGPT 呢？对于本书中涉及的相对简单的网页代码创建来说，选择哪种方法并没有太大的区别。GPT-4 通常会生成更“现代”的代码，这通常是件好事。（不过，这也可能意味着你的页面在某些较老的浏览器中（如 Internet Explorer）可能无法正常运行。我的建议？忽略那些过时的浏览器，拥抱现代化的网络技术！）如果你没有 ChatGPT 账户，也不想受 OpenAI 应用对未注册用户施加的限制，那么使用 Bing Copilot 是更好的选择。

1.2 ChatGPT 让任何人都能创建网页

我从未有过一个助理，但我可以想象这是一件非常棒的事情。毕竟，谁不希望有人帮忙处理那些必要但琐碎的任务，比如安排虚拟会议、预订航班、酒店和其他旅行细节，或者整理演示文稿？如果你不懂（也不想懂）如何设置 Zoom 会议、浏览 Expedia 网站或制作 PowerPoint 演示文稿，那么有个助理就显得更加珍贵。

然而，与设计、编写和部署一个网页甚至整个网站相比，这些任务就显得微不足道了。当然，市面上有各种模板和类似的页面构建工具，可以快速生成网页，但其结果往往令人失望，因为你对输出的控制非常有限。你可能对自己的网站主题有个很棒的想法，也在脑海中有了一个清晰的画面，但在你和这个画面之间却横亘着一个障碍：网页代码。

网页的三种主要代码类型——HTML、CSS 和 JavaScript——都需要陡峭的学习曲线。对于许多人来说，这样的学习负担过于繁重，尤其是当他们只想为自己或团队、兴趣爱好、项目、公益活动或活动创建一两个网页时。如果你想在网络上建立自己的存在感，却对现成的解决方案感到失望，或者害怕学习 HTML、CSS 和 JavaScript，那么现在你不用感到失落了。你可以“雇佣”（甚至是免费雇佣）一个助理来根据你的确切需求生成网页代码。这位助理就是 ChatGPT，它站在网页开发学习曲线的另一端，随时准备好帮助你将网页的愿景变成现实。

通过向 ChatGPT 提供一些简单的、用普通英语描述的指令，你可以让它将这些指令转换成可运行的网页代码。然后，你只需将代码上传到网络（ChatGPT 甚至可以帮助你完成这一步），你的任务就完成了！

当然，事情可能没有听起来那么简单（否则，这本书的其余部分也就没有必要存在了！）。但基本的流程确实像我在这里描述的一样简单明了。

1.3 理解你可以（以及不能）创建的网页类型

现在，你可能在想，将 ChatGPT 变成一个构建网站的机器人助理是否存在什么陷阱。毕竟，对初学者来说，构建网页似乎是一个典型的复杂任务，而声称可以将几乎所有的工作交给 AI 模型完成，而无需自己学习编程，这似乎必然伴随着某种限制。但令人惊讶的是，ChatGPT 并没有这些难以绕过的障碍，只是有一些注意事项需要了解。

首先，你需要知道，最容易通过 ChatGPT 创建的网页类型是网页开发领域所称的静态页面。静态页面是指加载后内容（包括文本和数据）不会发生变化的页面。虽然这听起来有些局限性，但实际上你可以请求 ChatGPT 帮助构建几乎任何类型的静态页面。以下是 10 个示例：

  • 个人主页
  • 团队、组织或活动的介绍页面
  • 产品着陆页
  • 兴趣爱好页面
  • 图片展示页
  • 作品集页面
  • 帖子页面（文章、评论、同人小说等）
  • “十大”列表
  • 操作指南
  • 旅行指南

我打赌你还可以轻松想到 10 种其他类型的页面。这些正是本书将教你如何利用 ChatGPT 创建的页面类型。而真正的好消息是，除非你选择订阅付费的 ChatGPT Plus，否则你可以完全免费完成所有操作——从访问 ChatGPT 到保存生成的代码，再到部署你的页面。

其次，这些页面的一个共同特点是，它们只需要前端代码，也就是网页开发人员所说的 HTML、CSS 和 JavaScript，这些代码运行在用户的浏览器中。而完全不同的是后端代码，也就是运行在 Web 服务器上的代码。后端代码通常用于动态网页，这类页面上的文本和数据会根据用户交互即时变化。

从技术上讲，你可以请求 ChatGPT 提供这样的后端代码，但实际上，这涉及的设置任务复杂程度要高出一个数量级。后端代码的组织和部署要复杂得多，同时由于 Web 服务器容易受到多种攻击，必须采用高级编码技术来增强后端代码的安全性。此外，后端开发几乎总是伴随着额外的成本，因为支持服务器访问的 Web 主机通常需要订阅付费计划。

基于以上所有原因，本书不会教你如何使用 ChatGPT 生成后端代码。相反，我们将专注于前端开发，帮助你轻松实现静态页面的构建和部署。

1.4 使用 ChatGPT 帮助你构建网页

Fritterware 是一个古老的计算机术语，指的是任何让用户沉迷于软件功能和选项的程序，从而浪费大量时间。一旦你拥有一个 ChatGPT 账户（如何注册账户详见附录 A；不过，请记住，注册账户是可选的），你就可以立即使用有史以来最强大的 “fritterware” 之一！的确，花费大量时间让 ChatGPT 做各种有趣甚至搞笑的事情非常容易，但最终，你需要停止浪费时间，开始真正的创作。

ChatGPT 的创作流程会根据你的制作目标有所不同，但在本书的内容中，你需要了解如何利用 ChatGPT 创建网页的总体流程。这一流程的简化版本概述如图 1.4 所示。在接下来的几节中，我们会解释每个步骤，第 2 章还会通过一个完整的示例引导你完成整个过程。

image.png

1.4.1 提示 ChatGPT

这个过程始于一个请求，用来具体说明你希望 ChatGPT 为你创建的内容。这个请求被称为提示（prompt） 。当你登录 ChatGPT 应用（参见图 1.1）或访问 Bing Copilot（参见图 1.2）时，你会看到一个文本框，在其中输入你的提示。

提示可以简单到只有一句话（如图 1.3 所示），也可以复杂到包含多个段落。不过，这里的“上限”是明确的，因为大多数版本的 ChatGPT 每次提示最多接受 4,000 个字符。这大约相当于 500 个单词左右，对于大部分网页创建提示来说，这个字数已经绰绰有余。

毫不夸张地说，提示 ChatGPT 是整个过程中最重要的一步，因为提示的质量会直接决定 ChatGPT 返回结果的质量。从某种意义上说，本书的核心目的就是向你提供高质量的提示，以便让 ChatGPT 完成具体的网页创建任务。此外，我还在附录 C 中花了不少篇幅详细讲解了一些关于提示 ChatGPT 的最佳实践（在业内，这一过程被称为提示工程（prompt engineering） ）。

注意：虽然 ChatGPT 通常遵循“输入质量高，输出质量也高”的规律，但它和所有大型语言模型一样，有时即便提示质量很高，也可能生成无法使用的结果，甚至是离奇古怪的内容。对于此类问题的排查方法，我在附录 A 中进行了讨论。

1.4.2 查看 ChatGPT 的结果

当你提交提示后，ChatGPT 会立即开始工作，通常会在几秒内开始“输出”其响应。图 1.5 展示了以下提示的一份示例响应：

Write web page code to display “Hello World!” in a large font.

image.png

如图 1.5 所示，该示例的结果包括一个对提示友好的响应，以及一个标题为 html 的代码框，里面包含了所请求的网页代码。这段代码对你来说可能看起来像一堆乱码，但请相信我，它确实按照提示的要求实现了功能：以一个大的字体（在此例中为 48 点）显示消息“Hello World!”。需要注意的是，由于各种技术原因，每次运行相同的提示时，ChatGPT 返回的代码可能会略有不同。然而，由于 HTML 和 CSS 通常有多种方法实现相同的效果，因此生成的代码仍会展示一个外观相同（或至少非常相似）的网页。

1.4.3 将代码保存到文件中

前一节中使用的示例提示虽然简单，但在提交提示后的短短几秒内，ChatGPT 就生成了一段符合请求的可用网页代码，这一点仍然令人惊叹。当你在网页项目中与 ChatGPT 配合时，这种惊叹感会一次又一次地出现，因为模型快速且看似毫不费力地生成了你需要的代码。

不过，无论 ChatGPT 生成的网页代码多么准确或多么符合你的需求，它本身并不起任何作用。这是因为网页代码本质上是静态的，只是一组文字和奇怪的符号。要让网页代码“活”起来，必须在网页浏览器中显示它。而在此之前，你需要将代码保存到浏览器可以访问的文件中。

附录 A 以适当的细节讲解了网页文件的相关知识。图 1.6 展示了如何将 ChatGPT 生成的代码（参见图 1.5）粘贴到一个 HTML 文件中，并保存为 index.html。此时，你可以将保存的 HTML 文件加载到你喜欢的网页浏览器中（有关详细步骤，请参见第 2 章）。不过，一个真正的网页项目还需要额外的一步：将代码部署到网络上。

image.png

1.4.4 部署 HTML 文件

要让其他人查看你的网页，唯一的办法就是将它们发布到互联网上。对于本书中创建的相对简单的项目，这个部署过程涉及将 ChatGPT 帮助你生成的文件复制到一个托管网页的服务上。我会在附录 B 中更详细地介绍这个过程，但大多数情况下，这仅仅意味着将存储网页文件的文件夹上传到托管服务。

图 1.7 展示了这个过程的一个示例：我将 hello-world 文件夹从右侧的 Finder 窗口拖拽，并准备将其放到左侧的窗口中。上传网页文件后，你可以立即在自己喜欢的网页浏览器中查看这些文件，正如图 1.8 所示。

image.png

image.png

前面几节介绍了一个提示-复制-保存-部署的流程，我想你会同意，这个流程简单明了，甚至有点令人惊讶的高效。不过，并非所有的项目都如此简单，特别是当你开始创建超越“Hello World!”的网页时。这些更具野心的项目通常需要使用两个额外的技巧：重复提示-复制-保存-部署的流程以创建多个页面或页面组件，以及改进和调整你的 ChatGPT 提示。

1.4.5 按需重复

单个提示生成单个网页的情况在你的网页创建生涯中是相对罕见的。更常见的是，你需要多次执行提示-复制-保存-部署的循环，才能完成所有需要的内容。以下是需要考虑的两种情况：

  1. 创建多个页面
    很多网站只有一个页面，但更常见的情况是，一个网站包含多个页面。即使是一个简单的网站，也可能包括以下页面：

    • 首页
    • “关于”页面（介绍你或你的网站）
    • “联系”页面（列出访问者可以与你联系的方式）
    • 以及专门用于内容（如文章、照片和作品集）的独立页面。
      对于这样的多页面网站，你需要为每个页面重复提示-复制-保存-部署的循环。

  2. 为单个页面创建多个组件
    大多数现代网页由多个组件组成，例如：

    • 页头（header）
    • 导航栏或菜单
    • 内容区域
    • 侧边栏
    • 页脚（footer）
      虽然可以通过一个提示生成所有需要的组件，但如果为每个组件使用单独的提示，结果通常会更令人满意。在这种情况下，你需要为每个组件重复提示-复制-保存的流程，并将复制的代码插入到同一个 HTML 文件中。只有当所有页面组件都添加完毕后，才需要进行部署。

如果这些内容现在看起来有些抽象或令人困惑，不用担心：本书的其余部分将专注于让你熟悉如何具体地创建多个页面和页面组件的详细步骤。

1.4.6 改进和调整你的提示

前面图 1.3 所示的 ChatGPT 辅助网页创建流程适用于简单的网页，以及 ChatGPT 准确理解并满足你需求的情况。但随着你的网页变得更复杂，你的提示也会随之变得更加详细和复杂，这时你几乎可以肯定需要在流程中添加一些额外的步骤。我在图 1.9 的流程图阴影部分中展示了这些额外的步骤。

image.png

乍一看，这个新流程似乎复杂了许多，但实际上只是新增了两个可能的分支，这两个分支分别以问题的形式呈现：

  1. 这是否是你想要的？
    在 ChatGPT 生成你请求的代码后，你需要立即问自己这个问题。本质上，你需要检查代码（尽你所能）以确保它符合你的需求。如果答案是“是”，那么继续下一个问题；如果答案是“否”，则需要以某种方式改进提示（例如，使其更具体），然后重新尝试。
  2. 它是否有效？
    这个问题要求你测试代码。具体做法是将代码复制并粘贴到一个在线网页代码测试网站中（详见附录 A）。如果代码没有问题，你可以将其保存为 HTML 文件。如果代码存在问题，则需要通过修改提示修正错误并重新提交。同样，附录 A 提供了一些问题排查的建议。

当然，如果 ChatGPT 每次都能生成完美的代码，那就太棒了。而且值得庆幸的是，ChatGPT 的每次新版本都在生成准确代码以及理解模糊或泛泛提示方面变得更好。然而，即使未来 ChatGPT 能够常规性地生成完美的网页代码，目前它还未达到这一水平，因此，你需要通过不断改进和调整提示来获得你想要的页面。

总结

  • GPT 的含义：
    GPT 代表生成式（Generative，旨在生成文本）、预训练（Pretrained，通过大量文本学习语言模式和结构）、转换器（Transformer，分析请求并优先处理其中最重要的部分）。

  • ChatGPT 的访问方式：
    ChatGPT 是一个应用程序，可通过以下方式进行对话式访问：

  • GPT 的编程能力：
    GPT 接受了海量编程代码的训练，包括用于构建网页的 HTML、CSS 和 JavaScript。这种训练使 ChatGPT 能够根据普通英文指令生成网页代码。

  • 适用场景：
    ChatGPT 最适合用于创建不依赖 Web 服务器存储数据的静态网页。

  • 创建网页的基本流程：
    ChatGPT 通过一个提示-复制-保存-部署的循环帮助你创建网页：

    1. 提示：向 ChatGPT 提供关于你希望创建的网页类型的指令。
    2. 复制：复制 ChatGPT 生成的代码并粘贴到文件中。
    3. 保存：将代码保存为 HTML 文件。
    4. 部署：将 HTML 文件上传到网页托管服务。

  • 优化提示：
    为了获得最佳结果，你通常需要调整提示，以确保网页的结构和内容准确无误。同时，你可能需要修改提示来解决网页问题。

avatar
文章
阅读
粉丝