The more things change, the more they stay the same. Such is true as we dive deeper into dynamic frameworks like React or Angular, while simultaneously returning to tried and true methods of delivering performant content in the form of static HTML. In this episode, lead developer Jared White from the Bridgetown project stops in to help educate us about what static site generators are and how they can provide value to your toolchain.

Followup Resources

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.

Good evening, everybody. This is The Drunken UX Podcast. You are listening to number 65 assuming I haven’t rolled the dice and move the steps of 64 which is what my show notes said. Maybe let me 66 when you’re you know, the problem I’m having right now is that as I’m trying to get ahead of the game a little bit and be really prepared and do these shows in advance, I start to realize sometimes things move around. So anyway, Episode 65 we’re gonna be talking about static site generators and looking at a specific platform called Bridgetown this evening. We’ve got Jared White joining us here. In just a few moments, folks, I am your host, Michael Fienen.

I’m your other other host, Aaron Hill.

I am a little wet, very wet and very allergic saying, apparently, everything outside Right now,

we finally got rain here after, like, three days of roughly 90 F weather, which I mean, the last time it snowed was only two, maybe three weeks ago. Like it was after May 1st we had snow so, like, all over the place.

And on that note, if you enjoy the drunken UX podcast. Then you should go check out our sponsors over at New Cloud. You can visit them at new cloud dot com slash drunken you exits in you cloud dot com slash from u ex Im lose my my words already, though with scotch do interactive maps. Gurus say hello to him and see what they’ve got if you need an interactive map or an illustration or anything like that. Aaron, you Ben, you just got back from the gym. What do you drinking?

I did not get back from the gym. It is just very warm here.

Yeah, up there. I suppose air conditioners are not necessarily as much a priority as they are. Here

they are. But I don’t have one in this house, and I’m still kind of sussing out like airflow solution. Mojito season. I got I’m hearing, uh, well, I got fans on the order, but they just haven’t gotten there yet. Um, I’ve been downstairs. It is like a nice temperate, like, 72 degrees upstairs. I think it’s around eighties on that, and that’s cool for for this week. I’ve got I don’t know what to call this, but I made it by accident this morning. It’s got a little bit of Ah, Amaretto. A little bit of raw morning.

Good Lord. Son

started early. It was like 11. I think a still technically morning has amaretto and rum and triple sec and then iced tea. So I made some solar tea on the porch, and this is pretty tasty.

Um, I’m ah, I’m a Scotchy boy tonight. Ah, not drinking from my cask. I did, though. The cast is now has actual scotch in it that is actually aging here in another episode or two, I’ll break that out and see what that tastes like. But Bhavani 12 plain old double would

Oh, I’m Oh, my missus. I’m

in the Midlands tonight. I do? Yeah. I do enjoy the sort of Rosie nature I believe it’s sherry casks that they finish this in. Um, and it is always nice. This is, like the perfect. In fact, I like this so much. I have a second bottle up in my cupboard to replace this one when it’s empty. So

that’s my favorite one. So far too.

Yeah. Cheri Kaye. A second caskets. Sherry cask? Yes. At the double check. Eso? Yes, that’s what I’m having tonight. And so this week we have a very special guest with us. Jared White. Jared, I think you’ve gotta Maybe Is it a can? Is it a bottle? You’ve got something with the on your plate. Don’t wait up. Don’t drink from a plate drink from a glass some something that’s got like a a very tall I don’t know, save me

not drinking from a

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.

Everybody’s got a little bit of something for the show. That’s what I like to see. That’s team spirit.

Hey, looking spirit point the diamond, the have lantana on on me. Okay, so let’s let’s talk about this is the

real fast because obviously you heard 1/3 voice that was the voice of the illustrious Jared White. Jared comes to us from the Web consulting firm White Fusion. They focus on small businesses up in the Portland, Oregon area. He is also a very proud Ruby ISS, which I know is a somewhat underst underserved part of our development community. Sorry, Aaron, but you don’t count, huh? But Jared is also, uh is it fair for me to call you sort of the mastermind behind Bridgetown? Is that a fair assessment?

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

I like for you. Not to evil, only only slightly. So this is something that

