如何用AI工具来快速搭建一个网站呢?

想知道怎么使用AI工具来快速搭建一个网站呢?
收藏者
0
被浏览
106

5 个回答

acff00 LV

发表于 2025-4-8 13:41:59

最近有小伙伴很兴奋的告诉柏豪:某个建站公司的销售联系他说几百块就能体验最新的AI建站,速度快,效果好,关键是文案图片什么的都是AI直接生成,只需要提供简单的公司信息就能快速建站。
那么现在真的可以做到只告诉AI我的产品,AI会帮我自动收集信息,最后生成一个远超同行的外贸网站吗?答案是否定的:目前AI并不能独立完成外贸建站,只能完成辅助性的建站工作。
我们先来看看目前市面上所谓AI建站的通用做法:你只需要先注册这个http://10web.io这个工具,这个工具有两个功能:
第一个:告诉AI你的品牌名称和产品,让AI帮你自动生成网站;
第二个:直接拷贝其他网站页面功能;
在生成网站或者拷贝完其他网站页面之后,你可以直接在该工具提供的wordpress后台对网站文案、图片进行编辑,之后只要把自己的域名绑定在这个工具之上,你就拥有了自己的网站。
我们具体如何操作:
一,提供基本信息AI自动建站
1、我们进入http://10web.io的首页,点击右上角的generate your website按钮


如何用AI工具来快速搭建一个网站呢?-1.jpg


2、这里你需要选择Create a New website with AI


如何用AI工具来快速搭建一个网站呢?-2.jpg


3.选择你的行业,这里之前有个B2B行业和B2C行业的区分,现在没有了。这里有点不大方便


如何用AI工具来快速搭建一个网站呢?-3.jpg


4.选择和编辑网站的语言还有,网站名称以及描述,网站描述那里你可以使用enhanced with AI,让AI来优化你网站的介绍。


如何用AI工具来快速搭建一个网站呢?-4.jpg


5、填写你的主要产品或者服务最后一步编辑你公司的几个产品类型,然后点击finalize.


如何用AI工具来快速搭建一个网站呢?-5.jpg


06 、在出现的注册信息对话框那里填写注册信息,然后点击sign up and preview site.


如何用AI工具来快速搭建一个网站呢?-6.jpg


等待自动生成1个网站,大约需要2-5分钟
二、AI拷贝别人的网页
在这里我们需要在网站的后台点击Add a Page,然后点击AI Recreation这个按钮,然后输入需要模仿页面的名称以及Url的信息即可。


如何用AI工具来快速搭建一个网站呢?-7.jpg


