ChatGPT教程，用ChatGPT轻松创建一个网站！
人人都是产品经理·
2023-04-19
在当今竞争激烈的市场中，产品经理需要紧跟潮流，掌握最先进的工具和技能，以便更好地推动产品成功。一个专业、具有吸引力的网站对于展示产品、建立品牌形象以及与潜在客户互动至关重要。
然而，在日常工作繁忙的情况下，产品经理如何才能迅速且高效地创建一个网站呢？
在本文中，我们将一步一步地引导你如何充分利用ChatGPT强大的代码生成功能，为你的产品打造一个令人印象深刻的网站。
在了解如何使用ChatGPT创建网站之前，我们先来看一下使用ChatGPT创建的网站效果，下图是刚打开网站看到的页面。
往下滚动页面，可以看到网站的简要介绍和可以提供的3种服务。
笔者使用一个思维导图来呈现基于ChatGPT创建网站所需要用到的4类工具：
其中网站开发和网站部署工具有比较多的选择，你可以根据自己的喜好选择任意一款工具，这里笔者选择的网站开发工具是VSCode，网站部署工具是Vercel。
*使用ChatGPT创建网站所需的工具-Madeby在线思维导图boardmix博思白板
VisualStudioCode（简称VSCode）是一款免费、开源的代码编辑器，由微软开发并维护。VSCode适用于Windows、macOS和Linux操作系统，支持多种编程和标记语言。它在全球的开发者社区中非常受欢迎，因为它提供了一系列高效的功能和特性，使得编程和代码编辑变得更加简便。
为了能够在浏览器中实时预览代码的效果，我们还要在VSCode中安装一个插件LiveServer。
LiveServer是一款非常受欢迎的VisualStudioCode（VSCode）插件，它可以为你的前端项目提供一个实时的本地开发服务器。通过LiveServer，你可以在保存文件时自动刷新浏览器，实时查看代码更改后的效果，大大提高前端开发的效率。
在VSCode中安装LiveServer插件的步骤：
点击VSCode左侧菜单栏的第5个按钮Extensions（插件/扩展），打开插件面板，在搜索框中输入LiveServer，然后在搜索结果中找到它。
点击LiveServer插件，右侧会打开插件的详情页，点击Install按钮以安装LiveServer插件，安装完成后，重新加载VisualStudioCode。
重新加载VSCode后，点击VSCode左上角的File菜单，选择NewFile。
在弹出的面板，输入index.html并按下回车键，创建一个html网页文件。
在创建网站之前，我们得承认，无论是多么复杂的网站，它都是由一个个的网页组成的，因此为了后续更好地使用ChatGPT来创建网站，我们可以先了解一下，一个网页的基本组成结构有哪些？
一个基本的网页结构通常包括以下几个部分：
*一个网页的基本结构-Madeby在线思维导图boardmix博思白板
了解了网页的基本结构之后，我们就可以使用ChatGPT来生成网页代码了。
Step1：使用html生成一个完整的创业公司网站的落地页
英文prompt：CreateacompletelandingpageforastartupcompanyusingHTML
输入这个指令之后，ChatGPT就会生成整个网页的基础框架。
稍等ChatGPT输出所有的代码后，点击代码右上角的Copycode按钮，将ChatGPT生成的代码复制到剪贴板。
切换到VSCode，将复制的代码粘贴到前面创建的html文件中，使用快捷键Ctrl+S(苹果电脑快捷键Cmd+S)保存修改。
接着右击鼠标，选择OpenwithLiveServer，插件会在本地启动一个服务，同时会在浏览器中打开html文件，就能看到html文件渲染出来的网页效果。
这里使用LiveServer插件来预览网页效果，还有一个额外的好处，每当我们修改了VSCode中的html文件，按下保存的快捷键，浏览器中打开的网页也会实时更新，就能保证我们看到的网页时刻处于最新的状态。
在生成的网页框架的末尾，ChatGPT给我们提供了内容和样式上的建议，网页内容可以增加诸如特性、感言（用户评价）、团队成员、联系表单等内容，样式上则建议我们使用响应式CSS框架——Bootstrap或TailwindCSS，确定网站在不同的设备上都有良好的体验。
Step2：使用TailwindCSS来设置网页的样式
英文prompt：WritecsswithTailwind
选择TailwindCSS来设置网页的样式，ChatGPT会对前面生成的代码进行修改：
Step3：给网站增加一个logo
英文prompt：Pleaseaddlogo
发出增加logo的请求后，ChatGPT会在header标签中增加一个img标签，即在网页中插入一张logo图片，img标签的src属性值，默认为logo.png，这需要替换为我们想用的网站logo。
我们可以在index.html文件同级的路径下，创建一个images文件夹，用于存放网页会用到的各种图片，如下图的logo文件，就是笔者从iconfont下载的一个logo图标。
把从网上下载的logo图片放到images文件夹之后，并按照用途对图片进行重命名之后，回到VSCode中，将src属性的默认值更改为images/logo.png，保存后再切换到浏览器，就能在网页上看到我们刚添加的logo图标。
在网页的header标签中增加了logo图标后，logo图标默认是靠顶部居中对齐的，如果我们想让logo图标在水平和垂直方向上都是居中对齐的，那就还要再调整一下logo图标的样式。
Step4：让logo图标置于header区域的中间
英文prompt：Pleasekeepthelogointhecenterofheader
在对网页元素进行布局时，一个元素位置的变动，可能会影响到其他元素的正常显示，在这个案例中，当我们让logo图标置于header区域的中间，它会引发另外一个问题：原本在header区域居中显示的文本内容，会被「挤」到页面的右边，这时就需要再调整一下此处的代码。
Step5：header区域的文本被挤到页面的右边去了，麻烦把logo图片和文本同时置于header区域的中间
英文prompt：butthetextStartupCompanywaspushedtotherightofpage，howtokeepthelogoandthetextinthecenterofheaderatthesametime
每当修改代码之后，ChatGPT会在更新后的代码末尾附上简短的说明，让我们可以大概了解代码更新前后所进行的操作。
笔者在网页中用到的logo是一个纯黑的图形，想把它更改为白色，同样可以对ChatGPT提出请求。
Step6：logo图标的颜色是黑色的，麻烦把它变成白色
英文prompt：thecolorofthelogoisblack,turnittowhite
鉴于ChatGPT第一次生成的网页框架和内容太少，这里可以结合前面ChatGPT在内容方面给出的建议，给页面适当增加内容，让它变得更丰富。
英文prompt：thecontentofthepageistoothin,pleaseaddcontactus,footer,copyrightarea
这里还有一个值得注意的地方，当ChatGPT生成的代码较多时，会在中间自动停下来，此时需要在对话框中输入「继续」或是「continuecode」，让它继续输出未写完的代码。
在浏览器中预览ChatGPT生成的「联系我们」部分的内容后，笔者发现这部分只是普通的文本，而不是可供用户提交信息的表单，因此要对ChatGPT提出更进一步的要求。
Step8：我想把联系我们这部分的内容更改为表单，请更新这一部分的代码
英文prompt：Iwanttoturnthecontactustoaform,pleaseupdatethispartcode
Step9：在网站中增加3项服务，同时每项服务都带有图片
英文prompt：add3serviceswithimages
到这里，我们可以算是完成了一个网页的制作，如果你还想进一步完善，可以考虑进行如下操作：
编写好一个网页后，我们可以尝试将网页和图片上传到托管平台GitHub，再结合后面的部署操作，将只能在本地打开的网页发布为人人可访问的网页。
将网页和图片上传到GitHub，可遵循下面的操作：
将本地文件上传到GitHub，主要有2种方式，一种是使用Git命令行，另一种是使用GitHub页面的上传功能，方便起见，这里选择后一种方式：
*上传到GitHub仓库的网页和图片文件
最后来到部署发布网页的步骤，我们这里选择部署工具是Vercel，具体步骤如下：
本文由@小博投稿发布于人人都是产品经理。未经许可，禁止转载。