came out of Ah, discussion. We had a few episodes back. So in episode 61 we talked about emergency websites. And while we were doing that, the idea came up that we mentioned. You know, if you needed a site to be really well supported, that you needed it to be really resilient to a lot of heavy traffic using a static site generator and pushing to a system like nettle, if I would help you do that because it’s much easier to serve static pages than dynamic ones. And so we’re using this episode, actually. Talk about what that means. We’ve we Of course, had Dustin Xiao Ah, who is a one of the dudes behind Gatsby who works with Gatsby Js gas P J s is a that extends generator and with Jared on with us to talk about Bridgetown will get kind of a good sort of deep understanding of some of this stuff. Maybe not super deep, but as much as we can do in an hour anyway. So, first and foremost and to throwback to another guest when Tatiana Mac was on with us, when when was that air? And how is

that was Episode 18? That was season one, got, was it? She was. I don’t know if she was our first guest, but she was one of the very first guests we had on the show.

We had her on to talk about universal design and accessibility, and

that’s when I change. When I changed my font size on my 16 pixels, us remember doing that during the show. She’s also

a big voice in the community for a a tool called eleventy. Uh huh. And we’ll have a link to an article that she wrote as well for that. But eleventy is another static site generator.

If you have any questions after this episode, which you probably will That article it will answer all of them. It is like like soup to nuts. Full full explanation about static site generators and what they are really already

doing is setting out what is going to end up being like an epic showdown between all of the Dev’s for different statics that generators all argue about which one is the best one

it 90 come in, one goes out. The Celebrity Deathmatch

model, I think, is how we should really decide all of our technology needs. Quite frankly,

that reminds me of that XK CD where it was like, You know, there’s there’s, there’s 10 standards I know I’ll make a standard that unifies, although now there’s a lot of those 11 standards way joke

about it. But it is very much like, you know, when you think about content management systems, right and you’re thinking about what to run your site on, you realize, Wow, there aren’t just a few CMS is or dozens of CMS is there are literally hundreds. Why do we have all of these systems trying to do the same job, but in different ways, and it’s always because people have different needs and different requirements, and different tools are better at certain things. And so static site generators are kind of evolving very similarly. And there are a ton of names that you may have heard thrown around. Or maybe you’ve used some of them. Whether that’s Jekyll, Gatsby eleventy que go next grid Cem and those are just a few I forgot 10 Bridgetown. Another one.

Yeah, the the first little was that I’ve heard of. And then I looked at static gen dot com, and I saw the list that I guess isn’t even exhaustive at this point holding crap and, like, there has to be at least 100 on there any more

static. Jen is it is a good side. If you need to go and you want to do some comparisons of stuff, they also have a lot of information like they, you know, everybody rates this. The systems there take that with a grain of salt. Obviously, older systems that have been around longer are clearly gonna have more ratings. Doesn’t mean they’re better system. So you can, uh, break down the sorting based on times fans as well. Which is nice. The home page. My God, there are so many dimples. Have you heard of dimples? Dimples is a thing, Elsa. There’s one. Let’s let’s find another one. I won’t find it. Oh, here’s my favorite. Found it Has clunk

have a

clunk like like your engine, right? You know, when your engine has a knock? Well, instead, this

has clung. All right, I we need one of those things like, is it a status or generator, or is it like, a poor way named Variable? That which is a

good round for discord at on? Uh, you don’t know, Jack.

It’s in a quantum state.

It’s both at the same time.

Also hurt idea. Um, so a few of these So

like Gatsby, for instance, Gatsby is one you hear? Maybe if you’re more in the WordPress community because there is sort of a lean towards this idea of Yes, WORDPRESS is designed to run your site, but you can use it as what we that this phrase we use called a headless CMS all a headless CMS is is a content management system that isn’t generating your pages. It’s a content management system. that’s Onley doing content management. So it’s it’s a database front end. Basically, at that point, Jekyll Jekyll’s a big one because Jekyll is tied very heavily to get hub. But you’re using get home pages.

Maybe right. That’s where you saw that before.

Those two are linked very heavily, and as a result, people are discovering, Hey, and we’ll talk about this a little bit more later. But, you know, you could theoretically run a whole website right through, get hub, using their own baked in build process that uses jackal. It’s an option. It’s also one reason why it’s one of the biggest slight generators out there right now, because, of course, it’s got that that sort of power behind it.

I think we use that for a project. When I was a Cornell, I forget what the site was, but we did A It was like a really simple small one, and he’s Jekyll to generated content for Yeah, I think I was the first time I heard of it. But

regardless of what system you decide to go with or use, these things all start to fall into what this word is, and there’s a conference named effort as well that you’ve baby heard thrown around called jam staff.

I know I have heard of that. What is like I’m assuming this is quick. Comparable to like a lamp lamp or ma’am. Yeah,

So lamp, let’s let’s go back first. Right? So a lamp stack

