This documentation is for developers who want to host Silex themselves. Users don't need to install Silex CMS because it is installed on v3.silex.me.
You may be looking for the user guide for Silex CMS which explains how to use this feature in Silex
Silex CMS uses GraphQL, 11ty static site generator and Gitlab pages. This feature bridges the gap between no-code and the JAMStack composable architecture.
Silex CMS is a Silex plugin you need to configure to work with Silex. Here is the plugin source code and here is the code behind v3.silex.me which configure Silex CMS for the public instance hosted for free by Silex Labs organisation.
Silex CMS integrates any GraphQL API and lets uers design on real data. When the user publishes the website it will generate 11ty.dev pages and data files to query the API at build time.
11ty versions > 3 is required
Silex CMS feature request is here, updated with the latest development status
This page will explain to developers how to do the following:
- Configure Silex with the CMS plugin
- Configure 11ty.dev
- Optional: host Silex + 11ty + a headless CMS online
- Optional: handle user authentication and offer a real SaaS experience to your users
Alternatively you can run this project instead which has the integration ready
¶ Run Silex
Requirements: nodejs 18+
There are multiple ways to run Silex on your local computer. We start with this simple command:
npx @silexlabs/silex
Then open http://localhost:6805 and check that Silex works correctly. Also publish the website to be sure everything is functional.
You will notice that Silex has saved the website in ./silex/storage/ and published the website to ./silex/hosting/
$ tree
.
└── silex
├── hosting
│ ├── assets
│ ├── css
│ │ └── index.css
│ └── index.html
└── storage
└── default
├── assets
├── meta.json
└── website.json
¶ Run 11ty
Similarily there are multiple ways to run 11ty on your local computer
Open a new terminal and run
npx @11ty/eleventy
This will build the website to ./_site:
$ tree
.
├── silex
│ ├── hosting
│ │ ├── assets
│ │ ├── css
│ │ │ └── index.css
│ │ └── index.html
│ └── storage
│ └── default
│ ├── assets
│ ├── meta.json
│ └── website.json
└── _site
└── silex
└── hosting
└── index.html
¶ 11ty plugin for Silex
Here is the plugin which brings the CMS feature to Silex: Silex CMS plugin
¶ Installation
Download and install with npm install @silexlabs/silex-cms
This will download the plugin to node_modules
¶ Client side config
Create a config file for Silex, let's call it ./silex/client.js and add this config to it:
// silex/client.js
import cms from './js/silex-cms/client.js'
export default function(config, options) {
config.addPlugin(cms, {
dataSources: [{
id: 'countries',
type: 'graphql',
name: 'Countries API',
url: 'https://countries.trevorblades.com/graphql',
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
}],
// ... Other options for @silexlabs/grapesjs-data-source plugin - see https://github.com/silexlabs/grapesjs-data-source
// ... Other options for @silexlabs/silex-cms plugin
imagePlugin: true,
i18nPlugin: true,
})
}
If you start Silex with this config (npx @silexlabs/silex --client-config=./silex/client.js) you will see that Silex trys to load http://localhost:6805/js/silex-cms/client.js and it fails with a 404 which is normal as we need to make the plugin available there, check the next section.
¶ Server side config
To make the plugin available to the client side at the URL http://localhost:6805/js/silex-cms/client.js, you need to create ./silex/server.js config file:
// silex/server.js
const StaticPlugin = require('@silexlabs/silex/dist/plugins/server/plugins/server/StaticPlugin').default
const node_modules = require('node_modules-path')
module.exports = function(config, options) {
config.addPlugin(StaticPlugin, {
routes: [
{
route: '/js/silex-cms/',
path: node_modules('@silexlabs/silex-cms') + '/@silexlabs/silex-cms/dist/',
},
],
})
}
Then start Silex with both config files:
npx @silexlabs/silex --client-config=./silex/client.js --server-config=`pwd`/silex/server.js
Now Silex loads without error on http://localhost:6805/
¶ Configure 11ty
For Silex CMS to work 11ty requires at least the 11ty fetch plugin installed. And it is recommended to install the 11ty image plugin and the 11ty i18n plugin.
Here is how to installl them
npm install @11ty/eleventy @11ty/eleventy-fetch @11ty/eleventy-img
Also you will need to configure 11ty to copy CSS files to the final website. For that you need to create this .eleventy.js file:
// .eleventy.js
const { EleventyI18nPlugin } = require("@11ty/eleventy");
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
// Serve CSS along with the site
eleventyConfig.addPassthroughCopy({"silex/hosting/css/*.css": "css"});
// For the fetch plugin
eleventyConfig.watchIgnores.add('**/.cache/**')
// i18n plugin
eleventyConfig.addPlugin(EleventyI18nPlugin, {
// any valid BCP 47-compatible language tag is supported
defaultLanguage: "en",
});
// Image plugin
eleventyConfig.addShortcode("image", async function(src, alt, sizes) {
let metadata = await Image(src, {
widths: [300, 600],
formats: ["avif", "jpeg"]
});
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
// You bet we throw an error on a missing alt (alt="" works okay)
return Image.generateHTML(metadata, imageAttributes);
});
};
¶ Build your first 11ty site with Silex
You can add a text and configure it like this:
Then run 11ty again:
$ npx @11ty/eleventy
[11ty] Writing _site/index.html from ./silex/hosting/index.html (liquid)
[11ty] Benchmark 725ms 96% 1× (Data) `./silex/hosting/index.11tydata.js`
[11ty] Wrote 1 file in 0.75 seconds (v2.0.1)
$ tree -I node_modules
.
├── package.json
├── package-lock.json
├── silex
│ ├── client.js
│ ├── hosting
│ │ ├── assets
│ │ ├── css
│ │ │ └── index.css
│ │ ├── index.11tydata.js
│ │ └── index.html
│ ├── server.js
│ └── storage
│ └── default
│ ├── assets
│ ├── meta.json
│ └── website.json
└── _site
└── index.html
¶ Final setup, get to work
¶ Local install
Now you will need to keep 1 terminal with Silex running
npx @silexlabs/silex --client-config=./silex/client.js --server-config=`pwd`/silex/server.js
Also keep 1 terminal with 11ty in server mode
npx @11ty/eleventy --serve
Open a browser with Silex on http://localhost:6805/
And another browser tab to display the end result: http://localhost:8080/
¶ Online and possibly mutli-user, multi-websites
You can host Silex online and 11ty too and have your personal Webfow/Elementor/...
Here is the config I use to deploy the official v3.silex.me instance. It lets users login and store their websites with FTP and gitlab.
You may also be interested in the grapesjs-directus-storage plugin to authenticate your users with directus. Check out the example config and plugins.