#65: What Are Static Site Generators All About w/ Jared White

plate. That would be a mean feet here, but now I gotta can Actually I I almost never drink canned beer, but I saw this at a store. It was from a story Oregon called Buoy beer. It’s an idea, and it’s it’s actually one of my favorite I p A. C. It’s really good. So So I’m enjoying that today.

I’ll take it. Sure. You could even call me the evil mastermind

It’s both at the same time.

Yeah, well, it’s It’s four people who have familiarity or even just passing interest in Ruby is a language and are interested in using a static site generator that starts from the place of you know, you run it as a ruby program, right? But you know, all of all of the stuff it generates is, you know, all of the same stuff. Anything else generates HTML, CSS and JavaScript.

you know, this is such a good question and it’s actually like the most by far ribs. The most confusing thing that I think comes up time and time again. I think how I see it is, is that Acronym Jam? I have always seen it as essentially being backwards from the actual development process. So what I mean by that is starting with mark up. So you start with content that’s in either HTML format or marked down for Matt and Mark down. It’s become really popular with a lot of people starting with programmers, of course, but even folks that they’re really not not very technical at all. Eso starting with the M

of Jam and then going to the A of jam. And that’s where you you kind of go the next step of like, OK, I have a bunch of content, but but what do I do it? That content and how doe I do something dynamic with that content, So if somebody goes to a page, you know, maybe they get you know, the initial state of that content. That’s the static part of static side generator to get like a static page. But then something on that page needs to update. So, you know, think of e commerce, for example, like a product. Most of the things of the product won’t change on a very regular basis. Like the name of the product will stay the same. You know, at least for a while. You know, some of the descriptive text will stay the same, but something like a price or something like a discount. You know, there’s these other bits where you want, like, literally up to the second accuracy. You don’t want a price. It was like, Well, this was the price when we built the site five hours ago. We have a new price, but way don’t know how to update the price at the moment. And so it’s like the five hours old price you don’t want, like, stale data. So that’s where the a p I bit comes in. You have some kind of way of, you know, once the page loads in the browser, it will connect to an A p I and say, hey, get me the most up to date price and so it will take the static mark up that came from the Web server. Ah, and it will update that in real time. And then that’s that’s sort of the final piece. The J, the JavaScript. The Java script is how you right that that logic. So you have some kind of JavaScript framework. You know, it could be something very simple, like you could literally just write a little bit of vanilla Js. This is called frame, where framework lists JavaScript. You could say, you know, to just, you know, make a request to an A P I and say Get me the latest data. But it really starts with, you know, some kind of mark up some kind of static site

repository that that’s where you begin. And that’s that’s what so great now about tools like Get Hub and these, you know, and get, of course, and these ways that we have. If we don’t worry where you start with with a code base of some kind of repository, that’s like, you know, Okay, here’s here’s some basic content. Here’s templates. Here’s JavaScript files, CSS files. You know, maybe they’re in, you know, sort of smarter formats, like instead of CSS. Maybe it’s s CSS or SAS is it’s called, and then the build process turns that into regular CSS for the browser. There’s this idea now that you know when when you’re building a website project, you’re probably starting with a lot of source files and in some different formats. And then you have some kind of build process that, you know every time that process runs, it transforms the source files into the destination files and then those destination files. That’s the static site. Part of it that can get deployed anywhere could get deployed just two regular Web server like Apache or and Engine X, or could get deployed to ah Cdn Content delivery network. And that’s what’s you know, really heavily promoted by services like nettle. If I or reversal, you never have to worry about getting so this is going to date me. But back in the day, there was a term getting slash dotted.

maybe doubts like getting I don’t know, hacker news or something, but you know this idea like, Oh, you have, like, this little block. But all of a sudden, like, you know, Oprah mentioned something or what some crazy thing happens. You get like, a 1,000,000 visitors in a day. Like, you know, in the in the past, everything would completely crap out because you just have a WordPress blogging. A little server likes little shared hosting things somewhere, and it just it couldn’t handle it. But with a static site that’s on a cdn, you know, maybe not like the greatest experience in the world. If there’s some issue with the, you know, the FBI connections or whatever, but at least that initial static site that initial content, the article, the product, the marketing page, whatever it might be, at least that initial static site is always going to get to the person you know anywhere in the world that’s gonna be super fast, like like an order of magnitude faster in many cases than if you have a dynamic app server somewhere, you know, struggling to handle this influx of of customers. All of a sudden,

