Skip to content

odies/site-builder

 
 

Repository files navigation

Free & Open-Source Site Builder that uses Vanilla JS and a Remote Server for components injection - Actively supported by AppSeed.

Free & Open-Source Website Builder - Actively Supported by AppSeed.


Roadmap & SPECS

Status Item info
Core Vanilla JS
Components Bootstrap 5
Remote Components Server https://components-server.onrender.com/kits/bs5/
Persistence (local storage) Save, Restore, Clear
One-Page Layout Single Component Drag & Drop
Component Customization Text-Only
Grid Components This allows to inject predefined rows (2,3,4 columns)
USE Remote Components Yes
Component Customization Texts, Links
Component Customization Images
Component Styling CSS, Classes
PAGE Customization CSS
PAGE Customization JS
Manage SEO Title, Description, Keywords
Handle Multiple Pages YES

Compile the Builder

Tested with Node 16.x, 18.x.

$ git clone https://github.com/app-generator/free-site-builder.git
$ yarn
$ yarn dev # development (LIVE Reload)

Components Server (distant)

Managed by Flask (optional). By default, a LIVE Components Server is used.

$ cd free-site-builder/backend
$
$ virtualenv env
$ # Or
$ python -m venv env 
$
$ source env/bin/activate  # Linux
$ # Or
$ .\env\Scripts\activate   # Windows
$
$ pip install -r requirements.txt
$ flask run --debug

Here is the output:

  • http://localhost:5000/
  • http://localhost:5000/kits/, returns available KITS
    • 'material-kit'
    • 'kit2'
  • http://localhost:5000/kits/material-kit/, return Material Kit assets
{
    "name": "Material Kit BS5 ",
    "version": "0.0.0",
    "type": "kit",
    "material-kit": {
        "layouts": "base.html",
        "components": {
            "footers": {
                "footer.html": "NA"
            },
            "headers": {
                "header.html": "NA"
            },
            "navigation": {
                "navigation.html": "NA"
            },
            "general": {
                "section1.html": "NA"
            }
        }
    }
}

Add new component

  • Navigate to backend/apps/templates/bs5/components
  • create the component like footer.html
  • Edit the file and add the HTML code
  • Compute the Base64 hash using service:
  • Update info.json and add the new component using existing category or a new one
    • Syntax:
... (truncated) ...
        "components": {
            "footer": {
                "footer.html": "BASE64_Hash HERE"
            }, 
        }   
... (truncated) ...         

NOTE: The UI Builder uses the local storage to cache the info.json pulled from the server.

In order to have the latest version, please open an incognito window or clean manually the data from the local storage.


For more information, contact AppSeed support@appseed.us.



Free Site Builder - Provided by AppSeed.

Releases

No releases published

Packages

No packages published

Languages

  • HTML 50.9%
  • TypeScript 34.5%
  • CSS 12.3%
  • Python 2.2%
  • Shell 0.1%