Let's talk about static sites!
Version 1.0.0 morphed into a fully-configurable text-based CMS for managing small websites with easy-to-manage configuration files in the
Install and Deploy
To automatically deploy this Template to Netlify for free hosting, make sure you’re logged in to your Netlify account and then simply click the
Deploy to netlify button below.
Want to install and develop locally? Hop over to the GitHub repo and follow the instructions in the README.
🔥 Credit 🔥
Specifically, the following starter projects helped me understand the power and flexibility of 11ty and from their examples I was able to extend the functionality to build this system:
- 🔥 eleventy-base-blog by Zach Leatherman
- 🔥 eastslopestudio-eleventy-starter by Ryan Scherler
- 🔥 eleventyone by Phil Hawksworth
- 🔥 eleventy-tailwind-alpinejs-starter by Greg Wolanski
- 🔥 jet by Marc Amos
In addition to the Structural, Color, and Frontmatter contols listed below, the system also has the following features baked in:
- SIAB (site in a box) … Update the site settings in
/src/_data/meta.js, content on the
about.mdpages, replace the
/src/posts/*.mdfiles with your own content and your new site is fully functional and ready to publish!
- 100 Lighthouse scores across the site’s Pages and Posts (not just on pages with a little text and no images 😉).
- ATOM feed at /feed.xml.
- Inlined CSS for the Prism Okaidia syntax highlight theme.
- Webpack to bundle up Alpine.js and any custom JS you want to include.
- Purged CSS and Minified source on production builds.
- Custom 404 which lists 10 most recent Posts.
- Contact form automagically works if hosted at Netlify.
- …other things I’m probably forgetting but will add when I think of them.
Structural and Color Controls
You can completely control:
- Multiple Authors in
- FOUR native Posts List and Tags List layout in the
- Colors of the NavBar, Headings, Buttons, etc. in
- Site META and defaults in
- Social Links icons in the Footer in
- Social Share icons in the
- And site-wide structures like max-width and display toggles of different content blocks in
The Frontmatter in your .md Posts and Pages files also allows you to manage:
- Heros (like on this home page) of types: carousel, graphic, video, and split. (Actually, you can add those Hero types to ANY Page or Post just by using the Frontmatter.)
- Featured Images (full-width banners at the top of the page just like in Wordpress).
- SEO overrides for OG and Twitter cards for Title, Description, and Images.
Native Shortcodes for Content Controls
There are several Shortcodes (both single and paired) and Filters to allow Editors to manage:
- Multi-column content (without writing CSS).
- SVG Sprites controls across the system and for inserting in .md Posts and Pages files.
- Custom Date display formats at the point of use.
- Description Lists for content like FAQs, Lists, etc.
- Wrapper for managing blocks with background images, borders, etc.
- YouTube embed shortcode that allows you to control and add an iFrame title (required for accessability and Lighthouse scores), width/height ratio, and set the start time in “m:ss” format so you don’t have to manually count the seconds.
- More Structural controls for Index Page
- Easy add Collections: Projects, Services, Jobs, etc.
- “Themed” versions for Portfolios/Creatives, Agencies, Digital Gardens, etc.
- Fully documented migration of Wordpress to 11ty
- Snipcart integration