Yeah, there’s sort of the funny, Um, I don’t know what the term for this would be, but if you could envision a the opposite of ah, of a power curve, you know, instead of it like starting low, going high in the middle of coming down. It’s like the opposite. So, like in terms of jam stack stuff being cool, it’s like it’s incredibly cool for, like, you just want to get a side up quick. You want to use, um, developer tools that you’re familiar with, and it’s really easy to do. You can just, you know, like literally in a day could, like, spin up a new repository. You know, sticks. A markdown files in there. Tight yarn. Add tailwind or boma or some cool CSS framework. Get a design in there, usually in a matter of minutes or maybe 1/2 hour. You can just, you know, type a few commands in the terminal and get an entire site spun up. Ah, and then, you know, with something like nettle if I it’s literally just a matter of, you know, uh, up upload the site to get hub connecting hub to nettle. If I again these air steps to take mere minutes, um, and then you know net. If I will just automatically know any time there’s a commit an update on get Hub, and whenever that happens, it automatically rebuilds the site so it does the automatics static site generation, build process every time. And so, like boom, you could just go from, you know, I have an idea. I’ll create a new repository. I’ll use my sex site. Generator of choice, you know, at a few bits sticking some content. Put it up on Get Hub, Use Nell. If I and Boom, you’re on the Web with a site and you don’t have to worry about databases and how to deploy this to that and had a, you know, configure a bunch of things. It’s all sort of this list really easy automatic thing, so that that’s kind of like the first part of the curve here, where it’s like you can get stuff up really fast and and in a really kind of fun way. It’s a great, uh D X developer experience, so that’s like it’s like you x for the developers among us. Great dx cool.

Yeah, so that’s the other. That’s like the other side of the curve here where you have, you know, these sites that you know certainly get updated pretty regularly, but maybe only, you know, once an hour or, you know, even once every 15 minutes. But it’s largely like, Hey, here’s a bunch of information and that information is just, you know, it’s what it is when you go look at it. And so you know the’s huge sites that are getting just massive traffic perhaps, you know, distributed across a large territory or even the whole world. But there’s this kind of middle area where it’s more like, you know, I have this, like, spa kind of small business thing that’s like local Andi. People need to be able log in to do some stuff, and there’s like a database. And there’s a custom back in Teoh manage, you know, bunch of folks logging in to update something that, like there’s this whole sort of like very dynamic kind of business software, like all these other use cases, right where, you know, trying to fit that whole side of, you know, Web, Web app and website usage into the jam stack. Uh, it’s it’s just not a good fit, at least not with the current state of things.

I’ve worked with a few times, and it’s pretty cool, cause because you’re static site could actually generate, like, basically a separate file that’s in Jason format that just has like, Hey, here’s a bunch of structured data, you know, for everything in my sights. It’s just this big lot of data. Ah, and so under the hood, like when your user goes to your site, it could just eat out behind the scenes. Say, Hey, get me this big lot of Jason and then and then lunar will go through that and generate the search index in the browser. So by the time you get to the search field, start typing and stuff. It could just instantly start, you know, offering suggestions and, you know, links to things cool,

thinking that in those sites in those sorts of cases, you know, especially with really large data sets. You know, the pure jam stack sort of approach usually doesn’t work, but there are ways of where an external search engine will, you know, basically do the same thing that Google, doesn’t it? It will. It will just crawl your static site, index everything and, you know, do that on a somewhat regular basis. So when you do go to search, um, you know, you’re talking to this external service, which is dynamic, but that service has indexed all of the, you know, static content within the, you know, whatever the last few hours or something, it has indexed things on that can that can work pretty well sometimes.

yeah, and these and these sort of places like thes thes, different areas where things get plugged in from other services in the past, that often would be really Jaenke or would be like, Oh, there’s this weird I frame in the middle of the pain, you know, somewhere somehow, some other thing. It looks completely different. But you know, there’s so many techniques now to create pretty seamless blends from the user perspective, so they don’t really feel like they’re kind of going from service to service. And one other thing I would like to point out to you real quick, just as something that I think deserves mention. Talking about the jam stack is, you know, it’s not just interesting from a performance standpoint, but it’s also really interesting from a security standpoint, and that’s actually one of the main reasons I got into it a few years ago.

