DEV Community

Cover image for Introducing the 11ty Netlify Jumpstart
Stephanie Eckles
Stephanie Eckles

Posted on

9 2

Introducing the 11ty Netlify Jumpstart

I'm pleased to share with you a template repo to help give you a jumpstart into using 11ty!

Quickly launch an 11ty-generated static site. Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images.

Skip the chit chat and jump to it >

This jumpstart is intended to be just enough to be a functional site/blog using 11ty, and also to introduce essential 11ty features.

Review the "Quick Start" for how to get this starter up and running for your project.

I spent a decade creating WordPress themes and plugins then flipped to product development + leading development of a multi-platform enterprise design system. My intro to JAMstack was with Gatsby, but 11ty fills a special place that is so needed for truly static sites. I'm in love, and I think you will be, too.

This jumpstart is based on my HTML / Sass Jumpstart which you might enjoy if you're not in need of 11ty.

This jumpstart is an abstraction of my setup for ModernCSS.dev which was my first 11ty site.

Is Netlify hosting required?

It's not required, but highly recommended, and is also how the build process is setup to run against.


I plan to do a screencast - possibly a live one? - explaining more about this jumpstart and why I'm so pro-11ty. Comment below if you have questions or would be interested in watching a live walkthrough โœจ

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (4)

Collapse
 
girlscodemk profile image
Eva - includeJS.dev ๐ŸŽˆ โ€ข

Hey Stephanie, quick question: if you were building a static agency website today (main requirement: speed & performance&SEO, CMS is an extra), would you build it with 11ty or gatsby? ๐Ÿค” (or something else?)

Collapse
 
5t3ph profile image
Stephanie Eckles โ€ข

It's really hard to beat the performance and flexibility of 11ty - unless you actually need React features.

I manage a quite complicated Gatsby site and I feel I ended up with a lot of overhead to get things to correctly "talk" to each other to compile correctly on the page, vs. 11ty where I can throw all sort of pieces and bits at a template and it just works.

The static HTML 11ty delivers is going to effortlessly result in speed and performance with the flexibility to source from any CMS or data source of any kind.

SEO in either case has a bit of manual work but can be templated.

The things that Gatsby offers you are a head start for things React doesn't come with like routing, and also offers GraphQL for interfacing with data sources.

The way 11ty handles data is so flexible it's why I fell in love with it. Plus the template language compiling of 11ty enables writing markdown next to HTML with a third templating language thrown in and you can on a whim compile out to anything you want, like json or XML which is like ๐Ÿคฏ

Collapse
 
girlscodemk profile image
Eva - includeJS.dev ๐ŸŽˆ โ€ข

Thank you so much for the elaborate answer, Stephanie!

Yes, I feel Gatsby is an overkill for what I need. Definitely don't need React or graphql and you are totally right about 11ty and data handling (like how you can have glob data and it just automatically gets picked up, or you can have an individual data file for each of your files ๐Ÿคฏ)

I've been following this: rphunt.github.io/eleventy-walkthro... and it's been a superb guide so far.

I'm using gatsby for my personal site and I remember that it was rather troublesome to get the blog tags going, with 11ty it was so easy (just looping through a collection!).

Seems Gatsby wins if you need to do a lot of customization done quickly - so you can go with plugins/themes - and I've read something about image handling being pretty basic in 11ty, but yeah, in terms of usability 11ty wins!

Super looking forward to discussing this with you live on Twitch! ๐Ÿ’ช

Collapse
 
rattanakchea profile image
Rattanak Chea โ€ข

Will give it a try. Thanks for sharing.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay