2024年11月14日星期四

刘小排:5分钟做个网站,人人都能学会

大家好,我是哥飞。

昨天给大家写了手把手教程:【哥飞实操教学】如何半小时上线一个小游戏网站 ,今天哥飞看到刘小排老师也写了一个用 Bolt.new 做网站的教程,哥飞申请转载过来给大家学习。


5分钟做个网站,人人都能学会

作者:刘小排

原文:https://articles.zsxq.com/id_4dus5o2w72rc.html

版权说明:原文发布于生财有术社区,刘小排老师授权哥飞转载本文,如果大家对生财有术感兴趣,可以扫描刘小排老师的二维码加入。

只靠想法就能赚钱的时代到来了!

点开了就别走!直接进入一分钟实操,感受一点点震撼!

震撼完你如果还有兴趣,再看我后面的详细讲解。


一分钟实操


我们让AI做一个星座运势网站。步骤如下

  1. 打开 https://bolt.new/

  2. 复制粘贴这一段Prompt,点击回车

1. 技术栈:用纯粹的HTML + TailwindCSS来做

2. 核心功能:我要做一个运势网站,用户填入自己的姓名、选择生日,点击按钮,就可以就行运势计算。运势计算具体算法我不管,你帮我完成,但是要算出来让用户感觉专业、有理有据、愿意付费。计算出来的运势至少要包括运势评级、运势分数、宜、忌、理由等等。

3. 功能区域:你要有完整的header,hero, testinoials, faq, features, pricing, how it works ,footer 区域。网站的版权所有人是刘小排,联系方式bourneliu66@gmail.com,其他内容需要编写得专业、真实。

4. 网站文案:所有网站上的文案内容,我要求你使用中文。关于这个运势计算网站,你需要强调我们是结合东方玄学、紫微斗数、易经、星座等等,强调中西方结合。

5. 网站风格:网站配色和风格需要现代化、高级,类似于苹果官网的风格。网站需要自适应各种屏幕尺寸。

  1. 坐等奇迹发生

  2. 它是有真实功能的。你可以在生成的网站中输入你的姓名和出生年月,算一算自己的运势,玩起来。

  3. 附:在聊天窗口打字问它:"我想把这个网站发给别人看,应该怎么办?" ,你的网站就自动发布了,会得到一个公开的URL地址,发给朋友炫耀。

这是我的,可以打开看看。https://cute-kitten-b88e4d.netlify.app/


怎么样,震撼到你了吗?



做网站并不玄妙。

想好你要做什么,按照下面的方案,你可以5分钟做一个网站。

没听错,只需要5分钟。足够做一个能够见人的网站产品了。

两年前我认为需要两天,去年我认为需要一天,现在我认为只需要5分钟。

"我有一个绝妙的idea、只差一个程序员了"这句话已经不再成立!只靠想法就能赚钱的时代到来了!

一、花10秒钟配置开发环境

程序员圈子传闻一句话:只要你配置好开发环境,你的工作就完成了一半。

考虑到咱们很多圈友不是程序员,对这些圈友来说,配置环境就更难了。

为了解决这个问题,我强烈推荐选用一个无需配置环境的AI开发工具:bolt.new

https://bolt.new/


只要打开网站就行,后续开发也可以在云端完成,并且可以一键部署到生产环境,正式上线发布。

二、花2分50秒描述需求


要点:语文功底

你需要反复琢磨一件事 —— 如何用最简单的话,传达出任何人(包括AI)理解起来完全没有歧义的内容?

请翻到文章开头,让我们来解析刚才到这一段Prompt。

第1句:目的是告诉AI选择技术栈。由于星座运势网站非常简单,我告诉它选用了纯粹的HTML和TailwindCSS结合。这样做出来的代码,一共就只有一个文件,非常易于维护。

第2句:简单描述需求

第3句:详细描述工作内容。这一句非常重要,请大家细品。

很多朋友写出来的文字有歧义,AI难以和你达成共识。很多朋友在这里产生了一种"AI很难用"的感觉,其实归根结底是自己的语文功底不行。

在这一句的示例中,我只使用了"header, hero, footer, testinoials, faq, features, pricing, how it works"这几个词。这几个词,是网站约定俗成的一些功能区域的名称,AI通过这几个词就可以完全明白它需要干什么。大家可以对照AI生成的代码,去理解它们的意思。

也可以反过来试试,如果你换成其他的表达方式,能否做到比我用的字更少、表达得更加没有歧义?


第4句:要求AI编写网站的文案。在这里,你也可以提出包括产品名称、Slogan、SEO文案、联系方式等等的详细要求。

第5句:描述你所需要的网站的风格。我就简简单单告诉它需要向苹果官网看齐,它就能够大概get到意思了

三、说好5分钟,现在还剩2分钟,干什么?

啥也不用干,等待AI帮你写完代码。

它写完代码、自动编译完成,你再告诉它需要部署上线,一共大概需要2分钟 ^_^

四、猜你想问

bolt.new报错了怎么办?

bolt.new是最近非常火的一个工具,服务器偶尔会挂。我也遇到过,如下图所示。

遇到这种情况,在保证你的网络配置情况下,刷新网站,等待一段时间就行了。

报错不是你的问题,是bolt.new的问题,这一点不用怀疑。我刚才展示的prompt非常稳定,它的执行100%会获得结果。



这个看着好简陋啊,真的有网站是这么做出来的吗?

我故意把例子做了简化,以便让更多的人理解。实际上,复杂的网站,也是可以这样开发出来的。一般我们会用bolt.net或者Cursor进行持续迭代。

为了写这篇教程,我做了一个稍微复杂一点点但也不至于过于复杂的示例网站,从购买域名到写完代码到全部上线,一共只花了不到1小时。今天凌晨3点上线,今天还没过完呢,到现在已经有674名用户使用了。

网站是 https://clicktest.me 你可以打开看看。

这似乎只是一个雏形,后面我怎么完善它呢?

你可以继续在聊天窗口里输入你的需求,要求它进行迭代。

同时,只要你的雏形是一个包含核心功能的MVP,你已经可以考虑开始推广、获取流量、获取反馈了。收到用户反馈后,再有的放矢地去迭代。

好的产品是迭代出来的。


这么简单,也能赚到钱?

是的。

首先,网站有流量,就能赚到钱。它和你开发网站所使用的技术或者工具无关,只和你是否抓住用户需求、能否获取到流量有关。

关于这一点,在我的办公桌上贴着梁宁老师《真需求》一书中的对联,反复提醒自己。

然后,前些天我在另外一个帖子里提到,咱们生财有术的圈友@良辰美 ,自己完全不会写代码。在过去两个月左右的时间内做了数十个网站,已经有不错的收入了。虽然他没有看过我这篇教程,但据我所知,他的方法是非常类似的,全靠AI来编码,每个网站的制作时间只需要几小时。