Originally, when I got into to Jekyll, I took a look at it. It kind of dawned on me like Wait a minute. If I If I build a site and, you know, use something like Jekyll, the static site generator, you know, once, once I hand that that that repository and that published site to the client like, you know, if they don’t change anything and if I don’t change anything, it will stay the same pretty much forever. Like That’s a snapshot in time and it won’t change. It can’t be hacked. It can’t break. There’s nothingto update. It’s just it’s just that snapshot in time. So you know it’s there’s really no maintenance to have to worry about their, which is super awesome.

I’ll try to break this down as quickly as I can because, you know, we could get into the weeds really quickly, but, you know, as you mentioned earlier There’s a bunch of stack side generators, but a few kind of stand out in broader awareness. Thes days, something like Gatsby. Ah, it’s It’s written in JavaScript, right? So the language you need to have installed on your computer in order to run a Gatsby site on your computer is is essentially node. He need to have knowed in order to run that job script application. In that sense, it’s It’s just the same as something like Jekyll or Bridgetown. Which air? Ruby. You know, all you need is is, in this case, the ruby language. So you know you have Ruby installed. Ah, and run it that way. There’s another stack site generator Hugo, which is written in the go language on Hugo. Got popular Hugo. Yeah, there’s a joke in there somewhere. I’m sure. Um,

Hugo got popular a while back because goes extremely fast language. So, you know, if you have a site with, like, if you’re Blawg is for whatever reason, has, like, 100,000 posts and you’re using something like Jekyll and it’s taking you a minute or two. Every time you make a little change on you, switch to Hugo and it happens, maybe in just a few seconds. You know, that’s kind of a cool thing. Point being, you know, there’s a bunch of different programming languages, and there’s a bunch of different generators that I’ll use those languages where it gets a little confusing is some not all, but some of the JavaScript stack side generators do this kind of interesting thing where the tool that you used to, you know, to actually generate the site, you know, the way you write your templates in the way that you kind of defined the relationships between the data and the templates you’re actually using, Ah, front and framework like react or view on the back end, and it’s I know it’s it. If you’re not used to this, it’s kind of like what? But for the folks who are doing that, you know, it seems kind of second nature to them now, But you’re essentially using client side browser side technology on the back end. Teoh actually generate the static site on in some of these cases. You know, if you have, say, a Java script component like a react component, the react component could generate the static version of it as part of the stack build process. But then, on the client side, when you love the site, it goes through. It’s called a hydration step, so the component will hydrate

the static markup and convert it to something more dynamic. You know, as part of how you write things and react. I have a huge you know, if you could see me now, I’m like, you know, making like, blinking banner motions with my hand like a danger danger Alert alert. Because what what happens often with these things is, first of all, it can get really complicated really fast because you’re you’re trying to use technology that’s running two different places at the you know, you’re using the same technology for two complete different things, using the same technology to generate HTML through a build process and to do dynamic things in a browser and the you know where the lines blur and how those things interact. I I’m finding at least with the same or junior developers that I talked to you. Nobody understands how it works, like they just flat out don’t understand how it, for example, I got a question about Bridgetown like somebody saying like I’m already using stuff like Gatsby and I’m writing React Components. So why would I want to generate stuff on the server with Bridgetown? And I was just like, Oh, no, because the thing is like by default with Gatsby like the point is that it is generating H E mail on the back end and you’re getting a static site. But because it’s using this client side technology, everyone’s getting super confused. So you know, it’s one of these situations where,

you know there’s a lot of cool tools out there now, but some of them are like very, very sharp knives, and everyone’s kind of cutting themselves realizing like I’ve done something really weird here and I don’t understand what’s happening. Um,

like so many of these things, there’s

options. But Yeah. So Web. Yeah. So Webb Pak was the primary reason I got frustrated with Jackal cause you know, I have been using Jekyll for a few years. I love Ruby Emma proud Ruby ist. But the thing that was frustrating was Jack Jekyll was only concerned with just the ht male. Maybe a little bit of the CSS side of things, and that was it. So if you wanted to add more smarts on the job script side, if you want to add a client side framework, if you want to do fancy or things with your CSS is part of the build process. Jekyll just really didn’t do anything for you, so you’d have to go find something like Web Pack and just figure it out. You’d have to come up with your own Web pack configuration. You have to get everything set up. Their Jekyll wouldn’t know anything about it. And then you have to figure out how to tell Jekyll like, Okay, here’s my javascript bundle. Here’s my CSS bundle. Here’s how you linked to it and it’s kind of wired all up together. Um, and that was one of the reasons why some people would go off to something like next dot Js or Gatsby or whatever, because they, you know, they want something to just kind of come with a friend and configuration out of the box. But when I ended up doing with Bridgetown, which ended up being a fork of Jekyll, So So it it kind of took took Jacko Nice. Yeah. So, uh, very cool. Yeah, it’s it started with the base of Jekyll, cause mad props to Jekyll’s. It’s a great product, but I loved it so much, I wanted to make it better.

