Long-term WordPress user tries building with 11ty

Show notes#

As WordPress user we know how to build dynamic sites. We know next to nothing about Static Site Generators and the Jamstack. Here we rebuild a HTML site with 11ty (Eleventy). We also look at adding a CMS.

Things we cover#

• What we need to run 11ty (Node, Git and free hosting).
• Starting 11ty from scratch (installing 11ty).
• Creating our first page. Converting Markdown to HTML.
• Creating a header and footer template for our site.
• Introducing Front Matter (like WordPress custom fields).
• Adding CSS and bundling with a Nunjucks template.
• Bringing in other website assets with the Eleventy config file.
• Making the site's head dynamic for SEO (doing the job of a WordPress SEO plugin).
• Making HTML more manageable with partials.
• Adjusting CSS classes with Front Matter.
• Introducing data (like WordPress's database), but with a dynamic menu.
• Adding events. Similar to working with WordPress's post loop.
• Adding a CMS (Decap and locally the Front Matter CMS extension).

Resources#

• 11ty YouTube.
• 11ty Bundle. A fabulous place for all the latest by Bob Monsour.

These are years out of date, but with the help of 11ty docs and Claude AI I could covert to 11ty V3:

• Learn Eleventy From Scratch. Andy Bell.

• Turn static HTML/CSS into a blog with CMS using the JAMStack. Kevin Powell.