看到这里小伙伴们是不是感到很兴奋?然而这个看似简单的操作实际上有着很大的几个坑点:
第一点:单凭几句描述和一个品牌名称就真的可以建立一个专业的网站吗?实际上我们得到的效果是,网站的页面设计还过得去,但是如果说就拿它生成的这个网站去满足客户的搜索意图,转化询盘我觉得还差的挺远,因为毕竟AI不能单单靠你几句话就能深入的了解你所有的业务,同时完成网站营销性的布局。
第二点:http://10web.io 这个工具在在抓取其他网站页面的时候并不能做到100%完全复制还原,只是相对于用Elementor插件建站的wordpress网站,它的还原度要稍微高点,但是页面布局方面还是会有一定的形变;
第三点:虽说10web.io,在抓取页面之后会分配给你一个和wordpress一模一样的后台。但对于小白来说能熟悉wordpress后台的本来就不多,能熟练使用Elementor插件的就更少了,所以从某种意义上来说:即使能够一键复制别人的网页,对于小白来说用途不大,因为不会使用wordpress后台和elementor。
第四点:后续网站迁移的问题
如果你后续不想支付每个月13美金的费用,那么你可以选择迁移网站,该工具提供了源码,可以方便我们进行网站迁移,但是这仅限于技术人员;
对于小白来说这并不友好,而且建站时候用到的一些插件都是该工具本身自带的,迁移过后我们无法使用该工具自带的插件,同时网页的布局也会发生形变,需要我们一步步再去调整。我们前期精心制作的网站,后续还得再花时间和银子找人去调整。
第五点:AI生成图片和文案
如果没有对于AI进行预训练,单靠AI工具自行生成网站文案,你会发现网站文案不仅仅没有"人味", 而且读起来味同嚼蜡。这样的文案用户体验极差,想要获取谷歌排名可以说是天方夜谭。根据谷歌最新公布的算法来看,这类的垃圾内容不仅仅不会被推荐,而且会被惩罚。
至于AI生成的图片,如果是专业的AI图片生成工具(Midjourney),辅助以合理的指令倒是可以用一用。如果单单是建站工具推荐的图片,我觉得这个可用性还是有待商榷的。
所以说现在的AI建站工具并不能完全帮助新手小白建立出专业的能够符合谷歌SEO规则的网站,但是对于有一定的建站经验的小伙伴们还是非常不错的一个工具。
AI建站到底与传统建站区别在哪里?
简单来说,几乎可以说我们建站的每个阶段都能用AI来辅助完成。由于AI强大的数据库支 持,我们可以从AI那里获取更为全面的数据,拓展我们的思维。最终帮助我们建立更为专业全面的网站;
而传统的建站只能依靠自己有限的行业经验和知识储备来帮助我们建立在目前我们实际认知范围内的网站。
我们举个例子:
我现在想要了解一下我们玻璃瓶在美国市场的主要B端客户群体有哪些?来帮助我们树立网站的用户画像:
我们可以告诉AI我们的需求:You are the business manager of a foreign trade factory with 20 years of export experience in the glass bottle industry, you are familiar with the global market of the glass products industry and the main procurement of B2B customer, I am a factory producing glass bottles in China, and now I want to do foreign trade export business, mainly wholesale business, mainly exported to Europe and the U.S., and now I need you to help me to recommend what are the main B2B customers, and analyze the pain point problems they encountered when they purchase Now I need you to help me recommend the main B2B customers, and analyze the pain point problems they encountered when purchasing glass bottles. Requirements: output in english, each customer group first individually analyze their pain points, and then summarize all the pain points, and give solutions.
以下是Chatgpt给出的回复:


如何用AI工具来快速搭建一个网站呢?-8.jpg


从上述的例子当中我们可以看出来,AI能够快速帮我们分析出主要的目标客户群体,并给出相应的用户群体的痛点。而在传统的建站过程当中我们需要客户组织销售部很有经验的小伙伴们头脑风暴然后花费相当长的时间才能梳理出客户的需求。现在AI无疑极大地提升了我们的效率。
AI建站能够完全取代传统人工建站吗?
那么到底AI建站能不能完全取代人工建站?答案是:不能。经过长时间的测试我们发现,AI在回复客户邮件,还有撰写领英Post方面似乎很擅长,而在更为专业的方面给出的回答却并不尽如人意。
所以说如果我们的产品专业技术性很强,网站内容只是靠AI来生成而不经过人工的修正,那么很大程度上来说,AI输出的内容目前来讲还是达不到我们要求。
所以我们认为:目前AI建站充其量只能算是AI辅助建站,建站的背后还是需要专业的人来修正引导以及训练,这样才能保证出来的网站在专业性方面没有问题。
AI可以在哪些方面辅助我们建站?
01、AI辅助网站结构设计
在网站建设之前不论是设计师手绘,还是采用专业的网站原型软件进行设计。我们都需要大概知道我们网站大概需要布局什么样的板块,要向客户展示什么内容。在传统的建站过程当中我们需要专业的设计师来帮我们完成这项工作,现在我们只需要向AI喂养我们的行业资料,AI就能根据我们的需求来生成相应的网站原型,然后你可以将这个生成的原型提供给设计师参考,然后建成自己想要的网站。如果有需要工具的小伙伴可以加好友微信我。
2、AI辅助网站文案和博客文章撰写
我们已经在上一篇文章:《一站式解决方案:小白也能用AI快速搞定外贸文案》当中详细的讲述了如何借助AI来撰写网站文案,大家如果有兴趣可以去那篇文章当中详细了解一下。
3、AI辅助网站图片生成
关于如何用AI生成实际可用的图片,我会专门挑一篇文章来去教大家去操作,这篇文章涉及了Midjourney的指令有哪些部分构成,如何去调整我们的图片使图片更真实,以及如何根据已有的图片创造出类似的图片等等。在这里我就不详写了。有兴趣的小伙伴可以关注我后续的文章。
4、AI辅助产品分类页面制作
众所周知,现在谷歌的算法调整为是否能满足客户的搜索意图为网页排名的依据,那么什么样的网页能够满足客户的搜索意图?
第一是能够让客户确认这个页面有他想要的产品,第二是相信你是专业的。那么关于专业性方面AI可以提供给你无限的关于专业性的灵感,通过AI你可不断的往你的分类页面里边加入更专业的知识来提升用户的满意度,增加客户的停留时间。
6、AI辅助网站SEO优化,标题和Meta描述
然后我们还可以通过AI帮我们去做页面SEO优化,让它来帮我们专业页面SEO当中的Title和Descrition,我们只需要给出相应的指令就可以了。具体的指令可以参考我上一篇文章《一站式解决方案:小白也能用AI快速搞定外贸文案》当中的指令撰写的框架。
总的来说,作为外贸新手小白,千万不要被市面上的所谓的AI极速建站忽悠了,做好专业的网站目前没有捷径,你自己本身一定要具备专业的知识,再加上合理的使用AI才能提升建站效率。
柏豪致力于快速获取精准询盘。如果你的外贸独立站询盘少,投放谷歌广告效果不理想;如果你不知道选择什么行业或产品,欢迎和我微信联系, VX: taileshidigi