So So it Bridgetown that, you know, the first thing I did was basically set up a default out the box Web pack configuration and, you know, just do a little bit of tooling on the ruby side. So it knows, you know, every time the site build, it knows like Okay, here’s here’s the job script bundle. Here’s the CSS bundle. We’re going to include this in the site and away you go. So you know so right now, like you can go to bridgetown RB dot com and, you know, read the gang started thing there and, you know, just following some simple instructions there. You know, if you create your first Bridgetown site, it already has Web packed, ready to go, you can add a CSS framework could start to add something like react if you need to. You might not even need to, but you can if you want to. You know, in theory and the not so distant future, you could have a pretty simple Bridgetown site where you know Ruby generates the static site. There’s also some ruby functions that you can call is an A p I dynamically. And it has the JavaScript front end to add. You know, more interactive things like charts and maps. And when you click buttons, something happens and all that kind of stuff. So it’s kind of this really interesting hybrid approach.

disabled JavaScript in normal usage. I’m not an animal,

Yeah, you end up typically with much smaller JavaScript and possibly even CSS bundles out of the gate cause you’re you know, you’re not starting from this place of like

everywhere, and I’m gonna pull in all these

and all these things, it’s going to be amazing. And we’re gonna have, you know, graphic you, well, things flying right and left and yeah,

very cool. Then you end up in a situation like, for example, I’ve actually been on a project for a while, using next dot Js and you know, there’s a lot of things I like about it, But I did turn off javascript recently and went to one of the pages we’ve worked on and kind of realized to my horror that half the page this was gone, it was just completely gone. That’s like, Wait a minute, What’s going on here? Some of the page looks all right, but some of the pages gone, and I realized it was because we’re using a react component that was a responsive design component. Whereas, you know, sort of dynamically removing or inserting content based on, you know, the size of the browser window. And the problem was the static version of the page that got generated. It didn’t know what the browser size was because it was generated through a server. It’s like, Oh, but there is no browser size when it’s generating this page for the first time because it’s not in a browser.

Well, I mean, you do need Ruby. You know, all you need to do is have that installed. We have a little bit of documentation and even know how to get that set up. But you need Ruby, and you do need node for the JavaScript sides taking his Web pack. But once you have those two things, then it’s kind of just a matter of typing. Bridgetown new my cool site in your terminal. And it just generates, you know, sort of a basic site template. Ah, and then, you know, just add a block post like type out a markdown file and stick it in a folder and you type in the command and poof, it builds and you see the block post. You’re like, Wow, it worked. That’s kind of

Yeah, so that that’s the sort of D fall approach. Now you can use a headless CMS like we’ve talked about. And, um, you know, their ways that aren’t too hard to do. You could just write a little plug in. And we’re working on documentation right now to make this, like, really clear how to do it. But, you know, basically with just a few lines of code, really, You know, instead of your block post, being in the Europe repository is a file alongside all the rest of the code. It could be in a headless CMS somewhere, and then you just use rest orographic u l a p I So in your bridgetown site, you would just write a little ruby plug in. That’s basically like you call this a p I, you know, query for some posts. Okay, I got the posts now. Just, you know, output that too, you know? Ah, file. And there’s a really easy way to do it. You’re not literally like having to figure out a write a text file. You’re just using some nice little commands to say, like, you know, OK, so out of the data that came through the a p I. Here’s the title. Here’s the categories. Here’s author. Here’s Here’s the main body of the content. Here’s the date, and then it’s as if that were an actual file in the repository as faras Bridgetown. That’s concerned. It doesn’t matter whether it’s an actual file or whether it’s something coming from a headless CMS. You know, in the build process, when it’s generating everything, it’s all the same Teoh at that part of the process. So that’s pretty cool. You can you can use either approach. I kind of like to have content and get as much as possible, at least for simpler sites, because you just get built inversion ing and you could roll back things really easily and and, you know, for end users, you know there are ways to give them a simple editor that looks vaguely like WordPress, where they can type in some stuff, but under the hood, it just saves a file to the repository. But you can use a full blown headless CMS with all the trimmings if you want to. The

