Silex is a flexible, open-source website builder that allows you to extend its functionality through plugins. This page is designed for web designers with some technical skills and developers who want to integrate additional features into Silex. Below, we’ll cover the different ways you can increase Silex’s functionality through various plugins, such as 11ty, Silex-specific plugins, and GrapesJS integrations.
Silex plugins affect both the client and server, changing how the editor works. Use them to customize the editor's functionality and integrate with external tools. Check Silex plugins on GIthub
GrapesJS plugins are client-side only and modify the editor’s interface. Use them to enhance the drag-and-drop experience in the Silex editor. Check GJS market for GrapesJs plugins
You might be looking for other types of plugins to customize how you the editor behaves. Check this page about plugins for Silex editor - by opposition to 11ty plugins that are run at build time on GitLab.
11ty plugins run at build time and modify the generated HTML. Use them when you need to change the structure or content of the static site. Ceck 11ty plugins
Once you've published your site with Silex, it generates the following files and directories:
Here’s a typical .gitlab-ci.yml file:
# silexOverwrite: true
# You will want to remove these lines if you customize your build process
# Silex will overwrite this file unless you remove these lines
# This is the default build process for plain Eleventy sites
image: node:20
pages:
stage: deploy
environment: production
script:
- npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
- mkdir -p public/css public/assets && cp -R public/css public/assets _site/
- rm -rf public && mv _site public
- echo "The site will be deployed to $CI_PAGES_URL"
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
Add it to your package.json file:
{
"dependencies": {
"@11ty/eleventy-img": "^1.0.0"
}
}
eleventy.config.js file:Add the following code to initialize the plugin as explainted in the plugin documentation page
const Image = require("@11ty/eleventy-img");
module.exports = function (eleventyConfig) {
eleventyConfig.addShortcode("image", async function (src, alt, widths = [300, 600], sizes = "100vh") {
let metadata = await Image(src, {
widths,
formats: ["avif", "jpeg"],
});
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
// Error if alt text is missing (alt="" is acceptable)
return Image.generateHTML(metadata, imageAttributes);
});
};
This will generate an avif and jpeg version of all the images in your site, but you can play with the configuration and add attributes to each image in order to also generate different sizes of the images and serve the smallest possible one to each device depending on screen size.
.gitlab-ci.yml for Deployment:Make sure to remove # silexOverwrite: true to prevent Silex from overwriting the .gitlab-ci.yml file. Add - npm i to install the dependencies before running the build process.
# silexOverwrite: false
# You will want to remove these lines if you customize your build process
# Silex will overwrite this file unless you remove these lines
# This is the default build process for plain Eleventy sites
image: node:20
pages:
stage: deploy
environment: production
script:
- npm i
- npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
- mkdir -p public/css public/assets && cp -R public/css public/assets _site/
- rm -rf public && mv _site public
- echo "The site will be deployed to $CI_PAGES_URL"
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'