ramp is Lennix Apache mask. You’ll slash Maria right in PHP. It’s like what you might run WordPress on.

And the variations thereof are, you know, map Mac lamp windows. But the rest of it same. So right. You tell me, what do you what this jam sound like?

I’m guessing I’m gonna guess J is probably javascript. Yes, the A. I mean, it’s probably not Apache. It’s probably something else. And then the no idea. It’s probably not my SQL Maria db. It’s probably something else, but B j. I’m pretty confident job. So

yet Jay is absolutely JavaScript A is a p eyes, OK, and they produce m mark up.

Oh, it’s OK. It’s locally

putting html in the most literal sense.

I think I’ve done rails ups that were along these lines. Although we didn’t generate static, we don’t share a static HTML for them, But we did do, like JavaScript front and a P I and the similar.

There’s ah site. If you want to learn like a lot about what jam stacks are and how they function. And all of this, there’s a site that’s just called jam stack dot wtf, which

a great Toldo it is. It is, ah,

good way just to kind of get some real surface level type information about that system. Now, Jared, for the purposes of like it and maybe not. Well, maybe birds talents. Let’s let’s go ahead and pull this up into the conversation. Real fast is because Bridgetown is four ruby based sites, right?

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.

Is it fair for me, though it’s like in this case, So we said, like there’s a lamp, a lamp in a man does this differentiate between a jam stack and Iran stack that

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.

Don’t worry. We

want you to that one a long time ago where they’re already. Maybe now,

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,

the funny thing about it, we were talking a little bit before the show started about this, and I was sitting here thinking about this and Aaron. Remember when we talked about our first websites and how we built those how we went about him? And I was thinking about the tool I used to build? My first, like non hand coated sites, was a CMS called Toronto. Toronto still exists. You can still go use. It’s a pro based to some, uh, that you would drop in

the sea. I been,

and it would run from there. But I got to thinking about it. I’m like, man, we’ve were coming the whole circle on this because that tool in 1999 2000 that was a static site generator. It was a headless CMS that you could put in a little template information into, and it managed whatever structured content you wanted to add to it. And its job was to sit there and then publish out HTML files as a consequence. And so if you change something in your header or footer or something and saved it, it would then trickle out and regenerate everyone in your HTML pages, just like a normal static site generator would, and the end result is you have a website that has physical, normal HTML pages there to serve up instead of serving it from a CMS like WordPress. So every visit to your website is generating CPU load. It’s generating memory usage. Eight serving HTML pages. I mean, yes, it requires resource is But Jared, like you were saying, We’re talking orders of magnitude difference in terms of what you can do when a databases and involved in when all of this other overhead is not tied into it. That I just thought that was kind of funny that we’re coming back to that. People are looking at this idea and thinking, you know, if I want to build a fast, efficient site, maybe this is the way I should go about it. But I don’t think we can do that without talking about what it works well for, because I do think this is one of those things that it works. It’s cool, and it will do a lot of things, but I don’t necessarily think it’s right for everything.

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.

It works well, I think in cases where you know you’re putting information out there and then it doesn’t have to do anything else. You know, doesn’t have to live a life, so to speak. So blog’s I think are obvious candidates for that you informational sites or like event sites or things that just are, you know, out there Teoh to share something for a while, even to extent. Like if you wanted to think about a big site like, let’s say, NBC News, I think even though it’s not like that could get away with using a static site generator. Because when you really think about it, what’s dynamic on those sites? A lot of the times, it’s stuff like weather, which can be brought in over JavaScript in AP eyes advertising, which is all JavaScript. And hopefully you’re blocking it in in your pie hole or using Adblock or whatever. Sorry. And they say. But I got even a big site like that actually could run very statically when you strip away those little elements of what really are dynamic.

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.

