ChatGPT教程,用ChatGPT轻松创建一个网站!

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,具体步骤如下:

本文由@小博投稿发布于人人都是产品经理。未经许可,禁止转载。

THE END
1.极简插件官网Chrome插件下载极简插件是一个优质Chrome插件下载商店,收录热门好用的Chrome插件扩展,国内最方便的Chrome插件下载网站。一键下载谷歌扩展插件,无套路下载插件。https://chrome.zzzmh.cn/
2.支付宝支付宝,全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA收款等生活服务应用。https://www.alipay.com/
3.前端JavaScript常用插件/框架/工具库汇总jsnavigator.onlineCryptoJS 加密工具库 localForage.JS 离线存储方案 X-Spreadsheet 轻量级 Excel 开发库 mousetrap 处理键盘快捷键的简单库 Typed.js 动态文本效果-打字机 Socket.IO 实时通信 常用cdn 网站: https://www.jsdelivr.com/。 https://cdnjs.com/。 https://www.bootcdn.cn/。 https://blog.csdn.net/wangmx1993328/article/details/83787321
4.建站工具大赏,寻找你的“天选之子”!建站工具大赏扩展性插件现在的数字化时代,拥有一个专属的网站对于个人、企业乃至各类组织都具有极为重要的意义。而建站工具,便是帮助我们轻松踏入线上世界的关键一步。建站工具的重要性不言而喻。https://m.163.com/dy/article/JJ9H7T8U0556AO0F.html
5.提升独立站SEO表现!最全谷歌SEO网站工具合集外链查询工具:Ahrefs’ Backlink Checker Ahrefs的外链分析功能的强大并不用我多说,用它来挖掘外链自然是个不错的选择。 限制: 前100个反向链接免费 使用这个工具的一个好方法是粘贴竞争对手的网站,找到潜在的链接建设机会。 网站SEO优化工具:Yoast SEO插件 https://www.cifnews.com/article/153917
6.coolors官网,中文版下载,插件,强大的在线配色设计工具网站coolors官网,中文版下载,插件,强大的在线配色设计工具网站 简介 在当今视觉至上的时代,一个出色的配色方案对于任何设计项目的成功至关重要。无论是在网页设计、品牌塑造还是个人创作中,恰当的配色能够极大地提升作品的吸引力和专业感。Coolors,作为一款领先行业的配色设计工具,以其简单易用和强大的功能,成为了设计师和创https://feizhuke.com/sites/coolors-peise.html
7.“吹爆”这个设计插件网站,外挂级插件免费用!Pixso插件网站汇集了设计工具Pixso全部插件,对界面做了清晰的划分,帮助用户更加高效地获取。Pixso设计插件网站还配置插件管理功能,满足用户定制化插件需求。 同Pixso资源社区一样,Pixso设计插件网站将秉承开源精神,为用户提供一个开放的平台,不断拓展设计边界。除了容纳更多优质插件,Pixso设计插件网站还会逐步开放生态,将设计https://pixso.cn/designskills/chajianwangzhan/
8.免费下载VST插件和软件工具的7个网站推荐效果器/插件不过,并非所有 VST 都是免费的。因此,我们编制了一份提供完全免费 VST 插件和工具的真实网站列表。1.https://www.audioapp.cn/thread-212255-1-1.html
9.5118站长工具箱浏览器插件网站排名数据分析AI内容生产提高效率5118站长工具箱是 5118营销大数据开发的浏览器插件。借助专业SEO工具能够有效帮助 SEOer提升SEO优化工作的效率,之前我们使用的各种 seo工具包括独立软件、网页端,使用的时候并不能和当前页面完全融合起来,功能也不够全面。5118站长工具箱专门为 SEO优化人员量身打造,在浏览器中安装智能插件,实时查看当前网站的 SEO数据,这https://www.vpsss.net/24764.html
10.哈士奇插件网站官网下载(哈士奇插件网站官网下载安装)癞蛤蟆哈士奇插件网站是一款专门为哈士奇狗狗设计的插件下载平台。该网站提供了丰富的哈士奇主题插件和扩展工具,以便您可以为您的哈士奇狗狗提供一流的用户体验。这个网站的安装非常简单,本文将为您介绍如何下载和安装哈士奇插件网站官网。 下载哈士奇插件网站官网 要下载哈士奇插件网站官网,您需要遵循以下步骤: 打开您的浏览器 输入https://new.91laihama.com/information/625553.html
11.WordPress网站常用的SEO插件和工具推荐WordPress是款功能强大的内容管理系统,拥有诸多的插件和主题模板,我们可用它来创建外贸网站,网站成功上线后需要进行日常优化,那么WordPress SEO插件和工具有哪些呢?本文为大家分享几款WordPress网站常用的SEO插件及相关工具。 外贸网站一般用户访问量大,选择合适的主机服务器是网站SEO的重要前提,所以我们可以优先选择带宽资源https://www.idcspy.com/37586.html
12.Excel易用宝做最实用的Excel工具箱Excel易用宝以提升Excel和WPS的操作效率为宗旨,针对用户在数据处理与分析过程中的多项常用需求,开发出相应的功能模块。从而让繁琐或难以实现的操作变得简单可行,甚至能够一键完成。 一次安装,全面兼容 自动更新 , 持续改进 Excel易用宝集成了超过一百个功能模块,并且可以通过自动更新功能帮助用户方便的升级到新版本,获取更多https://yyb.excelhome.net/
13.WordPress插件:简化网站内容更新的9个推荐工具WordPress插件:简化网站内容更新的9个推荐工具 随着网站的发展,不可避免地需要经常更新内容,以吸引更多的访客并提升用户体验。然而,内容更新对于没有专业技术背景的网站管理员来说可能是一项挑战。好在WordPress提供了许多插件,可以帮助简化内容更新的过程。本文将介绍9个值得推荐的WordPress插件,让你轻松管理和更新网站的https://iymark.com/articles/16379.html
14.长沙雅美个人工具网站安装插件管理工具vim-plug 12 curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim 插件配置 在.vimrc中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455http://www.caonuan96.com/
15.工作提示第一期工具介绍小影是一款原创视频、全能剪辑的短视频社区app。是一个面向大众的短视频创作工具,集视频剪辑、教程玩法、拍摄为一体,具备逐帧剪辑、特效引擎、语音提取、4K高清、智能语音等功能。 2.素材网站与插件工具 l慕课 ü好慕课https://haomooc.com/xiaoxue.html http://www.njitt.edu.cn/metc/2020/0229/c2659a50981/page.htm
16.2020谷歌SEO实用工具推荐(关键词SEO审计网站分析SEO整合工具)Open SEO Stats(Chrome插件) 推荐指数:★★★ 可以监测基本SEO概况,可以作为基本SEO审计使用! SEO整合工具 SEO整合工具就是全方位分析网站(外链、收录、排名、权重、审计等等),这样的工具是做逆向工程最佳工具,这也是国内没有的。一般用一个SEO整合工具就可以了,因为这些工具费用都不便宜! Mozhttps://kuamarketer.com/archives/2052.html
17.轻工具网轻工具是您的一站式在线工具箱,提供广泛的服务,包括图片编辑与压缩、文档和文本处理、在线设计、浏览器插件、网络流行热梗,以及各种测试工具。无论您是寻求专业级的在线制作工具,还是简单的格式转换器,轻工具都能满足您的需求。https://qgj.cc/
18.WP安全备份加速和发展助力工具–WordPress插件Jetpack Manage——管理多个 WordPress 站点所需的所有工具。 监控站点的安全、性能和流量,并在需要注意站点时发出警报。 使用单个插件提高效率 您是否曾希望 Jetpack 在其自己的插件中仅包含一种功能? 现在,这个目标实现了。 查看我们的各个插件,只安装您需要的。 Jetpack VaultPress Backup Jetpack Boost Jetpack CRMhttps://cn.wordpress.org/plugins/jetpack/
19.常用动态生成文档网站工具(插件)合集(Docsify,VuePress,Docute前言 因为公司最近要为项目做一个能在线预览的操作使用说明文档,于是网上找以下了一下常用的几款动态文档生成工具 Docsify docsify可以即时生成文档网站,它可以https://www.jianshu.com/p/f9cb878e5c53
20.剪映电脑版音频怎么提取文字?3. 使用插件工具 如果你经常需要提取静态书单文案,那么使用专门的浏览器插件或者软件可能更加省心省力。例如,浏览器插件 Copyfish 可以帮助你轻松地提取任何需要的文案。它可以识别文本及图像中的内容并提取出来,方便快速。体验效果也很好。 九、抖音文字文案怎么提取 https://tool.a5.cn/article/show/111756.html
21.数魔选品工具选品篇网站和插件介绍(干货)数魔选品工具选品篇-网站和插件介绍(干货)提出了一种使用软件保护装置存储应用程序代码进行软件保护的方法。将可执行程序中的部分机器指令或脚本语言存储在软件保护装置中,在程序运行时动态地从软件保护装置中取出并在PC上执行,在保护程序的代码同时无需进行代码移植,易于实现。同时由于受保护代码是在PC上执行,因此不影https://www.miwaimao.com/soft_75329.html
22.?Chrome插件:Lighthouse,一款开源自动化的网站质量评估工具在我们开发或优化网站时,对网站的性能、可访问性、最佳实践等方面进行评估是至关重要的。Google 的Lighthouse 插件就是这样一款强大的工具,它为我们提供了清晰的指引,帮助我们在网络的海洋中找到正确的方向。 本篇文章将引导你了解如何下载、安装和使用 Lighthouse 插件,让你的网站走在成功的道路上。 https://www.changbiyuan.com/douyin/aiknowledge/2023/aiknowledge_1124/69408.html
23.浏览器插件大全:提升浏览体验的必备工具常见问题例如,当用户登录网站时,密码管理器会自动填充该网站的登录表单,减少用户的记忆负担和账号被盗的风险。内容延伸:1、除了以上推荐的浏览器插件,还有一些其他类型的插件也可以提升浏览体验,例如在线笔记工具、屏幕截图插件和网页翻译插件。科技爱好者和电脑手机小白用户可以根据自己的需求选择适合自己的插件,来提升他们的浏览https://www.xiaoyuxitong.com/cjwt/159071.html
24.把iOS15做进浏览器?这款小工具香疯了他自己一人连肝了超过 400 个小时,从产品设计到前后端开发,最后终于做出一款让自己满意的简起始页插件,最重要的是:这是一款不受广告打扰,并且免费开放的浏览器插件工具。 这款起始页插件,聚集了日历、天气、头条新闻、海报、常用网站等等功能,并且这个起始页插件的审美也非常在线,有一股浓浓的 “ 果味 ”。 https://www.51cto.com/article/698927.html
25.网站技术分析工具)v6.10.27Chrome扩展插件下载1、Wappalyzer是一个跨平台的实用程序,可以揭示网站上使用的技术。 2、它可以检测内容管理系统,电子商务平台,网络框架,服务器软件,分析工具等等。 官方介绍 Wappalyzer 是由 Elbert Alias 于2008年创立的一家 Technology Profiler 技术分析器 和 Lead Data 数据提供商,跟 BuiltWith(成立于2007年) 一样,Wappalyzer 也https://www.jb51.net/softs/825548.html
26.Face(封面工具插件)v5.2.0SketchUp插件库SS4U Make Face(封面工具插件)介绍 在平面中选择边缘来创建面。工具栏 登录/注册后可看大图 该插件的https://www.sketchupbar.com/forum.php?mod=viewthread&tid=377821
27.6个UX&交互设计师推荐的常用网站!本文将为大家推荐几个常用的网站,包括设计灵感网站、素材设计网站和提效型工具网站。第一,设计灵感网站包括 Pinterest、Behance 和Dribble;第二,素材设计网站包括 Myfonts、Flaticon 和即时设计;第三,提效型工具网站包括即时设计的超多提效插件,比如「查找并替换」插件、「样式批量重命名」插件、「黄金分割辅助线」插件https://js.design/special/article/ux-design-tools.html
28.10个最佳WordPress即时聊天插件如果您需要功能丰富的工具,Pure Chat是一个实时聊天插件,具有聊天小工具自定义、脚本历史记录等功能。Pro选项(您可以试用30天试用版)使您能够使用实时分析并在访问者浏览您的网站时对其进行跟踪。 主要特征: 桌面和移动设备上可自定义的小工具功能 用户友好且安装快速 https://www.wbolt.com/wordpress-messaging-plugins.html
29.ChatGPT中转接口API一美金0.9元,如何购买使用?详细的千字教程启动已安装的程序仅仅是最基础的功能,uTools最大的特点就是拥有强大的插件系统。 现在已有 700+ 的插件供你选择,每个插件解决一个具体场景的问题,简洁美观、即用即走。 输入插件应用市场? 进入插件管理,你就可以根据自己的需求挑选安装,组合成自己最称手的工具集合,为各种日常操作提供便利,不断产生的新插件,将为https://www.yizz.cn/4520.html
30.147SEO站长工具SEO工具147采集147发布搜狗非验证站点推送教程搜狗推送工具搜狗提交工具搜狗收录工具 如何用gpt提升网站收录? 如何提升网站收录? 查看更多工具教程 SEO教程 AI写作免费文章:轻松提升内容创作效率,写作新未来 正版保障 本站正版主题保障,会员专属QQ群,BUG及时修复/功能新增,免费更新。 https://www.147seo.com/