- 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 (
npx elva) - Search API (see
dist/api/search.json) with example implementation. Any content tagged_searchwill 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
- Accessible tooltip component
- 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
- 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 (you will need to set the URL environment variable too e.g URL=https://example.com):
export URL=https://example.com && npm run build:prod
You can also set the environment variables NODE_ENV=production and URL=https://example.com in your hosting control panel and use npm run build as with previous versions of elva.
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.jsyou'll see some dynamic settings forurl,isProductionandisStaging(underGlobal Settings). Make sure these environment variables are set in staging and production and tweak as necessary. You must set atURLenvironment variable for production builds to work properly as certain meta tags and the CDN require a full domain. - Configure your site settings
- Configure site languages via the CLI
npx elva, under theLanguagessub-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
- Add additional translations using the CLI
- Design your site by customising the CSS (
/themes/default/css/), layouts (/themes/default/_layouts/) and includes (/theme/default/_includes/)... or duplicate the default theme usingnpx elva setup new-theme. You can also manually set the theme in/content/_data/settings.jsonto the name of your theme folder. We also have support changing this in the clinpx elva setup theme. - Setup a custom template for your open graph images (
/themes/{theme}/_layouts/opengraph-preview.njk)
- 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/*.jsonto 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 npx elva. The CLI defaults to an interactive menu, but you can also use shortcuts for common tasks.
npx elva setup site- Setup the basic site settings for a new projectnpx elva setup theme- Choose the theme you wish to usenpx elva setup new-theme- Create a new theme by duplicating the default themenpx elva setup delete-default-content- Delete all the default content that ships with elva
npx elva language add- Add a new languagenpx elva language remove- Remove an existing languagenpx elva language list- List all languagesnpx elva language default- Change the default language
npx elva content add- Add new contentnpx elva content remove- Remove existing contentnpx elva content import- Import content from WordPress etcnpx elva content regenerate- Regenerate all open graph images
npx elva blogroll list- List all blogroll entriesnpx elva blogroll add- Add a new blogroll entrynpx elva blogroll remove- Remove blogroll entries
npx elva collections list- List all collectionsnpx elva collections add- Add a new collectionnpx elva collections remove- Remove a collectionnpx elva collections edit- Edit a collectionnpx elva sync-collections- Sync thecollection.11tydata.jstemplate to all collections
npx elva translations add- Add a new translationnpx elva translations remove- Remove a translationnpx elva translations sync- Sync missing keys from the default language to other locales
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 can be seen on the 404 page.
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.