• Status: ✅ Active
• Contributors: @scott
• Description: A multilingual, clean, green 11ty starter theme.
• Author: Scott Evans
• Author URI: https://scott.ee

A multilingual, clean, green, 11ty starter theme. elva provides solid foundations for your next web project and a built in CMS (Front Matter CMS) for managing content. Try the demo!

Features include:

• Optimised CSS, JS and HTML
• Responsive images that support lazy loading and modern formats (avif, webp)
• Critical CSS using 11ty bundle
• Support for the Photon CDN (can be turned on via settings)

• Multilingual
• Dark / light mode
• Skip link and ARIA hints

• RSS feed with XSLT styles
• JSON feeds
• Sitemap
• Web manifest for PWAs
• humans.txt
• robots.txt
• Discourage AI bots

• A CLI for managing languages, setup and common tasks (npm run cli)
• Search API (see dist/api/search.json). Any content tagged _search will appear in the search index
• Front Matter CMS
• Open graph image generation (dev server must be running)
• Draft support
• Syntax highlighting
• Simplified embeds for YouTube, Vimeo etc
• Plenty of helpful filters and functions (see /elva/filters/*)
• Alpine.js
• Eleventy Fetch
• Eleventy Navigation

• A fancy default theme
• Fix: Make the random filter choose the same article for both languages
• Accessible tooltip component
• Markdown-It — Support multilingual quote styles
• Images — Size presets (full width, half etc that set the sizes attribute automatically)
• Profile verification / .well-known support for the Fediverse and Nostr (1)
• Language redirect based on browser setting (1)
• Cleaner language selector
• Pagination examples
• Allow for variable subsitution in translations e.g. Hello, {{name}} (still needs to handle plurals!)
• Front Matter CMS — Fix previews when customising the post/page slug (1, 2)
• Front Matter CMS — More helpful scripts
• twtxt feeds (1)

Make a directory and navigate to it:

mkdir my-site-name
cd my-site-name

Clone this repository:

git clone https://github.com/scottsweb/elva.git .

Install dependencies:

npm install

Run Eleventy for site development. View the site at http://localhost:8080:

npm run dev

Generate a production-ready build to the dist folder:

npm run build:prod

You can set the environment variable NODE_ENV=production in your hosting control panel too and use npm run build as before.

To use Front Matter CMS, install VSCodium or Visual Studio Code and enable the extension (if it doesn't enable automatically). It will open each time you launch your project.

For next steps, see the documentation.

• In .eleventy.js you'll see some dynamic settings for url, isProduction and isStaging (under Global Settings). Make sure these environment variables are set in staging and production and tweak as necessary
• Configure your site settings
• Configure site languages via the CLI npm run cli, under the languages sub-menu
• Set your own default images, icons and favicon by replacing the images in /content/assets/img/
• Add your content — it's easiest to do this with Front Matter CMS which exposes all front matter in the UI
• Setup a custom template for your open graph images (/themes/{theme}/_layouts/opengraph-preview.njk)
• Design your site by customising the CSS (/themes/default/css/), layouts (/themes/default/_layouts/) and includes (/theme/default/_includes/)... or duplicate the default theme and set the theme in /content/_data/settings.json to the name of your new themes folder. We also have support for this in the cli npm run cli setup theme although it doesn't setup a new theme for you just yet.

• Set your preferred image sizes and formats in /elva/config/image.js
• If you add more front matter, you may wish to edit .frontmatter/frontmatter.json / .frontmatter/config/content/pagefodlers/*.json to add Front Matter CMS support
• Use Eleventy Fetch to grab some API data
• If you enable Photon CDN support familiarise yourself with these limitations
• Enable build caching for your host

You can use the CLI to manage languages and content directly from the command line. Start with npm run cli. The CLI defaults to an interactive menu, but you can also use shortcuts for common tasks.

• npm run cli setup site - Setup the basic site settings for a new project
• npm run cli setup theme - Choose the theme you wish to use
• npm run cli setup delete-default-content - Delete all the default content that ships with elva

• npm run cli language add - Add a new language
• npm run cli language remove - Remove an existing language
• npm run cli language list - List all languages
• npm run cli language default - Change the default language

• npm run cli content add - Add new content
• npm run cli content remove - Remove existing content
• npm run cli content import - Import content from WordPress etc
• npm run cli content regenerate - Regenerate all open graph images

• npm run cli blogroll list - List all blogroll entries
• npm run cli blogroll add - Add a new blogroll entry
• npm run cli blogroll remove - Remove blogroll entries

• npm run cli collections list - List all collections
• npm run cli collections add - Add a new collection
• npm run cli collections remove - Remove a collection
• npm run cli collections edit - Edit a collection
• npm run cli sync-collections - Sync the collection.11tydata.js template to all collections

With 4, you'll find a a new command line interface (documented above). This should make getting started and managing languages much easier. There is also a new search index you can use to build a custom search component, an example of that will be released soon.

As of version 3.0 of elva, there are now separate folders for /themes, your sites /content and elva related stuff /elva. The idea is to make upgrades of elva simpler by seperating frequently changed things (the theme and content) from the guts of the project. Hopefully this is helpful, but please open an issue if you would like to see further improvements made.