that’s really cool. Yeah, that’s kind of Ah, that’s kind of a dream of mine, you know, ultimately, to see some kind of tool that’s more of a visual page builder. But it’s it’s ah, I don’t know. You call headless page Builder there, It’s, you know, your building, your building, your advanced layout for some really cool page. Um, and it stores it in some, you know, some structured format. But then, yeah, you could use any kind of stack said static site generator or, you know, whatever you want, T take that page structure however it’s to find, and then, you know, turn it into the final thing and use your own design system and all that cool stuff that that would be super awesome.

from, you know, from static site generator to from each one, depending on how it defines things through templates. Eso um you know, Jekyll and Bridgetown and a few others have used a template language called liquid. So, you know, whether you’re running an HTML template itself Aurier writing something and mark down you can you can augment it with with liquid tags and filters. So, you know, in WordPress lingo that you might call that short codes or something like that. Where in line in your text, You’re kind of saying like,

e r B?

Smarty was that of thing in Ph. Yes, Yes, yeah, yeah. The idea there being like instead of writing your template literally in PHP, which kind of was intemperate language to start out with. You write it and something a little simpler, a little nicer, a little safer, like smarty. But yeah, liquids sort of the the evolution of that. In more modern times, Shopify uses liquid. So if you set up a store on Shopify and you custom I templates there you’re you’re using liquid tags right there in their system. Um, but some other ones use ah, template language called None checks. It’s it’s kind of similar to liquid. Anyway. There’s there’s syphilis to do it, but I

Yeah, there’s this a lot of wasted too, but basically the ideas you know, you whether whether you’re sort of base level text content, is in html or mark down or something else. You then augment that with some extra template smarts, you know, looping through things, transforming a data value from one thing to another. Bridgetown conduce some pretty cool things with liquid, and we’re actually working on sort of an extra little speck at onto liquid called liquid components. And this is really what gets to your question. So the dream there is that you could write some liquid components which are is essentially, like, you know, think of your traditional site. Like, you know, maybe you’d have a component for a nab our Maybe even that would have a few components, like logo links a search bar, like maybe those air little components. And then, you know, you have some stuff on your page, like a sidebar component, the footer component.

And the nice thing about using something like liquid components for that is, um you know, it plays really well, Bridgetown. But in theory, you could take a liquid component and plug it into some other static site generator. And as long as you, you know, kind of generally have the same design system, like, you know, CSS and so forth working those liquid component templates will just work the same way. And it’s it’s, you know, it’s part of the build process is server based so, you know, it helps to generate the static site. But then on the client side, you could, you know, use something Teoh hydrate, using that term again to hydrate the component that needs to do something really advance. So, you know, you could maybe use something like, uh, like reactor view there. But you could also just use, like, an open, standard Web components approach, which I’m personally mostly interested in these days because it’s gotten so much better in browsers now in terms of support. So the idea being that you could just write a little Web component that is just, you know, some some specific JavaScript structured in a way that’s

completely cross browser Now, you know, at least with modern browsers on it could just, you know, basically loaded load in the HTML it’s provided through the stack site and just do things like, you know, make the button, do something when you click on it or, you know there’s this little spot here that’s, you know, blank out of the gate. But we want toe, you know, add a bunch of things in there like, you know, items of a to do list. The sky’s the limit, but but the idea is that you know, you have some components defined through the static site that air more concerned with, you know, the layout in the design and the base content on. Then you make it do cool stuff on the client side with the’s hydrated web components on. So this hybrid architecture is this, you know, somewhat of, ah, of a bleeding edge thing. But it’s not just me trying to do it. So many people are trying to do this and to crack this nut, you know, it’s like the Holy Grail gets. He could say somebody somewhere will hopefully kind of help help pave the way a little bit in terms of widespread adoption.

Yes. So, first of all, the Bridgetown Project is just at bridgetownrb.com RB for Ruby on at bridgetown RB dot com It talks a little bit about the project right there on the front page. You can find out more. There’s also a page about the jam stack in particular that’s a little more generic, so that might be kind of educational. Interesting. You can find me on the Web just generally at