TsMnO LV

发表于 2025-4-8 13:53:49

说到AI建站,这里不得不提到做了18年的老牌建站系统——建站宝盒【超级AI建站2.0】
帮您快速制作一个省钱、省时、省力的精美、有用的网站。

如何用AI工具来快速搭建一个网站呢?-1.jpg

具体是怎么应用AI来搭建网站的呢?一起来看看

AI策划师【省时】快速帮您规划网站内容结构

建站宝盒AI建站,提供上千套模板,您只需要输入公司名称、选择网站颜色,30秒完成整站策划,快速拥有一个好看的网站内容。

如何用AI工具来快速搭建一个网站呢?-2.jpg

AI设计师【省钱】不懂设计,不懂技术也能做出精美的网站

1、多端合一,数据同步:建站宝盒支持电脑+平板+手机+微信公众号+微信小程序,统一在后台管理编辑超方便!

如何用AI工具来快速搭建一个网站呢?-3.jpg


2、随意可视化编辑:您可以像做PPT一样做网站!利用AI模板建站,简单拖拽式操作,无需任何代码。

如何用AI工具来快速搭建一个网站呢?-4.jpg

3、AI区域模板样式:宝盒超级AI建站2.0,升级更新了上千个区域布局样式,网站排版布局更简单!
目前支持头部区域、幻灯区域、产品区域、底部区域等等区域模块,直接点击就能用。不用再单独组合。

如何用AI工具来快速搭建一个网站呢?-5.jpg

4、1000+模块风格:宝盒超级AI建站2.0,拥有1000+模块风格,让不懂设计的您,也可以制作精美的网站样式!您想要的文本、图文、轮播、产品、新闻、表单等需求,都可以找到。
5、宝盒超级AI建站2.0,提供3000+矢量图标,您可以在线编辑图标颜色、大小,不懂设计,也可以直接制作使用上精美图标!

如何用AI工具来快速搭建一个网站呢?-6.jpg

6、AI绘图:如果还想要别具一格的网页配图,可以让【AI绘图】帮您忙,只需要输入您的需求描述,AI帮您生成图片,立马就可以使用起来。

如何用AI工具来快速搭建一个网站呢?-7.jpg


如何用AI工具来快速搭建一个网站呢?-8.jpg

7、对了,很多企业在找网页配图和产品配图,都很担心版权问题。宝盒超级AI建站2.0,内置提供了70000+高清免费无版权素材,还支持图片在线裁剪,随意使用。

如何用AI工具来快速搭建一个网站呢?-9.jpg


8、做商城网站,少不了获客营销。宝盒支持秒杀,优惠券、团购、减免等营销活动,刺激用户消化转化!
AI营销师【省力】提升网站全球营销力,让客户找到您

1、制作多语言外贸网站:宝盒超级AI建站2.0,支持16国语言快速翻译,助力企业轻松出海,提升国际形象!

如何用AI工具来快速搭建一个网站呢?-10.jpg

2、AI网站整站优化:宝盒超级AI建站2.0,全程提供网站全生命周期服务!

如何用AI工具来快速搭建一个网站呢?-11.jpg

