背景
我在我的 Notion 分享页中,搜集整理了大量的课程读者好评,不过当前的分享方式只能在 Notion 页面中浏览,从博客访问的话需要多一次跳转,并且 Notion 的访问速度必然不如博客快。
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图](https://pic.eryinote.com/PicGo/202501041341193.png)
所以我希望能用 Bolt 来制作一个 Notion 课程介绍网页,然后部署到我的这个博客上。
初次尝试
首先我将 Notion 课程 好评页面 直接导出为 HTML 文件
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图1 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图1](https://pic.eryinote.com/PicGo/202501041350531.png)
然后将这个 HTML 文件发给 Bolt,让它美化一下,它直接理解了我的意图,明白我想制作一个课程的 landing page,输出了一个可以直接预览的网页
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图2 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图2](https://pic.eryinote.com/PicGo/202501041354844.jpeg)
不过目前这个课程页面还非常的简单,内容不够充实,页面布局也比较单调乏味,所以我需要对它进一步优化。
接下来我把曾经做过的课程海报发给 Bolt,让它识别海报上的文案,然后直接加到网页中,结果如下图所示。
可以看到 OCR 识别正确,但网页的设计感太差了,不好看。
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图3 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图3](https://pic.eryinote.com/PicGo/202501041816074.jpeg)
我觉得要想把课程页做好看,首先得知道好看的课程页长什么样,所以我开始搜集好看的 Landing Page。
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图4 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图4](https://pic.eryinote.com/PicGo/202501041737698.jpeg)
我把这个网址 https://www.newcult.co/ 发给 Bolt,让它模仿网页的设计,然后进行修改,结果如下图所示,并不是很成功
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图5 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图5](https://pic.eryinote.com/PicGo/202501041818747.jpeg)
所以我决定重新整理课程文案,自己拟定设计思路,然后再交给 Bolt 来设计网页。
此处省略两个小时
将课程宣传文案整理好之后,我重新发给 Bolt,让它根据完整的文档内容来生成一个 Landing Page,可以看到在结构更加完善的文档下,它生成的网页也更有条理了
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图6 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图6](https://pic.eryinote.com/PicGo/202501042233788.gif)
此处省略 2 小时
经过 2 个小时的不断修改和新增内容,当前阶段的结果如下,虽然基本不存在什么设计感,但该有的内容框架都差不多搭建好了。
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图7 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图7](https://pic.eryinote.com/PicGo/202501042344505.gif)
此处省略 2 小时
发现了一个网站,提供了可以直接使用的 tailwind.css 代码片段,有各种类型的模块,比如 Header,Footer,Blog,Feature 等等
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图8 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图8](https://pic.eryinote.com/PicGo/202501051307320.png)
我直接将样式的代码复制粘贴给 Bolt,让它参考代码样式,然后再生成内容,效果很不错。
所以现在网站变成这样子了
![零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图9 零基础使用 Bolt.new 制作课程宣传页,6小时从构思到上线插图9](https://pic.eryinote.com/PicGo/202501051312145.gif)
你可以访问这个「 Notion 课程介绍页」 查看效果。
不过现在网页是通过 Bolt 的一键部署功能上线的,所以还没有自定义的域名,也暂时不知道怎么才能将网页部署在自己的服务器上,需要再研究一下,再来更新文章。
使用 Bolt.new 的一些感受
Bolt 的确是傻瓜式生成,全程只需要自然语言进行对话即可,并且它每次修改网页它只会修改特定部分的代码,不会像 Claude 的 Artifacts 那样,每次都需要重新生成完整的网页。
所以即便我和 Bolt 对话了将近六个小时,提交了将近 40 次修改需求,花费的 Token 数也才 122 万,而 20 美刀的方案一个月有 1000 万 Token 数,所以对我来说还是非常值的。
只不过当前生成的网页样式还比较生硬,几乎没有设计感,也可能是我的提示词不够详细,还需要更多研究。
对于毫无网页搭建经验的我来说,Bolt 的确是一个超级强大的工具。搭建课程网页的念头已经在我脑海里已经萦绕了不止一年,但现在用 Bolt 不过半天时间,一个满足我最低预期的网页就做好了,感谢 AI,也更期待未来了。
关联阅读:
本站所有文章,除非特别说明或标注,均为本站原创发布。转载本文需附上本文链接,未经授权,禁止大篇幅复制、盗用、采集或发布本站内容至其他网站、书籍等各类媒体平台。