Looking for an easy entry point to create your first static site? Eleventy might be the right tool for that project. With a low barrier to entry and a lot of support out of the box, it aims to solve the problems of complexity in the environment that other tools struggle with. Stephanie Eckles joins us from 11ty.rocks to discuss how Eleventy aims to stand above the rest.
Followup Resources
- Alogolia search provider
- Eleventy Documentation: Getting Started
- Front Matter
- GitHub Actions for Netlify
- How to Use WordPress as a Headless CMS for Eleventy
- Nunjucks
- Questions to ask before choosing a static site generator
- Serverless Functions: Your Website’s New Best Friend
- Speedlify
Transcript
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Hey everybody! Thank you for joining The Drunken UX Podcast. This is episode number 89 we are going to be talking about static site generation specifically using the service, not service. That’s not even the right word. It’s the platform, the tool, the tool set Eleventy. I am your host, Michael Fienen.
and I’m your other other host, Aaron. How you doing? Michael?
I’m doing quite alright. It’s, it’s warm, it’s humid. And the one thing I am certain of above all else is that if you are enjoying the drunken UX podcast, be sure to check out designing for good. If you’re interested in applying for one of 3 $10,000 grants to help out a nonprofit organization with their digital strategy, I want to check that out. Go by drunken uX dot com slash design grants.
You should come to come take a look at us at facebook’s and twitter’s dot com slash junkanoo X and instead of gold dot com. So I struck a new X podcast and come chat with us drinking us dot com slash discord. D. I. S. C. O. R. D.
Compliments to the chef, I think that is the smoothest and like most straight away you’ve rattled all that off today.
I’ve only just started drinking now.
So
I’ve got that going for me, which is Nice.
We’ll see how I do at the end of the show. Speaking of drinking, I’ve got this evening keeping it simple, keeping it pure. I’d like to say Glenfiddich 12. It’s a very down the road, middle of the, middle of the line, middle of the road down the line uh space I’d very young scotch but it’s got a very fruity note to it. Um This has the tiniest bit of pete to it but not smokiness.
I don’t know why that is because I don’t think they smoke their malt but it’s there I’m telling you
they must have taken the peat out before they set it on fire.
Um Not how that works but they sat next to the peat blocks and walked away for a day. But how do you make a good martini? Just set the vermouth next to the glass and you’re done your
point your glass in the direction of
remove. Yeah. Aaron save me, what are you drinking?
I’ve got the shackleton again. Uh Were you the one who told me about the google maps thing with us?
Yeah. Yeah. Go down and tour the little hot down in Antarctica. Yeah, you
can actually see it. It’s so cool. It’s like, I don’t know, it’s, it’s a nice like smooth whiskey and has a cool google maps thing and it was like the first thing I grabbed them my way down at a busy
day. So this week we are being joined by Stephanie Eccles. She is a software engineer over at Microsoft who is on the Azure site experienced team. She is a front and focused advocate for developing accessible and semantic. Html She works on scalable modern CSS. She’s also the otter otter otter. I have not had nearly enough to drink it to be confusing. Human beings with otters dammit.
She is the author of modern CSS dot deV and Eleventy dot Rocks Ladies and welcome to the show, Miss Stephanie. Miss Stephanie Eccles.
Hello,
welcome. Yes,
So Stephanie is joining us to talk about Eleventy. She runs a website called Eleventy Rocks, which I feel like means she maybe knows a thing or two about static site generators.
The website trl is 11 T y dot r O c k s felt. Yeah, it reads cleanly. But if you’re hearing it, like, knowing that those are numbers matters. Right?
So, I want to start from the start with you Stephanie and talk about how, like, so how does Eleventy connect to what you do at Microsoft? Let’s let’s start painting a picture here a little bit.
Um the connection is that Eleventy is my enabler. So it runs my portfolio. That’s the connection. It runs modern CSS dot gov. And it runs about 20 other projects that I’ve dealt with it at this point. So, basically just the experience.
So, how did you come across? Like, where, where was the point in the sand when you were like, I want to get into static site generators and Eleventy is the one for me, Like, how was that decision made for you?
Great question. Um It wasn’t so much like seeking a static site generator. I actually didn’t know that term per se when I set out, well, I did know the term, sort of, I had been working with Gatsby for a couple of years, um and we can talk about that more, but I don’t I think there’s a stark difference between Gatsby and 11 in terms of what we mean by static site, so we can dig into that.
But um what I was really after was something that um initially something I could write mark down because I did like that aspect of Gatsby um to create my content is essentially looking for a more efficient workflow. Um and I didn’t know ruby for Jekyll, I didn’t know go for Hugo and just kind of on twitter, I had started to see more chatter about Eleventy essentially.
So actually live tweeted my first um time building with it, which was kind of a weird decision probably, but I was also just in general trying to get back into creating um I’ve had kind of a hiatus from mom life for about four years and I was just kind of generally trying to refine my feet, you know, and and figure out what I wanted to do. So it snowballed and yeah, it’s my enabler now, but more efficient workflow was what it boils down to. For the original reason
we talked about, we talked to Dustin Xiao from the Gatsby team back on episode 31 I think that was season two, right? And then um we discussed Bridgetown, which is kind of, I think it was a fork of Jekyll with Jared white, its creator in episode 65. And then episode 60 61. We talked about efficient emergency websites. I think we mentioned Eleventy on that episode.
Um,
I, I’ve used Jekyll like I used to work on my personal site and um, I’ve tried Bridgetown out a little bit and I’ve seen got to be, but got intimidated by all of the fancy javascript. That’s in it. I want to know about Eleventy. How can you sell me on it? Tell me
nick sparkle.
I’d love to um, well Eleventy Rod
speaking on the north by 11. no, I
am, although I’ve started saying I’m the self titled unofficial ambassador. So, um, Yeah, so 11th year, um, you know, initially actually, so the creator, his name, Zach Leatherman and initially his original thought was kind of something that was an alternative to Jekyll. So it is comparative in terms of the speed advantages um that are sometimes cited for Jekyll. Um I don’t have personal experience with Jekyll. Just make sure I mention that um speed with
like loading time for the end user or speed with compilation or generation a
compilation. Yeah, build time predominantly. Um but Eleventy right away. It’s huge. Differentiating feature is the amount of template in languages it supports out of the box. So there are 10 which html accounts. Um other ones would be I mentioned earlier, markdown also nunchucks, liquid actual javascript and handlebars. Um and a few others.
Um but even when we talk about, you know, implementing javascript as part of your build process or a template in language, um it is not javascript that ends up client side, it is just used truly for tumbling um as part of your build process. So for example on a really uh entry level with that, I use javascript date to output the current copyright year. Right?
So that doesn’t need to load client side, but it’s just simply assisting and getting that, you know, fresh information during build time. Um it does not come with very many opinions and you can just in fact you don’t need to use any of the template in languages, you can drop a index dot html into the root of your project and that’s all you need.
And in that case you could use it simply to, you know, as I mentioned, I was originally looking for is something to just make my build process faster. So in that case it comes with browser sink out of the box, so you get your live local server and the hot reload benefits of that without having to manage it separately.
But yeah, that’s, I mean, super high level, that’s what is offering for you. Um But yeah, I think the non opinionated to start but the ability to lay around complexity is personally what I love about it.
That’s really cool. I brought this throwback up several times. Uh this throw up back, that’s disgusting. Uh and a couple different discussions, specifically the static site generators.
Um when we’ve talked about like our history and stuff and I want to talk a little bit about just what a static site generator is because while they are kind of this new hotness from like a bleeding edge standpoint, I think they represent about 3 to 4% of web web sites at this point in total.
But the thing that I’ve brought up in the past is my history with a platform called Toronto, which is a CMS, that um, it’s a PERL based system that used the old C G I bin, but it was at its heart a static site generator. Through and through flat file, no database. And it literally pumped out html pages based on your use of includes, which is all modern Templeton languages are doing a lot of cases. You could use a little bit, it wasn’t javascript.
But they had some very basic like logical operators like if and while so you could like print out lists of things, so to speak. Um, I forget what the actual Temple Ng was in that, but I mean that was Over 20 years ago that we were doing this and this notion of like moving into like the server side Javascript world is really kind of an evolution in my opinion of like the explosion of node and, and these new languages.
Stephanie, you brought up, of course ruby go, huge amount of support getting behind the go community right now for its efficiency and speed, certainly. Um so a lot of enthusiasm has now gotten back into this, but I want to talk first and foremost about this phrase that people are going to run into. If you’re looking at static site generators, you’re going to run into this phrase called jam stack.
Um, so whereas lamp is Lennox Apache, my sequel in PHP Jam is javascript aPI s and Mark up is sort of over voting
of the letter is confusing to me.
It’s yeah, I
keep forgetting that it’s not Apache and
a is doing a lot of heavy lifting in that too because of how much a P I. S factor into this
javascript patching in my SQL.
But is it fair though? Because for instance, that doesn’t necessarily apply to something if you are looking at a Jekyll or a Hugo because they aren’t javascript is Eleventy, is that fair? You you would build a jam stack to run? Eleventy. Is that am I saying that correctly? Stephanie?
Good question. I think Eleventy actually sits pretty solidly in that term. Um I think what to your point, what can be confusing is you you don’t have to know javascript to the J You don’t have to know javascript to actually get going with Eleventy specifically. Um Yeah, you also again you don’t need to hold any a P. I. S.
But what’s happening behind the scenes is that it’s using like the build process of Eleventy, that’s what it’s offering for you is it’s using javascript and a node um to provide you all those conveniences that I mentioned with, the template in languages and everything.
That sounds kind of like how with Jekyll, you don’t technically have to know ruby to use it. Um but like ruby is definitely the workhorse behind it. Behind the compilation,
as long as you can go in and and run some commands, read some documentation, run some commands, you’re probably ok, you know, one thing and I’m gonna back up just a hair when you were talking about like the comparison between Gatsby and and Eleventy, I feel like and this is one of those, like tell me if I’m being fair in this comparison comparing Eleventy to Gatsby is a lot like comparing roll up to web pack, like web pack is super powerful.
Um It does everything it’s well supported. It’s, you know, it is sort of one of those industry leaders, but it’s so dense, it’s also super dense to get into, but then you get into a roll up, which is doing the same thing. Roll up is doing exactly the same work as web pack, but it handles, I feel like it handles like That sort of 80% of most cases.
It just does super easy and super elegantly and it’s not going to handle the 20% of fringe cases super, but it’s really geared at trying to simplify down and make it accessible to, you know, somebody who isn’t like a super dense technical person. Is that a fair assessment?
Yeah, absolutely. Um, I think that tracks really well. Um, so I mentioned, I did have a couple of years experience with Gatsby. I built a very dense site with it and the plug independency was something that tripped me up. I wasn’t very strong in javascript when I first started using it. And with Gatsby you do have to do javascript cause you have to know, react more specifically and to do anything very complicated.
Um in terms of bringing in content and figured out how to organize that content, you also had to know node, I know they’ve made some improvements. I think somebody told me they actually do have file system, page creation and um that’s one thing, I’m not 100% sure and they did not have it at the time, so I had to do quite a bit of gymnastics that’s completely stretched out my skill set um at that time to figure out what I had to do to make that site work.
So comparatively, you know, that would be one area I definitely point to and um also you end up requiring um that client side javascript to run. Um they’re I know like with versus something like next, which is also react that can actually output pure static. Um Again I’m not sure Gatsby has added that option yet. Um So it is interesting that it’s still called a static site generator. I mean Yes, it is. Right. It’s compiling your files, you get template.
Ng that would be the comparison versus Eleventy. But Eleventy. Um I would say the barrier to entry is way lower, especially if you are coming in from, you don’t have to have like this seniority status to start using it. You know, you don’t, as I mentioned, you don’t have to even know javascript. You can um If you’re just familiar with html, that’s that’s awesome.
And then as you realize that you need additional functionality, like maybe you start to get more complex content and you would like to add A CMS behind it or you would like to bring in some content from an A. P. I 11. He just makes that way easier. There’s nothing else to install. Um The only thing you have to learn in that case is how to do a fetch and javascript.
And if that’s the only thing you ever picked up, javascript for, that’s all you would need and you would be able to fetch content from A CMS and roll it into your Lebanese site and continue on your way. So in this way way, um reduced. Yeah, but you still get that robustness ultimately, at the other end
I have a little bit of experience with node and um it’s my understanding that the equivalent of you get out of the eye by typing colon Q bang is for note if things aren’t working our mrf node modules and then npm install.
Yes,
that’s the their version of Did you turn it off and back on again? Yes, it does work. I can dance to it.
Yeah. Where’s Gatsby? I was constantly, every time I was I was terrified to update Gatsby because it was constantly breaking on me because it of my plug in dependencies not messing with the core, it was constantly out of sync and you don’t have that problem with Eleventy, so another,
so let’s talk a little bit about sort of like the underpinnings of all of this stuff. And this is I’m speaking about sort of the idea of static site generation, kind of in general. Um at this point, every website starts with a basic construct and that his content. So if you don’t have content, you don’t have a wayside.
Well, it’s there’s there’s a very nice lady up in Minnesota who’s written a few books on this um that I think they take content very seriously these days. Uh What from from a standpoint of maintaining content?
Because if if I’m somebody who’s used to using WordPress, my idea of creating content is I go in and I edit a post type or if I’m in junior or something like that, and you have a constant type dotCMS or one of these, um I have this idea of editing content means I have to log in somewhere and I go type stuff in there and save it and it goes to the database and the database calls it out when the page is rendered, you’ve brought up, I heard the word markdown thrown around, how how is content managed for these kind of tools?
Yeah, so you can Um with 11 year, um if you would like to just manage everything you know, in, you know, copy and paste your html files, you could totally manage it that way as you start to leverage the temple eating features. Um, the first concept will run into there is the idea of layouts. So layout is a term for a special template That can wrap other contents. In other words, you would have a layout probably for like your HTML five boilerplate.
So all the head stuff, you know, maybe you have a consistent header, like navigation. Maybe you have a consistent footer and then using template ng, which you can create that layout. I usually use none jacks. I usually use actually a template in language because that way I can define where nunchucks. How do you spell that? Uh N U N J U C K S.
Okay. Yeah, that’s what I thought you were saying, but I wasn’t
true. Yes. Um, nunchucks and then liquid template in our kind of the priority class template in languages. Um In in 11 days. So if you encounter tutorials, those are the two you’re going to see and they have very similar syntax of how you define templates um articulating features. Um
and it’s not uh out of line to kind of compare this. If you are somebody who is familiar with, let’s just say with WordPress, that’s sort of the baseline you’re used to doing that same kind of thing in WordPress templates and using all of the template tags and helper functions and things like that that they use. This is no different from that, It’s just a different syntax, but it’s the same conceptual grade of thing.
Absolutely fair. And typically the most extensive thing that I do is either place variables or occasionally right for loops. Um You know, that’s that’s usually the extent of the features I need. Um And so you create your layout, there’s a special template variable called content. So like you throw that in the body of the of the layout, and then from there you can create markdown fouls or whatever other template in language you decide to use um and use Front Matter.
Um So that is defined at the very top of your file, there’s three dashes before and after the content and you can define essentially whatever variables you would like to use. So for example, maybe a title variable. So you would then be able to pull that title variable into your layout um like for the document title or you know, first headline on the page and then whatever you right outside of the front matter that would get populated into the default content variable in your layout,
front matter. Uh for anybody who is not aware of this, like the way I think about this and again this maybe not the best way to describe this, but the way I’ve always kind of thought about it is it’s almost like, yeah, Mammal type formatting that you put literally Amel is it literally Amel um
in in Jekyll? It is
like and you just drop it in there at the start of your markdown file to pass it like metadata basically.
Exactly. And so um you can like title for example, that’s that would be a custom one if you could have whatever you wanted, you could really, you know, for a more complex site, you could really have quite an extensive list up there. Um Eleventy comes with a few more features, so again as you start to branch out and if we compare it to something like WordPress, um 11 th does have the concept of tagging and uh with that tagging, if you tag your content so you take it post.
Um All content tagged posts now becomes a collection. And so you can that gives you flexibility to create, for example, archive pages where you use a for loop to output that list of post. So very you know, if you literally are coming from WordPress or if you want to use WordPress actually as your CMS still um you would be able to source from that um Since WordPress has an api now,
so you say I could still use wordpress to edit my site there though, there at the end. Um uh There’s there’s a word for this right? Headless CMS. Is that uh that’s like this idea of okay I’m using a content management system for my editing but it’s not necessarily doing the serving right? Is that that sort of how that works? So we get into a P. That’s where like there’s a P. S can come into play a little heavily is once you can access content.
If you if nobody’s looked at the WordPress, Jason A P I, for instance, we’ve I use WordPress is the back end for drunken you X right now and we’re doing our redesign and what you’re telling me is All of my system of records in wordpress right now, all my site data, all of my show notes, all of my links to MP three files. So you’re saying I could point Eleventy at WordPress, say here’s my P.
I in point, here’s how to crawl it and love it. You’ll go grab that content and render it out into my static site. For me
it can die, yep. It can you would right? That hopefully small bit of javascript to kind of connect those things. Probably a you know, in the word yeah, in the, you know, a series of fetch files essentially. Right for your whatever content you’re pulling in your main content if you’re doing the different archive pages, um and you could essentially transform that into the local version that gets saved for Eleventy.
And so in that way you can still produce and keep it 1-1, um you have the opportunity to modify permit links and all that good stuff based on incoming data and exactly define what that output should be. Yeah,
I mean, arguably that whole process while it may sound Onerous maybe two folks, a I’m going to just go out on a limb and guess that somebody has probably written the scaffolding to have eleventy work with wordpress, just gonna guess that probably exists. But realistically, all of that work that you just described is not really markedly different from just building a theme in WordPress to begin with.
And interacting with all of the wordpress, A. P. I. S and everything. It does. It’s just shifting the responsibility from PHP and a WordPress theme the javascript and Eleventy.
But really any CMS, any CMS that offers an A. P. I. Um and that could be even an rss feed. You could use an rss feed as an A. P. I. Which I was doing on a couple sites and since you have access to anything in node at build time and it I hit my head against the wall trying to build my own. And then remember that fact you can grab an rss package, have it help you do the transform and again everything turns into flat files.
You’re not you’re not putting that burden on the client side, So little fun things you kind of encounter that just make. Again, for me it’s about efficiency and if I have my content then use Eleventy to transform it thrust the way.
Mhm. So if you’re doing this all on your own, um you’ve got your content, you say? Okay, I’ve got some markdown files. I’ve written I I understand mark down, we need to create the framework for this right to do this. So that means having some something called a build process and build. Build process to build pipeline can take on many, many, many shapes.
And at that point the idea is that you have a series of tools that will go through and execute a bunch of commands for you. And at the end of all of those commands, you have something you need, whether that is compiled, CSS compiled javascript or in our case, static site, you need for different static site generators. You need a little bit of a different background. Right?
So there’s uh, there’s an article will have in the show notes over from ample dot com, that has a spreadsheet that you can look at. That helps you kind of decide like what kind of static site generator is good for you. Are you a drive a script person then you’re probably looking at something that can interface with node, which means Eleventy, which means Gatsby,
If you’re looking at ruby, you then you’re probably looking at Jekyll, you’re looking at Bridgetown, you’re looking at go, you’re looking at something like Hugo. Like you have your, your options, you don’t want to pick something that is out of line with your skill set to start with.
But from there, what other I mean, there there are other ways right of doing this um like that, that tool I’d mentioned, Speedlify, I one of the big like selling points of it is it interfaces directly with Metlife identify as a host for lack of a better term. It there just a host they but they are designed for things like static sites and to run build tasks for you and to take that.
So that build, process that thing that you have that you maybe are using like with web pack to make your CSS and things like that, you can use that to do anything that you can pipeline javascript into. Uh but one of the cool things and I don’t know do you, are you doing any of this Stephanie with like the modern CSS website or any of these? Like using get directly because some folks I know are doing that right. How how does that work? Exactly. Not exactly vaguely.
Yeah, definitely. So if your host supports uh your cue term here is continuous integration. If your host supports you
Yes,
ci Ci cd. So considerate integration and the compliment or the other important part of it is continuous deployment. So uh for nettle, if I would be one of the hosts that supports this and what you can do um is directly hook up the get hub repository that you have your 11 year, whatever other type of site that has a build process attached to it and actually doesn’t require a build process for nullify. Um but it definitely supports it and is optimized for it.
Um So you pointed out your repo you provide them, you know, just fill out the one form field to say what the build process runs on um and what the output directory is. So what should you know once it’s built out, what should actually appear to has the site and from there whenever you make a commit to get hub. So you update your site files.
The continuous integration part is that it will pick up those changes and immediately and then the continuous deploy is it will immediately deploy a site.
Okay. I have a droplet with digital ocean and the the approach that I’ve used, I installed node, I’ve got my speed defiance and set up and I’m just going to use Cron up. And the because the package itself already has the build script implemented in it. Um you just npm run build production and it out, puts everything into a folder underscore site and that’s your literal website.
So in Apache, I’ve just said, well this site’s root is underscore site so every time it gets rebuilt it’s just there. And then I’m just gonna use a Cron job to say, go run this once a day Every 24 hours, just go run this on a schedule. And then every day I get my, my, my site statistics fresh and clean. I wanna finish this section on hosting a little bit. Right?
Because Net Life I obviously is an option that fly has a free tier. It’s a pretty generous free tier. I think for most folks, what when you are and this is kind of the softball question, Right? Because if you’re building static sites, what are the considerations for hosting?
Yeah. So it depends if you want the build process to happen on your host, right. If you would like to pre build it, you could host it on get home pages or other very more more basic hosting where you just essentially upload the final production ready files. So that opens up quite a few options. Um it’s just if you want the build process then you may have to seek that out specifically. So that would be one.
Um I’ll give a plug that as you’re just released. Their static site um compliment as well, static web apps. Um and that offers similar process where you pointed out your GIT hub, give it a build um tool and there is also a free tier available for that. So seeking out essentially I well I guess it was on that. That’s your first question. Do you want to build to happen on the host or do you want to just go ahead and pre compile everything? Mm
The beauty, the beauty of it, the beautiful thing about it, right is that for once you have it, even if you build it locally on your own machine, one thing, I don’t do this to make a static site but I do it for some other stuff and it could be used for a static site. I have a completely local instance of WordPress. I I run for security reasons. It’s on my local machine using local um and I use that, I spin it up when I need to work with it.
I could do that for instance let’s say drunken U. X. I want to edit my podcast site, I could have that be a local instance. I spin up only to use it and build it and push it out when it’s built and then I don’t have to think about it in between episodes with those static files. You can you can host that on a shoebox practically that like that’s what to go back. Aaron you were talking about this right? You brought the emergency website issue and accepted.
Yeah, well, hey, you can, you can literally build a raspberry pi into an just gonna say, an Altoids box and that will run a website. So like static sites need it satisfies again minus Stephanie, what you’re pointing, like if you’re not building on it, if you’re just hosting it, they need so little resources.
Um and that’s one of the huge selling points at that point, is it reduces the overhead by literal orders of magnitude at that point, not needing my sequel, not needing PHP. I’m not needing note if you’re not building on the machine. So something something to consider that you can really host almost anywhere depending on your circumstances.
I mean I think an important consideration that often comes up associated to jam stack and definitely impacts your hosting considerations is once you start to grow complexity beyond um truly truly static. Uh The other term you’ll encounter is server list functions. So being able to do some
Serverless function
that to server list server with. Okay,
I thought you meant like a party at Salvador dali’s
house.
Yeah, yeah, just everything drips it’s fine. Um um Yeah, so that would be another consideration when looking at hosting. So what that offers you for a low key example, that is like was one of my entry points into needing that functionality was having being able to use private keys and run a function to grab my form submissions and push those to my newsletter service so that people can subscribe to my newsletter.
And that would be since you don’t have a database. So like wordpress, of course, you mean I used gravity forms, for example, didn’t have to worry about forms, it completely offloaded that responsibility. Um But if you do want forms you want to bring in some of that interactivity. That’s another area that you would want to look at to compare. Um where you would want to host.
Um You could get away with doing all of it client side javascript, you’re just losing maybe a little extra security where a server list functions on your host, you would have access to things like environment variables, which helps keep that information like aPI keys private for services that you’re
reaching out to. Uh lambda. AWS. Lambda for folks that are if you may be dug into that or looked into it all or heard it. Um That’s a service. Serverless architecture. It’s just designed to run little chunks of code for you here and there. We we use that for some tools that we’ve built at work in combination with API gateway at AWS.
So we literally build our own a piece that access our own server list functions um to service our own tools in that case. So we don’t have an ec two instance out there sitting idle, Let’s say 60% of the time. It just runs these little tasks that take, you know, 70 milliseconds, 90 milliseconds for him to execute on demand. And we just pay for that at that point.
So I’ll throw a link uh into the show notes about sort of this function because that is that that can get into some weeds um really quickly but I do think it’s a good conversation and a very interesting like the nexus of all of these different kind of tools, so to speak,
it kind of bridges that question of like can I get away with purely static? Yes, here’s how you may be, still get some of your functionality back that you might miss from having database and everything off.
Believe me, I still have questions. We’re gonna we’re gonna hit some hard, some hard things. Mhm. Okay, so here’s the meat and potatoes. We want to make a blog plain old, let’s say plain jane kind of thing. I’m not going to throw any weird curveballs here, so to speak. We’re gonna make a blog in eleventy. Uh and we are thinking about how step one I probably need to set up, let’s say a local environment.
That’s that’s done, handle hand waved done. Mhm. I have installed node and I’ve done an NPM install Eleventy. So I’ve I’ve got those based things. My package dot Jason file has Eleventy installed. Um And now I’m staring at a directory and I’ve done that in PM and it my my directory is now initialized all that now. What what is the next thing I should be thinking about doing?
Yeah. So the first thing is to think about how you would like your directories to function because again, that’s up to you. If you would like to host all of your files just at the rip, you totally can. Our recommendation would be that you do add an Eleventy Config which that’s about. Eleventy spelled out um dot Js. And in there, the first thing you can define is customizing your input and output directory.
So for example, that would allow you to start placing files in a source directory if that’s your preference. So that would be my first step. Just make sure I don’t have to remove things later. I love
that advice. That’s exactly what we’re gonna do. We’ve made an Eleventy dot Js file, we’ve said, you know what? We’re going to have a source file for our our source stuff and we’re going to have a site directory for our out and that site directories, what will actually serve from?
Yeah, So at this point, um you could create an index file in that source with Markdown, with H T M O. Whatever you’re comfortable with. So, um and the beauty of that too is if you head down the path of markdown and you find that you want to do something more complex, you can absolutely change that file extension somewhere down the road and make that choice to be more so just to say you’re not locked in
and some of these things, right? You can mix and match a little bit like none, you brought up none Jack’s earlier. None. Jack’s actually works in conjunction with Mark down. So you could install, I assume you would install a lot. And let’s say that’s what I wanna do, I’m like I’m thinking about what I need to be able to make an archive page, so I want to be able to do a loop of things, but I need some amount of logic.
I’m gonna use nunchucks, there’s just a plug in I would assume for Eleventy that I would install for that. No,
it is already ready to go. You already been with even better, yep. Absolutely. So I kind of walked through the layout idea earlier, so you’d want to create kind of your think about what those layouts are. So um a base file that has kind of your boilerplate again, just you know, you’re not having to repeat the true like html boilerplate stuff.
Um But then you can start creating a few more layouts, like layout specific to your home page, um One for your post individuals, one for your post archive. Um So again we keep talking about WordPress. This probably sounds pretty familiar, right? But you’re inventing these layouts in this case, you can name them whatever you want.
And the one unique thing to know about that is when I think I did not mention earlier is layouts um need to be So there’s only a few directories that Eleventy will look for. Layouts in particular. Need to be in a directory called underscore includes and this includes file is you can think of as um excuse me, Directory, it will hold your layouts. You can also, as you grow in complexity add um a familiar term might be partials.
So like other short bits of repeatable content that you want to use within template files. So you might create a separate partial just for your header and one for your footer.
If folks are used toward press. Sorry, my backgrounds WordPress. So a lot of my reference point goes back to their if you if you use a lot of like get template parts. So those are partials. Even if you don’t use that word, like that’s what that function is doing. You’re creating little bits of stuff that you re use a lot.
Exactly, Exactly. Um and so um there’s also again, the default is that Eleventy is going to run off of um, file system page creation. So if we go to start creating our post and we create a post actual directory within our source directory, anything we place in there is going to be pretended with that post off of our so just something to be aware of. Um we can certainly change that. But let’s just run with that being what we want that to be for now.
And and we mentioned front matter earlier and the idea of adding tags. So um if you wanted to be able to query with your tumbling language to create a for loop of those things, um just placing them in the directory doesn’t automatically like create them as a questionable collection. But if we add tags to them that are all post now, you have created a official collection and you can access that within any layout.
You can access that within any other template file. And um Important note there. Eleventy considers any file that you’ve created content with as a template file which can be a little bit confusing. But it’s just because everything including each email is considered a template language. Right? So that makes everything in and of itself a template. Um That’s producing content.
There is some um shortcuts that you can take to apply Front Matter and that’s something I would recommend early on when you are setting out to create something like a blog where you definitely do want to from the get go assign certain attributes or variables across. Or you mentioned the term metadata, whichever term we’d like to use here. But across all those things, like we want to take everything as opposed.
So in that case, within our post directory, we would create what’s called a data directory file and it needs to be named the same as the directory. So we’d create posts dot Jason and in here just to get us started, um It might be the only thing you ever adhere, but we could actually add use that to define the tags um variable and define our post. And that way it’s applied automatically to everything else in that directory.
So you don’t have to repeat that across um all of your posts in there. So at this point you’ve already got the file system creation working for use it already out putting individual posts. Um We haven’t yet tied it toward layout. So the other thing you can use your data directory file is to actually tie it to that layout that you may have created specific for um individual posts. We’ll pretend it’s just called post and whatever tempting language.
Um And so in our data director file, that Jason file, we can also define layout and you point that to the file name. And Since it is expected to be, that includes folder 11 already ties all those bits of information together. And so then when it goes to build that page, it’s going to pick up that layout. So it’s all really nicely tied together. Um and you can just from there just create your posts and just right away
that that consistent nomenclature then is very important to the overall structure of your your file system because it’s a very let’s let’s use this phrase and this is maybe not entirely fair of me, but garbage in garbage out a little bit. It’s looking for folders, it’s looking for things, name, certain things. It’s looking for config files that match those names.
And so just making sure that you are sort of front loading that thought process a little bit is what will pay off then on that build coming out the tail end.
And one of the things that’s important to keep in mind is um just because I mentioned this from past trauma of other systems is that 11, he’s going to rebuild this extremely fast. So if you are. So by the way, we could have started our eleventy build process even before we created the index file, it’s going to pick up immediately as you create new files, it’s going to instantly build those.
So at this point if we’ve got an index and two posts under, you know, milliseconds to be building this and since it comes with browser sync, you know, we are also immediately able to double check that in the browser. Um one probably tripping point is that this is not unique to 11 D. But for example if you create a post with one file name and you change your mind on your local build, it’s going to keep that old one.
It’s not going to blow away the one that you renamed and technically deleted. So just a little tip there that’s
generated. It’s not
yeah it’s gonna hold what it previously generated. But again, the beauty of this is you can wipe out your, you know, if you call it public recite whatever you call that output directory, you can delete it anytime even without starting in are stopping and restarting Eleventy and it will just continuously revealed. That’s that’s what it’s primary purposes.
So I want to ask, here’s where my my hard question comes in now. So obviously making a page that just shares information that doesn’t change is easy. Want search. Yeah, search in in my mind I have a database and I have, you know, server side stuff that happens to make that work. How how does a tool like Eleventy or any static site generator in general?
How should I be thinking about these things or um you had thrown out the right this idea of forms and Saros functions. If I want a form for a newsletter that emails folks when you know my latest episode goes out, but I need a form that submits somewhere. And in my head I’m like, that’s normally a wordpress plug in that just saves in my database now. I don’t have any of that. What what does that approach look like?
So, also the plug is first, it’s quicker answer. Yes, there are plug ins. They are not. They are going to be responsible for certain kinds of content transforms.
Um so 11 he has a concept of filters and also short codes, which kind of our from those template in languages, it’s leveraging and and then also that’s kind of growing people are still kind of figuring out what all to use that for, but it’s essentially just some kind of transform or functionality that has the benefit of being aware of how Eleventy works. Right. So they’re not going to be quite 1-1 with maybe what you’re used to of other things quite yet.
Um Right. It’s evolving. So something to keep an eye on I guess. Um As for like so the forms question is interesting because there’s definitely not going to be something out of the box. You’re always going to have you’re gonna have to rely on your host or you’re going to have to wire up some third party stuff um to submit to a database somewhere.
Um So for example, nullify offers a forms feature. Um So that’s the quick hack around that. So looking at your hosting otherwise, yeah, you’ll have to kind of wire it up. Um Let’s
say I’m going to use male chimps, so I should probably use like the stuff that mail chimp gives me to make sure that it’s submitting directly to them rather than something local. That I would maintain.
Exactly, Absolutely. You certainly could use whatever in bed type of things because again, at the end of day it’s a html page. So yes, those things would still work definitely an option. Um You mentioned forms, you mentioned one other thing I’m trying to remember
search like something searches. Local search isn’t storing anything, but it does have a certain dynamic quality to it, right? Like the idea behind searches that it crawls data and identifies what I’m asking for. But normally people would even in WordPress, WordPress is searches terrible by the way, if anybody’s ever questioning that. But it’s doing basically just a fuzzy match against any kind of database wildcard, basically
um searches something I haven’t I have research but haven’t quite implemented. But I can tell you the theory of what you would kind of go through because it would depend on a very unique feature of Eleventy, which is you can use Eleventy um, template e say I’m creating a new index file. I can live through using the index.
You know, say I’m looking through my posts but what I can use is the permanent function and I don’t have to output it into an email file. I can output a Jason file so I can use that to customize the data source that would ultimately be required for search functionality. So, you know, you could either go through the exercise of, you know, building that and shipping it for client side.
Javascript search if you’re doing like an instant search. Um You could also this would definitely be a place to potentially bring in serverless functions where you’re doing kind of a fetch out to your Jason foul to help kind of offload that a little bit. Um Probably depends on how complex your data structure is. Um I know a solution I have seen folks talk about um to not have to roll their own kind of client side behavior is like Algo leah would be one third party tool that you could bring in.
There’s always google custom search engine. Yeah. Get away with it.
Yeah, I think that’s actually used on the Eleventy docks in fact but yeah, if you, you know if you are looking for, if you have a smaller site or you’re looking for that instant behavior um I think it’s useful to know that you can output different file formats that’s also used, you’ll see that used in starters to output um like an xML file to be used for your rss feed which is super handy um and also like site maps
so um I’ve used it to output uh directory information within a read me type of thing. So that opens up a few extra doors that you might not have considered. Um, and it would be less easy and some of the other available generators.
Yeah. All right. I think I have melted people’s brains enough with my roundabout questions. Stephanie, I think you have fixed to their brains with all of the experience that you bring to the table for all of these things that I don’t know anything about. Aaron Hi, uh, I’m just going to tell you that I’ll be right back after these messages. This episode of the drunken UX podcast is brought to you by a queen and vitamin teas.
Designing for good. Designing for Good is an annual Grant Award program aimed at empowering designers, developers and marketers to aid local nonprofit organizations in advancing their digital strategy designing for good. Is accepting applications for 3 $10,000 grants to assist organizations in areas of diversity and inclusion, environmental action and lifelong learning.
Applying for a designing for good grant is as simple as going to the website, building out a brief form and submitting a 92nd video describing your plan for helping an organization for more information and to submit your grant application visit drunken uX dot com slash design grants. That’s drunken UX dot com slash design grants Stephanie.
I want to thank you for taking your time, your evening to sit down here with us and talk about static site generators and help us understand how we’re gonna make, not just our site better, but every site on the Internet better by making them faster and more performant and all of the things. Before we let you go, I want to give you the microphone, take it 345 12, Whatever minutes you need.
Let folks know what you got going. What’s exciting and what you want people to pay attention to.
Well, first of all, thank you so much for having me. This has been fun. Um, if you couldn’t gather from our conversation, I love too. No doubt about this. Um, so, um, yeah, uh, if you’re seeking out more information on Eleventy, um, I’d love for you to check out the materials I have available. So again, Eleventy dot Rocks, which is 11 T y dot Rocks. And you can find some articles there, including one on creating your first Basic Eleventy site.
So, um, I also have a link out to, I am an egghead instructor. And so I have a link out to a short 20 minute course that also covers building with eleventy and also ads in processing SAS talks about a blog connection and we’ll prepare you to source content from a Headless CMS. So all the stuff we talked about today, if you prefer that in video format, definitely check that out. But there’s a lot of different resources.
I have several starters as we talked about ranging and in features, um a few different plug ins and then some examples of stuff that we didn’t quite get to get into that are beyond static sites. So um that feature I mentioned that the end of being able to output content and not necessarily in html format. Um I’ve exploited that and had fun with that. So I’ve created things like an email generator and a web component generator.
Um so I’d love for you to check that out and I’d love to see what other creative stuff comes up. So um I am five T 3 pP on twitter, it’s the main place to get a hold of me for sure. I’m also 5 to 3 ph on GIT hub, so you can find all my 11 projects there and some other stuff too, um code pen as well. Um and my other thing that I spend a lot of time doing um is writing CSS tutorials on modern CSS dot dev.
The goal with that site is to help you upgrade your skills. So maybe you haven’t kind of paid attention to all the amazing things that CSS is added in the last year, let alone the last few years. Um I know earlier this week, folks were Starting to get pumped about the end of Internet explorer 11, so you’re ending having an excuse not to start using modern CSS. So what do I mean by that?
Things like custom properties, using grid in more places versus flex box when appropriate. That’s a whole other conversation I won’t get into. But you can find some of those answers on mars CSS dot Deb, learn more about those liaT methods, learn more about other practical ways that you can start bringing CSS into your modern CSS into your projects. So I’m hoping that you walk away from that project with tools in your toolbox.
Um I’m also doing a CSS workshop in partnership is smashing in july so there’s still a little bit of time left to sign up for that, including four scholarships for underrepresented folks in tech. So I’ll definitely provide the link um to check that out and a little bit long to say.
Um but yeah, that’s the main things I’m up to twitter is where I’m going to share most of my projects if you’re sitting more, um I’m sure I can provide the, my portfolio links that links out to everything and I feel like I miss, oh I also have a podcast, I guess that my last thing um are co hosted podcast, podcast. Yeah, that’s so weird podcast inception or something I don’t know.
Uh I co hosted podcast kind of, we talk a little bit technical stuff, but more kind of trying to explore the developer life side of things. So topics you’re interested in, topics that um, you know, are definitely super relevant to life as a developer. Um we’re starting to have guests. We just had Miriam Suzanne, um we’re not strictly CSS focused um but anything front and related.
Um and then we did some fun, fun episodes and like teams and things like that too, so that’s called word wrap. Word wrap, that dev we are Just, yeah, but we’re 11 episodes in so we’re very new to it. Um the first episode was way too long. I don’t know anything about that, but yeah, so don’t judge us by the first episode, but hopefully I can find something uh
folks, if you would like to connect with the drunken new X podcast, be sure to find us over on facebook or twitter slash drunken uX or instagram at slash drunken UX podcast. If you want to chat with us anytime, drop by our discord, it’s drunken ux dot com slash discord. Uh And tell us a R. E. What are you doing with static site generator? Is there something that you’re working on that you want to share?
Um I’d love to, you know, showcase any successes you’re having and who knows, maybe I will get really motivated to go out and finally say, you know what, maybe I will bolt Eleventy on the WordPress and see what I can make happen here for this redesign. I don’t know. I do stupid things all the time, but the one stupid thing I never do is recommend that you keep your persona is close and your users closer by.
I knew at that point. Bye.