3、智能软文+AI深度撰文:网站要有收录,必须坚持文章内容更新,如果没时间写文章、不知道怎么写内容。直接用【AI深度撰文】,文章自动发布,提升网站收录!

如何用AI工具来快速搭建一个网站呢?-12.jpg


如果你也想要快速体验AI快速建站,直接点击>>建站宝盒AI建站

<hr/>
「建站宝盒」作为18年老牌建站系统,上线至今,一直不断迭代更新,目前为超过60万+企业提供建站服务。
建站宝盒只做有用的网站,为企业用户提供一站式企业服务,一个后台管理所有站点内容,1000+成品模板,一键安装套用,省心方便。同时也受到各大互联网大厂的认可,成为腾讯云自营产品、华为云、百度云的战略合作伙伴。

哈欠 LV

发表于 2025-4-8 14:08:11

官网:https://www.dora.run/ai
Dora.run是一个能够通过自然语言生成、定制和部署3D网站的工具,它提供了无代码编辑器和简单的文本提示来创建令人印象深刻的独特网站。


如何用AI工具来快速搭建一个网站呢?-1.jpg


Dora AI现在还是内测,需要加入waitlist等待,加入之后,我们就可以在网页编辑工具栏看到一个AI图标,点击这个图标就可以直接输入自然语言,生成自己想要的3D网站,非常酷炫。



如何用AI工具来快速搭建一个网站呢?-2.jpg


Dora AI 的产品团队来自中国北京,Product Hunt 上的发布者为 Faye Zheng。从 Dora AI 官网上看,目前可以实现的效果主要有三种:
1、根据文本生成网站
根据官方演示视频展示,当用户输入一句关于网站的描述后,Dora AI 的会一次性生成三组设计稿供用户挑选。设计稿具有完整的网站页面框架,文案、配图和各种组件一应俱全,排版设计看起来也很高级。而且这个设计稿还是可编辑的,分成了多个不同的图层,用户可以继续在上面做出修改。

如何用AI工具来快速搭建一个网站呢?-3.jpg


https://www.zhihu.com/video/1746943918527401984

2、生成3D交互动画
在编辑设计稿时,可以直接输入一句话,让 AI 将静态背景替换成具有交互效果的 3D 模型,这样鼠标进行操作时网页会跟随反应,打造沉浸式使用体验。
从演示视频中我发现当 3D 模型生成后,对应的图层变成“场景”和“3D 相机”,也就是交互效果是通过相机视角调整完成的。而 AI 做的作用应该是让“替换 3D 模型元素”和“添加动画效果”2 个任务自动完成,省去用户自己调整设计的步骤。

如何用AI工具来快速搭建一个网站呢?-4.jpg


https://www.zhihu.com/video/1746944004682530818

3、高级 AI 动画
在看完演示视频后,我觉得 AI 动画这个功能实在是太神了。描述你想要的动画效果并指定动画对象,Dora AI 就能自动添加动画并弹出编辑面板,用户可以继续拖动滑块对动画效果进行调整。这比自己手动调整动画效果方便很多,而且让不懂编程的用户也能轻松为自己的网站添加高级的动画效果。

如何用AI工具来快速搭建一个网站呢?-5.jpg


https://www.zhihu.com/video/1746944065248358400

Dora 原本就是一个无代码网站构建平台,帮助用户直接通过拖拽元素组件创建带有 3D 元素和动画效果的网站,并借助 Flutter 实现响应式布局,可以适应全端排版需求。
如何用AI工具来快速搭建一个网站呢?-6.jpg


https://www.zhihu.com/video/1746944124182446081

Magic LV

发表于 2025-4-8 14:21:27

Durable AI 是一款由人工智能驱动的网站构建器,旨在帮助企业家轻松创建专业网站。只需三次点击即可让企业在线。
该平台的主要卖点是能够在短短30秒内创建一个完全设计好的网站,包括文案、图片和联系表。
得益于Durable的人工智能技术,它实现了整个过程的自动化,包括网站生成、营销自动化和财务管理。

如何用AI工具来快速搭建一个网站呢?-1.jpg

工具特点

1. 快速建站:使用AI生成的功能,在30秒内生成一个网站
2. 定制化:通过添加标志、照片、自定义对象等来编辑和增强网站
3. 全方位平台:提供CRM工具、发票、促销内容创作等服务
使用流程:


  • 首先打开浏览器进入网址页面https://durable.co

