几分钟内开发一个网站，这款开源工具火了！

在以前想要快速搭建一个网站展示自己作品，对技术小白来说可能是非常难的事情，面对复杂的代码看着就头疼。

虽然有一些建站工具，但是功能复杂难以上手，再到如今的 AI 编程工具，动动嘴皮就能构建一个网站出来。

可一旦涉及到改动界面，你会发现 AI 很难理解我们描述的需求，往往会胡乱猜测改动页面，最后终究达不到我们想要的效果。

近日，我在 GitHub 上发现了一款开源的低代码建站 AI 工具：Frappe Builder，能够像 Figma 一样轻松设计网站，并能一键发布上线。

GitHub：https://github.com/frappe/builder

像用 Figma 一样，拖拽做网页

Frappe Builder 最大的亮点就是提供了与 Figma 类似的可视化编辑器，让人人都能上手使用。

左边为组件列表，中间为工作区，右边是样式面板，我们只需轻松拖拽一下组件，就能完成网站页面搭建。

比如我们想给页面加个按钮、图片或者文本什么的，直接从左边拖到中间页面，然后在右边面板调整位置和样式，填充内容即可。

比起用 AI 编程工具来回折腾，这种方式更加直观可控，所见即所得，想怎么改就怎么改。

不只是静态页面，动态填充数据

更强大的是，所构建出来的页面内容可以是动态的，支持连接 Frappe Framework 数据库实现内容根据需求动态填充。

比如我们用它构建个人博客，文章列表和详情页可以自动从数据库读取生成。

甚至，连电商网站涉及到的商品数据，产品展示、购物车这些动态功能也能实现。

我们只需要在后台的内容管理系统上，增删改相关的数据，前端页面自动更新，不用一个个页面去手动修改维护。

一键发布，轻松上线

当我们搭建完网站后，只需要点一下右上角「Publish」发布按钮，就能将网站一键上线。

不用再去搞服务器配置、域名绑定这些繁琐的工作，这对于技术小白来说，真的非常友好，让我们更专注于网站功能的搭建。

除了有这些功能外，Frappe Builder 还有很多值得一提的亮点，比如下面这些：

响应式预览：构建出来的页面，默认适配不同尺寸的设备，可以直接预览手机、平板、电脑的显示效果。

丰富组件管理：常用的组件都有，我们还可以构建通用模板，比如把导航栏、页脚这些做成模板，在其他页面可以直接用。

自定义脚本：如果我们觉得工具现在默认功能还不够，自己懂点编程的可以通过 JavaScript 或 CSS 来扩展。

性能优化：所生成的页面代码相当干净轻量，并在 Google Lighthouse 测试中都获得了高分成绩，有利于后续的代码维护。

快速安装，轻松上手

再来说一下 Frappe Builder 的安装，官方提供了 Docker 快速部署方式，只需要执行如下几行命令即可：

# 步骤 1：设置文件夹并下载所需文件

mkdir frappe-builder && cd frappe-builder

wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/builder/develop/docker/docker-compose.yml 

wget -O init.sh https://raw.githubusercontent.com/frappe/builder/develop/docker/init.sh 


# 步骤 2：启动容器

docker compose up

等待完成后，只需要在浏览器上访问 http://builder.localhost:8000 即可使用。

不过要注意，它底层依赖 Frappe Framework 这个框架，所以得先把框架环境搭好，官方有提供详细的教程。

总的来说，想要快速构建一个网站又不懂代码的朋友，Frappe Builder 可以作为你们一个选项。

与 Figma 类似的可视化编辑器，只需要简单拖拽就能构建页面，而且内容可以是动态的，简单做个博客或者小商城没问题。

打赏