We first wrote an 11ty tutorial on this blog back in 2018.
At the time, there was a brewing hype about this JavaScript-powered static site generator, but it was still relatively unknown.
Things change, though. Rapidly. As web developers, we all know too well about that.
Today, Eleventy is one of the most beloved SSG in the Jamstack community. The old version of this post didn’t do it justice anymore.
So we invited our friend Raymond Camden, who already had personal experiences with 11ty, to refresh this piece.
Following is Raymond’s tutorial to build a functional 11ty blog. Here’s what he’ll cover:
- Installing 11ty
- Building a homepage
- Generating blog posts
- Dating posts
- Making the 11ty blog good-looking
- Adding page archives
- Sprinkling in some data
Alright, the mic is yours, Mr. Camden.
What is Eleventy (or 11ty)?
Put bluntly, 11ty is a simple static site generator written in JavaScript.
How does this little wonder work? Simply by transforming a directory of templates of varying types into HTML. Eleventy doesn't take the words "varying types" lightly—one of its main features is its templating system's flexibility. I’ll discuss this more in the tutorial below.
You can think of it as an alternative to something like Jekyll. Personally, I really like Jekyll, but one aspect I found troublesome was its use of Ruby.
I'm primarily a Windows user (although I'm normally using Ubuntu with WSL) and in the past, getting it up and running was problematic. The first few times I did it, I can remember it taking a few hours. It was always quite dreadful.
Eleventy is based on Node, a platform I'm much more comfortable with. It makes the configuration part way smoother.
Want to learn more about Jekyll? The Snipcart team crafted this tutorial for it.
I've been a proponent of the Jamstack for a few years now, going back before it was even a term and was just basically "static sites". In that time, I've gone through multiple favorite SSGs, but I've never fallen quite in love with another one as much as I have with Eleventy.
It's flexible, easy to use, and powerful. I'm totally ready to recommend it to both new and seasoned Jamstack developers.
11ty tutorial: cranking your Jamstack blog up to 11!
I'm going to give you a quick introduction to the product and walk you through creating a blog.
And not just any blog, mind you, but a Super Awesome Cat blog!
Ok, that's not the prettiest blog, but you can fix that later on.
Let's get started!
→ Read the full tutorial here
Top comments (0)