如何用AI工具来快速搭建一个网站呢?-2.jpg



  • 选择你的网站和服务类型

如何用AI工具来快速搭建一个网站呢?-3.jpg


  • 给自己的网站取名字

如何用AI工具来快速搭建一个网站呢?-4.jpg



  • 大约等待3-4秒钟,网站了就自动建立好了。

如何用AI工具来快速搭建一个网站呢?-5.jpg


  • 还可以针对不同模块点击再次更新生成进行自定义。

如何用AI工具来快速搭建一个网站呢?-6.jpg


  • 进行更多的自定义设计需要注册登录,这里推荐谷歌账号。

如何用AI工具来快速搭建一个网站呢?-7.jpg


  • 绑定Google账户,登录成功后有90免费试用。

如何用AI工具来快速搭建一个网站呢?-8.jpg


  • 进行线上发布,可以获得免费的域名。(然而,每月收取12美元的费用,您将可以享受在线聊天、邮件支持、无限存储、50个联系人、50个AI生成促销、网站服务器、分析、SLL证书、免费的图片库、搜索引擎优化等功能和服务。此外,该服务还包含域名。)

如何用AI工具来快速搭建一个网站呢?-9.jpg


  • 后台控制面板包含了网站,市场,客户关系管理,财务发票,在线帮助等功能。

如何用AI工具来快速搭建一个网站呢?-10.jpg

最后成果还是还是很不错的,大家可以去试玩了。
我是蓝衫,风趣认真的互联网“数据料理师”。集百家所长,专注分享优质互联网资源。通过最便捷的方式,让互联网为你赋能!

GPT免费版可用:
Chatgpt免费版蓝衫科技网站:
蓝衫科技蓝衫软件博客:
Blog

梅雨潭 LV

发表于 2025-4-8 14:31:48

各类AI工具层出不穷,也给我们提供了各式各样的使用场景,诸如AI写作、AI生成思维导图、AI智能客服、AI回复工作邮件等等。  
最近小博也在探索AI工具的边界,想知道如何基于现有的AI工具——boardmix AI来搭建一个网站,几经周折之后,终于折腾出来了!
借着这个问题,来和各位分享一下,使用boardmix AI来快速搭建一个网站:
点击卡片,使用boardmix AI快速搭建一个网站!使用 boardmix AI 创建的网站效果

在使用 boardmix AI 创建网站之前,我们先来看一下使用 boardmix AI 创建的网站效果,下图是刚打开网站看到的页面。

注:我们将 boardmix AI 创建的网页通过 Netlify 进行部署,想查看网页效果的朋友,可以在浏览器中打开部署的链接:
使用boardmix AI搭建的网站效果,戳此查看!
如何用AI工具来快速搭建一个网站呢?-1.jpg


使用 boardmix AI搭建的网站首页

往下滑动页面,可以看到公司简介和提供的服务

如何用AI工具来快速搭建一个网站呢?-2.jpg


继续向下滚动,则是公司团队介绍、联系我们、友情链接、社媒平台和版权声明的内容。   

如何用AI工具来快速搭建一个网站呢?-3.jpg

使用 boardmix AI 创建网站会用到的工具


使用一个思维导图来呈现基于 boardmix AI 创建网站所需要用到的 4 类工具:


  • 代码生成工具
  • 网站开发工具
  • 代码托管平台
  • 网站部署工具

其中网站开发和网站部署工具有比较多的选择,你可以根据自己的喜好选择任意一款工具,这里我们选择的网站开发工具是 VS Code,网站部署工具是 Netlify

如何用AI工具来快速搭建一个网站呢?-4.jpg


*使用boardmix AI创建网站所需的工具-在线思维导图boardmix博思白板

下面以创建一个公司的官网为例,简要介绍基于 boardmix AI 创建网站的过程:
使用 boardmix AI 生成网站代码

在电脑浏览器打开 boardmix博思白板的首页,进入 boardmix 工作台,点击「新建白板文件」,创建一个白板。  
点击卡片,使用boardmix AI快速搭建一个网站!
如何用AI工具来快速搭建一个网站呢?-5.jpg


boardmix工作台

在新建的白板文件中,点击左上角的 AI 助手,打开下图所示的 AI 助手面板,点击面板的输入框,与 boardmix AI 开启互动问答。

