Let's talk about static sites!

We set out to build a starter project template for 11ty that has TailwindCSS and Alpine.js baked in.

Version 1.0.0 morphed into a fully-configurable text-based CMS for managing small websites with easy-to-manage configuration files in the /src/_data directory.

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.

Current Deploy Status:

🔥 Credit 🔥

First and foremost, I want to credit the 11ty community, especially those listed in the starter projects!

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

Features

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 index.md and about.md pages, replace the /src/posts/*.md files 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 /src/_data/authors.json.
• FOUR native Posts List and Tags List layout in the src/_data/structures.js file via, postListStyle: and tagListStyle: keys.
• Colors of the NavBar, Headings, Buttons, etc. in /src/_data/colors.js.
• Site META and defaults in /src/_data/meta.js.
• Social Links icons in the Footer in /src/_data/social.json.
• Social Share icons in the /src/_includes/components/socialshare.njk file.
• And site-wide structures like max-width and display toggles of different content blocks in /src/_data/structure.js.

Frontmatter Controls

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 be 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.

Planned

• Search
• 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