开源且免费的网站构建器 | Simpllo

你好，程序员！

本文介绍Simpllo，这是一款免费的网站构建器，任何人都可以免费设计、下载和部署网站。此服务无需账户即可使用，并且用户可以创建的项目数量不受限制。

感谢阅读！ - 内容由App Generator提供。

该产品仅用一周时间就开发完成，其背后的故事或许会令一些人感兴趣。目前的功能列表如下：

CORE Builder 通过 CDN、NPM 发货
- Simpllo - 如何在您的网站中使用它（免费）
Vanilla JS核心，无后端
从远程服务器拉取的远程组件
全局资产：CSS、JS（注入所有页面）
页面设置：SEO、外部 JS 和 CSS
组件定制
- CSS、类
网格布局
多页支持
预览（多设备）
下载 (ZIP)
在 Netlify 上部署

在尝试使用 React、React-DND、Craft.js 以及其他与 DnD 概念相关的流行库编写构建器代码几次之后，我们决定回归到从头构建的 VanillaJS 核心。有人可能会说这是一个错误，这或许只是又一个重复造轮子的项目。好吧，以下是做出此决定的原因：

✅ #1 - 我们需要一个 100% 控制的代码库

如果使用外部库，如果遇到错误，可能很难获得支持或找到解决方法

✅ #2 - 导出干净 HTML 格式的选项

React-DND能够导出页面，但 HTML 代码看起来不太好看。

✅ #3 - 使用远程组件

这个要求可能是 React-DND 和 Craft.js 之间最重要的障碍。通常，所有现有的构建器都会将组件嵌入到 React 中，而且所有组件都需要转换为 React。

在我们的简单构建器中，通过在运行时从远程服务器拉取组件来解决这种情况，从而使构建器与组件设计分离。

该机制是查询组件服务器，并在单个请求中获取所有元数据。服务器将组件转换为Base64哈希值，UI 知道如何解码它们并动态构建侧边栏：

例如，组件服务器发送的 BS5 套件如下所示：

{
    "name": "BS5",
    "version": "1.0.0",
    "type": "kit",
    "description": "BS5 BASIC",
    "demo": "https://django-pixel-lite.appseed-srv1.com/",
    "content": {
        "layouts": {
            "base.html": "BASE64"
        },
        "components": {
            "Grid": { 
                "grid-2rows.html": "PGRpdiBpZD0iZHJhZ2dhYmxlLWdyaWQtMSIgY2xhc3M9ImRyYWdnYWJsZSIgZHJhZ2dhYmxlPSJ0cnVlIiBkYXRhLXR5cGU9ImdyaWQtMmNvbCIgZGF0YS1pbmZvPSJHUklEIC0gMiBST1dTIENvbXBvbmVudCI+CiAgICA8ZGl2IGNsYXNzPSJyb3ciPgogICAgICAgIDxkaXYgaWQ9ImdyaWQtMmNvbC0xIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjUwJTwvZGl2PgogICAgICAgIDxkaXYgaWQ9ImdyaWQtMmNvbC0yIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjUwJTwvZGl2PgogICAgPC9kaXY+CjwvZGl2Pg==",
                "grid-3rows.html": "PGRpdiBpZD0iZHJhZ2dhYmxlLWdyaWQtMiIgY2xhc3M9ImRyYWdnYWJsZSIgZHJhZ2dhYmxlPSJ0cnVlIiBkYXRhLXR5cGU9ImdyaWQtM2NvbCIgZGF0YS1pbmZvPSJHUklEIC0gMyBST1dTIENvbXBvbmVudCI+CiAgICA8ZGl2IGNsYXNzPSJyb3ciPgogICAgICAgIDxkaXYgaWQ9ImdyaWQtM2NvbC0xIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjMzJTwvZGl2PgogICAgICAgIDxkaXYgaWQ9ImdyaWQtM2NvbC0yIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjMzJTwvZGl2PgogICAgICAgIDxkaXYgaWQ9ImdyaWQtM2NvbC0zIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjMzJTwvZGl2PgogICAgPC9kaXY+CjwvZGl2Pg==",

...TRUNCATED...

基于此，Builder 生成用户可以拖放的可视化组件。

这种模式使构建器与使用 Tailwind、Pico CSS 等构建的任何组件库兼容，并且我们认为这可能很有用，因为只需重用现有组件即可。

✅ #4 - 可嵌入其他产品

构建器与设计分离，可以作为 NPM 包捆绑，然后用于任何需要拖放功能的产品中。

产品的下一个版本将包含此功能，并且每个实现Builder期望的API接口的产品都可以可视化地构建UI。

YouTube 上发布的视频演示重点介绍了最新版本提供的功能：

如果这个开源产品引起了您的注意，请随时访问官方存储库，在本地编译产品并做出贡献。

下一步

改进、代码库重构、添加更多组件、框架并邀请开源贡献者来加速开发。

提前感谢您的反馈！我会在下面保存一些相关链接和资源：

👉 Simpllo Builder -Live DEMO
👉免费网站构建器-Documentation

鏂囩珷鏉ユ簮锛�https://dev.to/sm0ke/free-open-source-website-builder-42bc