如何用AI工具来快速搭建一个网站呢?-6.jpg


boardmix AI助手

使用 boardmix AI 生成网站代码之前,我们可以先规划一下网站首页包含的内容,或是让 boardmix AI 给我们提供参考:

如何用AI工具来快速搭建一个网站呢?-7.jpg


网站首页包含的内容

有了网站首页的初步想法之后,就可以向 boardmix AI 发起请求:


Step1:生成一个公司网站的首页html,页面内容必须包含公司简介、提供的服务、团队介绍、联系我们、友情链接、社媒平台、版权声明内容,其中公司简介、团队介绍要包含有图片,联系我们是表单的形式,供用户提交信息,社媒平台必须带有微博、知乎、小红书、B站平台的logo图片,要求给页面设置CSS样式,使用Tailwind CSS 2.2.16版本,并且网页的每个部分,例如导航栏、公司简介、服务、团队介绍、联系我们,要有清晰的区分,能够给用户更好的体验


输入指令之后,boardmix AI 就会生成整个网页的框架,点击面板右下角的「添加至画布」,将 AI 生成的代码插入白板中。

如何用AI工具来快速搭建一个网站呢?-8.jpg

选中文本框中的所有代码并复制,把代码粘贴到代码编辑器 VS Code 中,将文件保存为 index.html 文件,在浏览器中打开这个文件,就能预览网页的效果。  

如何用AI工具来快速搭建一个网站呢?-9.jpg

下图是 boardmix AI 初次生成的 html 代码在浏览器中渲染的效果,已经按照我们的要求,给出了网站的整体框架。  
页面中显示为裂开的图片,是因为生成的代码仅提供了占位符,没有与之对应的图片,我们可以将缺失的图片替换为自己喜欢的图片。

如何用AI工具来快速搭建一个网站呢?-10.jpg


网页雏形


Step 2:替换网页中丢失的图片

在 index.html 文件的同一路径下,创建一个 images 文件夹,用来存放网页会用到的所有图片,如网站的 logo 图标、社媒平台的 logo、团队成员图片等。

准备好图片后,逐一将网页代码中的 src 属性值更改为 images 文件夹中对应的图片,需要注意的是,src 属性值最前面需要带有文件夹的名称和一个斜杆,如下图右侧的 images/ ,后面是图片的名称和后缀名。

如何用AI工具来快速搭建一个网站呢?-11.jpg

修改代码之后保存并刷新页面,原本丢失的图片就能正常显示了。

如何用AI工具来快速搭建一个网站呢?-12.jpg

在现有网站内容的基础上,如果我们想进一步丰富页面的内容,譬如在导航栏和公司简介之间添加一个区域,用于展示公司的愿景、价值观或者产品的 Slogan,我们可以接着向 boardmix AI 提需求:


Step 3:我想在导航和公司简介之间添加一个类名为header的区域,这个区域带有一张宽度为100%的图片,同时图片最上方有一行文本,写着公司的愿景,麻烦你帮我写一下这部分的html代码,同时别忘了使用Tailwind CSS进行布局


boardmix AI 会在回答中返回对应的代码片段,点击代码右上角的「复制代码」,将代码复制到剪贴板。

如何用AI工具来快速搭建一个网站呢?-13.jpg


丰富页面内容

回到代码编辑器中,将代码粘贴到导航栏和公司简介之间,保存修改后的代码,刷新浏览器页面。

如何用AI工具来快速搭建一个网站呢?-14.jpg

修改后的网页效果如下,但这里还有一个小问题,公司愿景的文本与图片是上下排列的关系,不是我们想象中悬浮在图片上方的状态,因此我们还要调整一下文本和图片的布局。

如何用AI工具来快速搭建一个网站呢?-15.jpg

回到 boardmix博思白板,继续与 boardmix AI 对话,让它进一步完善现有的代码:


Step 4:文本位于p标签中,与图片是上下换行的关系,我想让文本悬浮在图片的正中间,而不是换行的关系,这得怎么修改代码呢?

boardmix AI 会返回修改后的代码,同样点击右上角的「复制代码」,替换前面复制到编辑器中的代码,经过调整之后,文本就会悬浮在图片上方。

如何用AI工具来快速搭建一个网站呢?-16.jpg

除了调整文本与图片的相对位置,文本颜色默认为黑色,与下方的图片对比不够明显,因此我们还可以调整文本的颜色。


Step 5:文本的颜色是黑色的,我该如何修改Tailwind CSS的类名,把文本变为白色的呢?

boardmix AI 会返回将文本设置为白色的代码,并且会在代码下方说明代码进行的变更,方便我们快速定位到相应的位置,在代码编辑器中作出修改。

如何用AI工具来快速搭建一个网站呢?-17.jpg

到这里,我们可以算是初步完成了一个静态网页的制作,如果你还想进一步完善,可以考虑进行如下操作:


  • 文本下方的图片设置为鼠标不可选中的状态
  • 降低图片的亮度
  • 团队成员的矩形照片裁剪为圆形
  • ……


简言之,只要是你想到的,或是从别的网站上看到的效果,都可以对着 boardmix AI 描述自己的需求,让它生成相应的代码,共同完善最终的网页效果。
将网页和图片上传到 GitHub

编写好一个网页后,我们可以尝试将网页和图片上传到托管平台 GitHub,再结合后面的部署操作,将只能在本地打开的网页发布为人人可访问的网页

将网页和图片上传到 GitHub,可遵循下面的操作:


  • 创建一个 GitHub 账户(如果还没有的话),访问 GitHub 首页并注册。
  • 在 GitHub 上创建一个新的仓库。点击右上角的 + 图标,然后选择 New repository。为仓库起一个名称,例如 “create_website_with_boardmix_ai",设置为公开仓库。你可以勾选 Initialize this repository with a README,以便在仓库中创建一个自述文件。
  • 最后点击 Create repository,完成 GitHub 仓库的创建。

将本地文件上传到 GitHub,主要有 2 种方式,一种是使用 Git 命令行,另一种是使用 GitHub 页面的上传功能,方便起见,这里选择后一种方式:


  • 在 GitHub 仓库页面上,点击 Add file 按钮,然后选择 Upload files。
  • 将你的 HTML 文件和图片拖放到上传区域,或者点击 choose your files,从本地电脑中选择文件。
  • 输入提交信息,然后点击 Commit changes,确认上传文件。

如何用AI工具来快速搭建一个网站呢?-18.jpg


*上传到GitHub仓库的网页和图片文件

部署发布网页 demo

最后来到部署发布网页的步骤,我们这里选择部署工具是 Netlify,具体步骤如下:


  • 在浏览器中打开 Netlify 首页,创建一个账户:点击右上角的 Sign Up 按钮,然后选择使用 GitHub 账户进行注册,授权 Netlify 访问你的 GitHub 账户。
  • 首次登录后,你将看到 Netlify 的仪表盘。点击 Import Project 按钮开始导入 GitHub 仓库。
  • 选择仓库来源:点击 Import from GitHub,然后在弹出的对话框中选择你想要部署的 GitHub 仓库。如果该仓库不在列表中,你可能需要在 GitHub 中为 Netlify 授权访问该仓库。
  • 配置项目:在 Configure Your Project 页面上,确认项目名称和仓库,其他选项无需修改,点击下方的 Deploy 即可。
  • 部署项目:Netlify 将自动部署你的项目,并为其分配一个 URL,例如 create-website-with-boardmix-ai.netlify.app。稍等片刻,你的项目将完成部署,可以通过分配的 URL 访问。

至此,你已经成功将 GitHub 仓库部署到了 Netlify 平台。如果你把 URL 分享给身边的小伙伴,他们打开就能看到你用 boardmix AI 创建的网站。每当你向 GitHub 仓库推送新的更改时,Netlify 会自动为你的项目重新部署。

如何用AI工具来快速搭建一个网站呢?-19.jpg

写在最后

在本文中,我们详细介绍了如何使用 boardmix AI 这个强大的工具来创建一个网站。借助这一 AI 工具,即便是从未接触编程的小白,也能用自己每天在说的大白话(即自然语言),让 AI 生成构建网页或互联网产品所需的编程语言,想法从提出到真正落地,用 boardmix AI 足矣,省时又省力。
现在,相信你已经看到了 boardmix AI 的潜力,希望这篇文章能激发你的创造力,开始尝试使用 boardmix AI 来实现自己各种天马行空的想法,一起共同探索 boardmix AI 的无限可能!
点击卡片,使用boardmix AI快速搭建一个网站!

您需要登录后才可以回帖 登录 | 立即注册