Episode 004

This episode is basically Steph's love letter to Eleventy, and an ode to the 'net, lo-fi.

Check out the Episode 004 Notes

Transcript#

Claire:

Hi.

Steph:

Hey.

Claire:

I'm Claire.

Steph:

And I'm Steph.

Claire:

And this is Word Wrap.

Steph:

So today we're going to talk about one of my favorite things. I have started saying it's my second favorite thing after CSS, and that is Eleventy, which is a static site generator.

And you may be thinking - "Okay. Yeah, there's a ton of those - I use Hugo... I use Jekyll... like, my life is fulfilled with static"

But I'm here to tell you - and advocate - that Eleventy is something worthy of your time to check out

The reason I'm drawn to Eleventy is that I can mix templating languages. I can mix HTML and Markdown and Nunjucks or one of the other eight templating languages that I didn't already mentioned that Eleventy supports and the output is truly static. There is no client-side JavaScript dependencies at runtime. And so a selling point of Eleventy is its speed and ease of of achieving a hundred on Lighthouse scores.

But beyond that it comes with just enough tools to get you going with a development server including Browsersync. And after that it pretty much gets out of your way.

So personally I've had a lot of crazy ideas to do with Eleventy and I've been able to achieve them all. And I've been able to achieve them usually within a few hours, which is also extremely fulfilling.

Claire:

So what other static site generators have you used before Eleventy?

Steph:

So I've had an interesting path into build tools, and so I will say I don't have a ton to compare to. The other - not a static site generator I've used but build tool was Gulp. And Gulp worked for a while. It felt a little clunky. It - I wanted more organization in my build process. And I didn't like having to repeat the same things project to project. Even - you know, like, you know we tend to like make templates and, you know, you're always tweaking your process I think regardless of the tool you end up choosing.

So I decided to look into Eleventy. Some of the features [that] attracted me - particularly being able to write in Markdown.

I had used - I guess the other static site generator I used was Gatsby. It's hard for me to think about that as static because it's still spits out React and tons of JavaScript.

So anyway - so I enjoyed though that I was able to write Markdown in that context, but I was looking for something that didn't - didn't output that JavaScript. That was a differentiator for me. And that still like gave me the benefits of the live server. Which, you know, Browsersync is perfectly sufficient for that.

I also didn't want as many opinions as something like Gatsby gives you in terms of the file structure that you have to use. Or something that didn't mystify what was going on behind the scenes, like something that still allowed me to hook into what it was doing in the build process. But out of the box took care of the annoying bits like routing.

Claire:

Ya that makes sense.

Yeah, I recently switched to Eleventy for my portfolio site - which really isn't much but it's something that I can put my name on and say what I'm doing.

I really enjoy the fact that you don't have to stick to a particular structure.

You know, we built the Word Wrap site in Eleventy, and I actually used your starter for that which is really great.

But my website doesn't have that same structure and it doesn't matter to Eleventy. It doesn't really care about the structure that you give it. Just - you got to tell it where you want your things to go, like your images and your CSS and stuff. Other than that like it's pretty unopinionated which is really great.

And I think you and I both value things that aren't opinionated just because, you know, we work with things that are opinionated every day. So it's kind of a nice break and you can get all your JavaScript-y bits in the build process and not have to weigh down your users with it.

Steph:

Yeah, absolutely.

And I think the other part that attracted me was - well you and I both have a shared history of developing WordPress themes.

Claire:

Yay.

Steph:

And and in a way Eleventy kind of mimics that - and that sounds weird, bear with me. It mimics it in the sense that you have this way that you can template your content. You can tie it together with collections with even - it's even a tagging concept, but you don't have that database dependency. And that's, you know, pros and cons to that.

In the case of Eleventy for personal projects, like I said Markdown is sufficient. Or if I need to I can throw a json file at it for some data. Or, just as easily, because JavaScript is still enabled as part of the build process, you can source content from a headless CMS. You can even source it from WordPress if that's your preferred CMS.

So you still retain all those abilities to manage your content, but the actual output and management of the site is - it's just so much cleaner.

It's - you know, not everyone's going to agree with that, but we happen to be like, sort of very key keen on using our vanilla web fundamental languages as you've already heard from us in the first few episodes.

I think one thing that's also interesting to me is I actually just saw today that Google is really embracing it for some of their properties. So their developers site. I know they already had web.dev on it as well. So it's something where it can really scale, you know, that's not a problem for it at all.

And I know is some of the other static site generators, that's one criticism, is that after a certain amount of content they start to become pretty bogged down.

Claire:

Yeah, I think you hit something with WordPress, and like how you know with the WordPress structure with pages and stuff like that. You can, you know, with Nunjucks or Liquid or whatever you choose to use, you're able to, you know, capture like reusable bits and you know, basically componentize them without, you know, having the - the weirdness of components.

Steph:

Yeah, absolutely.

And I think that's a really good point like...

You can basically - because of the templating with Eleventy - you could basically mold the outcome to what matches your brain structure. I think like that's literally why I love it.

So like you can do like literal componentized way of building. Or you just straight, you know, dump everything into one singular HTML template. You know, it just obviously depends on your content structure as well.