Well, just to throw out like a good example of what just won’t work as a static site, Facebook, Facebook would just not function problem, right, because everything about it is meant to be dynamic and changing and adapting to what you’re doing. And so for them they have. Everything has to be done on the fly in real time to show you what you’re searching for. And the other thing is most that excite generators, working on the assumption of sort of brute forcing their way through like it orations of things. So let’s say you have a block with 100 posts and in that site, our archive pages. As a result, when you publish one post, it builds that page out. But it will also regenerate your archive pages because all of the order has to shift down by one. Imagine somebody Facebook trying to generate timelines for everybody. That way. It just doesn’t work. It doesn’t scale that way. You could have a fully static front end, but your shopping cart is going to be an app. It’s gonna be a Web app. It’s not gonna be a static generator with this job script and AP eyes, it just hit me exactly. Yeah, needs to do too much. It needs to be smart in ways that you again, right tool, right job, sort of thinking if your site is a blawg and all you need to search Well, you can add search. There are plenty of Tullio whether you’re using Google Custom Search or something like that are a tool like Amazon. You could do it all over a P I with Amazon Cloud Search or something like that. So it’s all tied back to JavaScript and AP eyes to generate markup so you can have a search page that’s a rapper, but it’s a container for that JavaScript and a P I interaction and that lets you still have a static page as a consequence of what you’re doing. Advertising advertising is one. You know, advertisers are always loaded over JavaScript. So even though your ads may change on your site, your code doesn’t have to, because the JavaScript determines what you are. What add should show up in your sidebar in your footer. You know, whatever whatever you’re looking at there for, search to and I forget to mention them. Lunar Js is one that there is an alternative to lunar as a post like solar. Are you familiar with solar Aaron or Jared

eso were like the search. Yeah, solar search engine, not engine, but like back end tool, patchy

Apache solar eso lunar is, like sort of an inverse of that inverse. That’s a bad choice of words, but I’ve

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,

because there are too many combinations of all the words in the English language like it’s you’re talking about, you know, quintillion ins of pages, toe make combination for each one of those out,

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, if if he search, if the targets are finite and you know what the targets are And you know what the basic better data would be of how people would get there. You should be able to pre calculate that

this is why I think when you’ve got a static site, you’ll see this in places where so far, let’s go back to the shopping cart idea. Jared, you had mentioned, you know, ah, product itself doesn’t necessarily change very much a product. It could be a static thing, but the cart is where you actually enter the act. And so when you click that add to cart button, you get sent to cart dot your site dot com, and it looks the same. It’s got the same mark up, but suddenly you’re at a different domain. The same could be true for things like Search where when you go to hit that search box, you may actually inhibit search dot your site dot com, and they’ve got their header and footer wrapped around whatever tool they’re using. But they’re using a tool specific to that job to take on the highly dynamic portion so that they can let the rest of their site be really light late. I think when when you think start thinking about sets that excite generation in that way, you’ll start to notice, like all of these times when people ship you off to other domains for those certain, you know. And we do that even when we aren’t doing static side generation, we do that all the time when we’re using other tools. So right,

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.

Yes, static static. HTML is incredibly secure. It’s it’s a secure is your server is basically yeah.

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.

So you are the the guy behind Bridgetown and Bridgetown is a static site generator, but it is a static site generator that works in Ruby as opposed to a more Let’s say, traditional Jan stacked like It’s not react. It’s not view. Um, Now I’m not a Ruby guy, so I’m gonna lean on errand. They hated my other window here to help me through this part of the conversation. But is that like, is that Is it a gem? Is it like how does it fit into the ruby architecture?

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,

so this is using client side stuff. I know that in the rails community, they recently moved over to kind of embracing Web packer for asset building like Are you do something like that? Or maybe with other world up? No, no, There was. There was. It was Web Packer than a different one, but like it’s verging on a Web packer now,

like so many of these things, there’s

a bunch of

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.

There was, ah, discussion I had on Twitter recently with some people about how someone was browsing the Web with, uh, I think it was no Js activated. There’s a lot of sites they went to where it was just a plain white page with like nothing at all, or it just a lot of the pages broke and the discussion was like whether or not we should still be building sites that degenerate gracefully. And I think it’s great that they that this is still happening cause I think it’s important. I’m not that, like he kind of need JavaScript enabled just to use most of the Internet anymore, which is tragic. But yeah, I never I never

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

right? Right. But But I think that, you know, like if you don’t have I think over Reliance on JavaScript just because it could be super buggy and capricious about things, there’s a 1,000,000 ways to

write bad JavaScript. I mean,

yeah, And sometimes, like if you have one component that’s provided by 1/3 party and then you have a different component Friday by different third party, it’s possible for them to collide and to be unaware of that, and the site should still work even without it. So I think it’s really cool that, um, that Bridgetown takes that approach.

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

I’m just gonna go crazy writing react components

everywhere, and I’m gonna pull in all these

things, add ons

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,

but it all seems

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.

How do you know? If someone want to start using Bridgetown, what do they need to start? What do they need to do it? How does someone get on board?

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

hung. So the so the user would be creating would be writing the content using a markdown like to to basically create the content.

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

