🚧 This is work in progress.

This is a starter repo for websites using 11ty. It is configured to use Vue, Open Props, PostCSS, and an API Service (we use Strapi, but feel free to bake in your own headless CMS, or use only local data).

You can fork this repo to build new websites. Use it as an upstream repo to get all the new and – hopefully – shiny stuff. Or use the Use this template button in the repository menu. You won’t be able to merge upstream updates if you use this option.

While this template includes some optimisations, it aims to be as adaptable as possible.

To serve the site run npm run serve. This will start a server at http://localhost:7777. 11ty handles live reloading for you.

As we compile assets as part of the 11ty pipeline, the site will reload if you update the CSS or JS, or add new static assets.

We went a bit overboard, because going overboard is fun. No. 11 automatically recognises if you add new files to the _functions_, _shortcodes, and _transforms folders.

The camel cased name of the file is the name of the function or shortcode.

Configure 11ty plugins in ./_plugins and add them to the array. You can initiate the plugin with all necessary options and export it:

module.exports = eleventyPlugin({ this: 'is fine ' })

Plugins are separated into two section: There are some that should always be added (e.g. Vue), and some for production optimisations.

These are the default plugins.

• @11ty/eleventy-plugin-rss
• @11ty/eleventy-plugin-syntaxhighlight
• @11ty/eleventy-plugin-vue
• Render Plugin

Similar to plugin, shortcodes live in ./_shortcodes. All items in index.js will be added to 11ty.

💁 Open improvement: Implement different types of shortcodes. Currently .addShortcode is used for all functions.

Same game for transforms. Like the plugins, those are split into necessary transforms and optimisations for production builds.

You can use Vue components thanks to @11ty/eleventy-plugin-vue to render parts of the page. The plugin does not support Vue Layouts currently, they are still written in Nunjucks.

While 11ty ships with markdown-it we overwrite the default library to use an extended version. Installed plugins are:

• markdown-it-abbr
• markdown-it-anchor
• markdown-it-attribution
• markdown-it-attrs
• markdown-it-container
• markdown-it-footnote
• markdown-it-prism

The library is exported as an ES module, so that you can use it Vue components, as well as Node builds.

This project is using PostCSS to bring next generation CSS into the present. Further, we have added some plugins to enable sass like syntax, like variables or mixins.

Add CSS files in ./_src/assets/css/. 11ty detects all files ending in .css in this folder and creates entry points for them. This will make the contents of the parsed file available in the global data cascade.

💁 Compilation happens through ./_helper/compileCss.js.

We use Husky and lint-staged for a bunch of checks. You find the scripts in ./.husky.

If you deploy your site using Netlify, you’ll be pleased to know that netlify-plugin-11ty is installed.

This project uses Conventional Commits. Commit messages have to adhere to the specified format.

• JavaScript Build Process
• SEO optimisation
• Design Tokens – using Open Props
• Parse CSS files into actual files, current build only supports inline styles

This starter contains ideas and concepts from around the around. Namely:

• eleventastic by Max Böck
• Supermaya by Mike Riethmueller

Thanks also to the developers of the 11ty plugins that made us write less code. 💞