Eleventy for Static Sites
Benefits of static site generation along with CMS driven content.
Create a new project folder and do
npm init and
Install dev dependency of 11ty
npm i @11ty/eleventy --save-dev
Copy the html or any template available.
.eleventy.js and config it as required.
Run build and/or serve commands as needed.
Watch and fix for paths of src and href as assets and other html files.
Alternate to jekyll.
Assuming local project installation
Searches the current directory, outputs to ./_site
It is same as
npx @11ty/eleventy --input=. --output=_site
If we want to use only few specific templates
npx @11ty/eleventy --formats=md,html,ejs
npx @11ty/eleventy --serve
For changing port
npx @11ty/eleventy --serve --port=8081
To configure eleventy just put a
.eleventy.js file and configure it.
Find theme/template and then run 11ty over them config file where we can specify what static assets we want to copy from src to publish dir Utility is that we can use template available in any format and use 11ty to compile a static site from it.
Overriding template engines for a .liquid file we can include this to parse it as a njk.
As far as data transformation from a CMS or any source to template is concerned we can keep on using gatsby as it offers the graphql api with data sources. So 11ty is useful in case if ready to use good ui templates are available in liquid or njk or handlebars or any other format.
Plugins are availbale if you want to do some build time transformation of say images.
- Ayush 🙂