thing I’m thinking about here toe to tie this back to another topic we hit on. Um, wouldn’t we had Brian Oland icon talking about hacks, CMS and the work he’s doing to create a Gutenberg like block editor? That is better than Gutenberg in terms of usability and accessibility and output, because something you think about when we get into, like, HTML content, you know it’s easy to think about. Well, Mark down is a great way to write documentation and things like that. But it doesn’t facilitate design very well at all, because Mark down is just a text formatting type of of ah markup well, mark down. But with something like hacks, you could build a system that gives you full capabilities to have control over layout and organization of your content and and orientation of your content in all of those things and have that spit out something like HTML blobs in any kind of system. Whether that’s something that’s written with job scripter Witten, written with Ruby or any of those and as a result still have very a very high level of control over the design and layout of these pages, even though you’re running them through a static side generator to output a site

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.

So if you’re starting all of your content basis with mark down, um, and you mentioned design system. What if you do a site redesign? How easy is it to like basically, Rick rebuild your whole site from those markdown files? It really varies

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,

Ruby has, um what is it called

e r B?

Um, know nothing of your B. There’s a different one, isn’t there? For I’m thinking of PHP. There was, ah, thing like short tags that you could do. OK, it was allowed to go. You know what? I think it might know,

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

used you things in nunchucks, Non jacks in mark down for a system called fractals. We do pattern library and system fractal that uses marked down for all of the stuff. But like we want to do things, for instance, like generate color swatches from a definition file. So we use that to generate something that is Lubell and outputs. Ah, you know, pretty stuff, so to speak.

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.

Well, best of luck to ya. I’m excited. Teoh, try it out. I’ve even thought, you know, we were talking earlier about what kind of sites would work Well, as, ah, you know, site run by static side generation. The drunken you excite has no reason to be ran straight out of WordPress. We could easily integrate. Ah, that excite generator with that syntax, does it?

Yeah, we don’t We don’t really do any of the the like dynamic content that you might do with WordPress. I think the only thing we have is Thea, um that’s a dashboard stuff, right? For an attack in. So

that doesn’t matter.

Yeah. Oh, yeah. That’s true. Yeah, it and

a to that point, you can think about this system. So syntax, the syntax podcast with bosses show runs out of get hub and all their show no to run in marked down. And so when they, you know, do something to fix their update of Ah, A a set of show notes, it automatically publishes to their website that way. So there’s a lot there that we could leverage, you know, to change the way we would host a site like ours. Quite frankly, if this stuff is exciting to you, go check out. We’ll have a bunch of stuff in the show notes from some of the tools like lunar. If you want to learn more

about that, if you want to learn more about you know how to set up a build process for static sites and make that part of your build so that things will trigger automatically on continuous integration. If that’s the way your set up, if you want to learn more about just different stuff, that static gen dot com site is a great one. Or, of course, the Bridgetown Project. If you are a Ruby Deb, all of those will be linked up in the show. Notes. Stick with us. We’re going

to take a quick

break and we will get you right on your way to your next show. Go. The drunken UX podcast is brought to you by our friends at New Cloud. New Cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school, city or business? Well, New Clouds Interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and already to design an artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration or to view their portfolio. Visit them online at new cloud dot com slash drunken ux. That’s in you cloud dot com slash drunken ux

Jared Ben, Thanks for sitting down with us this evening. We appreciate you taking the time out of your day. I know the funnest part of running a podcast is trying to organize people in different time zones.

And this time we hit three of the four way. Yeah, sure, my plan almost got all of them. But the microphone is yours. Take it for a second and tell folks where they can find you, what you got going on

and anything that you want to know.

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

Jared white dot com on Twitter. Jared See White, um, and that that’s pretty much it awesome toe. Be sure to connect with us. We’ve got to mention earlier, but Twitter and Facebook that come slash drinking Rex and drinking to excess. Qamar instagram dot com Stocks Drinking your ex podcast and drunken your ex dot com slash discord Coming with us, folks. At

the end of the day, with all of this, you know, you gotta think about how these tools fit into your workflow and whether or not it’s right, not a set. Excite generator is not the right tool for every website. And so every product that lands at your feet this may not be

the way to go. So look into it, learn about it a little bit more. You. Some of the articles we’ve got

in the show notes to understand the ins and outs of it and what their use cases are throwback types of 61. The emergency side episode where we talked about Why s that? Excite generator can help you serve a lot more pages because it reduces overhead. So things like that learn how to evaluate some of those things and understand that no matter which one you go with, which tool you pick, it doesn’t matter, because the only thing you should be doing is keeping your personas close and four users close. bye.

This episode of The Drunken UX Podcast brought to you by nuCloud.

Leave a Reply

Your email address will not be published. Required fields are marked *