You know, you can do all these things that maybe you're used to but maybe you're using a little bit over engineered tool for the job when what you want at the end of the day is the static outcome.

Claire:

I think that actually speaks to kind of why we're proponents of Eleventy is that for a lot of different things - let's say, you know, like my website. You know, it's just a static portfolio website that lists - I don't know - like my things from Dev. And you know, maybe like, you know, whatever it might be. I don't need WordPress for that. I don't need, you know, some bonkers Angular set up for that. I don't need any of that and I would argue that a lot of websites are in the same boat. They don't really need a lot of that stuff.

You know, it might be because you're familiar with one thing or another. Like you might be familiar with React but not necessarily like, you know feeling great about JavaScript and so you go with Gatsby. And that might not even be the best choice, but that's kind of the progression that you make.

And you know, the really nice thing about Eleventy is that it - like Steph says - gets out of your way. You know, it tells you a predefined like "here, put these things here maybe" and you know "define this, this, and this".

And the documentation is great on the site, too - and I don't think you can miss the button, it is pretty big. So I'm sure Zach will love me for pointing that out.

But yeah..

Steph:

You know what?

Claire:

What?

Steph:

I bet I could tell you how to get started with Eleventy in 30 seconds.

Claire:

Ooh, that sounds like a challenge.

Steph:

All right, assuming you have a blank project right - you're going to npm init and then you're going to npm install - and here's the only tricky bit because it's a scoped package.

So it's @ one one tee why slash eleventy (@11ty/eleventy) - spelled out - so you gotta make the right order there.

Then you're on your way. You can literally start building - you can, in your project folder root, you don't even need a config if you don't plan to change the input source and the output. You can just start dropping an HTML file - an index dot html - and go from there. You can build up from there.

You could make your entire site an HTML only site. You don't have to use any of the templating languages.

Typically - my pattern is I will change to the - the input to a src directory and the output to a public. That's just my personal preference. And then I will drop a HTML5 template file.

There's a few expected directories that you can use in the Eleventy file system. So one of those would be underscore includes (_includes) and that's where you would place your template files.

So I drop in an HTML5 template file and then beyond that I start coding Markdown files and those feed into that layout. Usually name it base, I usually use Nunjucks for that. And away you go - you just begin creating your content however you want.

So I think the only other thing that tripped me up early - and I see trip up a lot of other folx - is that one of the file types that is not yet recognized by Eleventy is your CSS files. So that would be one other reason that you would begin an Eleventy config is to - there's a command called addPassthroughCopy and you would pass through your generated CSS files.

Then other than that - that's how simple it is.

Just create an HTML file, and possibly use templating and away you go.

Claire:

I'll say that one of the things that I think threw me off for originally was that my Markdown files were file paths. So like instead of thinking like creating a folder and then creating an HTML file in that to make it like, / whatever, it's just whatever.md. And then that becomes the /whatever, so that was I think that was the first thing I got tripped up on. But you know after that like - you know after figuring out the pattern it was pretty easy to continue, so.

Steph:

Nice, yeah, that's a really good point about their routing that it just kind of happens for you based on your file structure - the file structure within your input directory. So if you don't change it, that's your project root, but otherwise it might be nested if you choose a custom input.

Claire:

So in the spirit of today's discussion, I kind of want to highlight something that is near and dear to my heart, especially as at work right now I'm working on a single page application - but that is the return to static.

I think that - you know, the web started with static web pages. You literally went to a .html file and that was your website.

I keep thinking of Space Jam because it's - everything is .html. It's beautiful.

But you know, there's - that doesn't mean that we can't take advantage of a lot of things that you know, we've learned over the last 20 years - 25 years - that really makes developing beautiful, such as asset pipelines and just transforming things intelligently between how we build it and how it is displayed on the web.

I love that once we get done with this episode all I have to do is create a new Markdown file, put in some of the stuff about the episode, and then push it to Netlify. And that's it. It is a simple as that.

So in summary - don't over engineer your projects, and just go with the flow.

Steph:

And if it seems strange that were gushing over being able to write an HTML file and have it displayed then you are probably as old or older than we are. Because yes, we understand that's not a new technology. But in today's world - it sort of feels like it.

And that's why tools like Eleventy are so refreshing because we enjoy that we're going back to that simplicity. But we still get those bonuses - those features like Claire mentioned, like the ability to plug it into a build pipeline if needed to still take advantage of the rich ecosystem that we've also created for the modern web.

So thanks for joining us again, and we would love to hear what you want us to discus! And so hit us up @wordwrapshow on Twitter.

We'd love to take your questions for future episodes, suggestions for things you'd like to discuss, and just generally connect with you over there.

Claire:

Yeah, and if you want to hear me rant about something by all means - I would love to hear your thoughts about rant quality material.

Steph:

So go forth, use Eleventy, and we'll see you next time!

Claire:

Also, HTML is a programming language. Bye!

Check out Steph's Eleventy resources on 11ty.Rocks to learn how to get started and review the growing collection of plugins, config snippets, and other tips.

Review the Episode 004 Notes