Hello and welcome to episode seven of inspect my name is Ajakal and in today's episode I want to talk about static site generators And in particular a tool called Jekyll, but before I get into that I'd like to just take a moment to extend a thank you to everyone who's listened so far So last week this podcast passed the 200 downloads mark which is way more than I was expecting at this point and by the looks of things it's gonna reach around 250 by the end of This week or at least by the time this this episode has come out unfortunately iTunes and the other podcast clients They don't actually give you stats of actual subscribers. So although there has been over 200 downloads I'm not too sure exactly how many subscribers are so I'd love to get to know everyone a little bit better And what I'd like you to do is if you are a subscriber of this podcast If you could reach out to me on Twitter at inspect the femme just drop me a quick message or to be or DM Just to say that you're a subscriber Maybe give me some feedback on what you think of the show so far Any questions that you might like answered or if you'd like to be a guest on the show I'd love to have you on as well and get some conversations going So just once again Just like to say thank you to everyone who's listening so far and look forward to those numbers increasing more and more and yeah Okay, so on to today's episode which is about static site generators. So first of all, what is a static site generator? It's probably very obvious from what the name suggests It is a tool which generates a static version of a website So static meaning that all the pages are served up as plain HTML files CSS JavaScript and images just the sort of basic building blocks of a website before getting into that though I'm talking about the actual tools I'd like to just give a brief history of how websites were built in the beginning websites were built as individual HTML files for each page of the website Any any common areas of a website such as the navigation or the footer They would have to be repeated on every single one of those HTML files which made updating your website quite a quite a bit Toss because you have to make updates to several pages all at once obviously as the site gets bigger This can become more of a nightmare to maintain it could lead to consistency errors and Just generally not very nicely to work Following on from here You had server-side languages such as PHP for example, which allowed you to create reusable templates In your code and the server would convert these to HTML at runtime to be displayed in your web browser So what this allowed you to do is to create one header and then import that into your different page layouts and create one footer And import that when you then had to make updates you would just make updates to that one header file Which would then populate your whole website The only downside is that this needed server side hosting so you needed a host which was compatible with PHP for example or ASP.NET What a static site generator does is it combines those two wells So it uses HTML files with standard HTML markup But then it uses templating tags within that markup to create dynamic content So you can use variables you can create partials you can have conditional statements You can have loops or within your HTML and then the static site generator tool will then Compile all of these These templates into static HTML files which then get deployed to a server So although you are ending up with HTML files for each individual page of your website When you're actually building the website and writing the code you are writing in a more server-side language style with partials and page layout templates and includes and loops and conditions and so forth so at the time of recording there are currently 457 static site generators available These can all be found on static site generators.NET and you can also go to another site called staticgen.com Which allows you to filter by different languages and it also has a rough sort of rating of which one's the most popular now Going on to the site the most popular by far is a tool called Jekyll Which is the one I'm going to be focusing on and it's the one that I use myself So the inspect.fm website for this podcast is built using Jekyll and my own personal portfolio is built using Jekyll So I've used it on two projects so far both fairly small projects Both quite different as well both achieving different tasks So Jekyll is available on jekyllrb.com It runs on Ruby.
It's very easy to set up on Mac OS because Ruby is already pre-installed on the OS If you're running on Windows, it's a little bit more involved But it is documented well and it does run final windows as well Your content is all written in Markdown It can be written in HTML but it's encouraged to have your templates written in HTML with with your content actually written in Markdown What this encourages is for your written content to be much more structured because you're using Markdown to structure it On the page it also means that a static site generator is great for text heavy websites like blogs Which is what they were originally intended for but also for documentation Which is also another very common news for them. So Jekyll uses a templating language called liquid Which was developed by the guys over at Shopify The liquid is definitely one of the more popular templating languages out there It's obviously used by Shopify themselves, but of course Jekyll uses it sales force then desk 500px Guitar there's a massive list of companies that are using liquid templating language either in its raw form or some sort variation of it And it's very easy to learn very to pick up if you're if you've got any experience with any other sort of service or language That's just PHP or ASP.NET picking up liquid will shouldn't be too difficult It's just a little bit of a syntax tweak here and there but again very well documented Both on the liquids documentation and also on Jekyll's documentation as well So I suppose the question is now how does Jekyll actually work? So there is a command that needs to be run in the command line So when you're creating a new website you run the Jekyll command to create the website and then you run a Jekyll serve command Which basically takes all of your templates and your content and Compiles us all into the individual static HTML files now that doesn't mean there is a slight dependency on using the command line However, you don't need to necessarily be a command line power user to get up and running with Jekyll I'm by no means am I a power user of the command line, but I find it very easy to follow the instructions and get Jekyll to do exactly what I wanted to do However, if you are looking for something a little bit more automated like a traditional CMS such as webpress for example There is a plugin for Jekyll called Jekyll admin, which is created by the team at Jekyll themselves And what that does is it gives you a CMS style Interface to create your content within Jekyll now This isn't something I've tried myself because I'm fairly comfortable with the way I've got things set up And so I haven't found any to use it at the moment But I'll be interested if anyone has a if anyone out there has used it and Would like to share their opinions then yeah, it'd be great to hear that So like I said, I'm using Jekyll for both the my personal website and for the for this podcast website And I've written up a blog post on my process of setting Jekyll up and how I've organized my templates and how I've organized my My layouts and my config and I'll put a link in the show notes to the article If you've got no previous experience with Jekyll that article should get you up and running pretty quickly And it should give you a good basic understanding of how Jekyll works and what it's useful I also posted the article to medium and to the practical dev and it's had a lot of hits on both of those sites So it's obviously something that people are quite interested in and the more I use Jekyll the more I see other people's websites out in the world that are using Jekyll Or it seems to be one of those cases where once you start being involved in in a certain tool you start noticing it everywhere If you're interested, I also was featured on another podcast called Design vs. Dev We're Drew Knott.
This was a few weeks ago. Well, actually a couple of months ago It's worth having a listen to that we did talk about some of the other static site generators as well We did mainly focus on Jekyll Um, but there's probably things in that episode which I haven't covered in this one So I do recommend that you listen to that one as well again I'll put a link to that show in the show notes as well So I mentioned earlier about the Jekyll serve command which you run in the car line Once you run this then Jekyll does its magic in the background and spits out all the static HTML files And all the static assets and puts them into a site folder And then all you need to do is take that site folder and deploy it to your hosting via FTP However, um, there is a way of automating this process as well. Now the way I do it is using Travis So Travis is a continuous integration tool which builds and deploys GitHub projects It's free for public repos and if you've got any private repos, there is a paid option My code is public and I'll put links in the show notes to the code for my website Which you can have a look at and you get an idea of how it's structured So because mine is public I can I'm able to use the free Travis integration tool Which is great And I'm able to make changes to my website push them to my GitHub repository And then Travis takes over it watches my repository for changes when it notices a change It will then run a build and then on a successful build it will then deploy to my FTP host It's all pretty seamless the whole process takes about two and a half to three minutes From when I publish to GitHub to when the deploy happens on the website and the content is live And um, as I've done with the actual setup of Jekyll, I've also written up a blog post on my Travis automation setup as well Um, so yeah, if that's something that you're interested in it's probably worth having to read that as well Um, and if you have any questions, I'm happy to answer any questions on my process of setting that up Now I did come across another tool called netlify, which is net li fy Um, it's a hosting platform, which gives you things like cdn's and ssl's Um, continuous integration, but the beauty of it is is that it already integrates with a lot of the static site generators So If you if you were to static gender.com, which I mentioned earlier a lot of the listings on that site have a deploy to netlify button One click deploy so you can just hit that button and What so what that will allow you to do is you write your code Push it up to netlify it netlify will handle all the build process and the deploy and push your content live very similar to um, Travis Um, so netlify is a paid service starting at $9 a month. Um, they do have a free tier as well, which does have some restrictions Um, but to make use of all their features you do need to go to a page tier Um, similar to Travis They do offer a free option for open source projects So again, if your code is open source on github You could use netlify to Clearly integrate and deploy that code for free in the same way that Travis does Um, I haven't tried setting up netlify but I because of their one click deploys I assume that it's going to be pretty straightforward and quite simple.
So that's definitely worth checking out too So yeah, so that's jekyll in a in a nutshell. Um, and hopefully that gives you a rough idea of what static site generators are what they're good for When to best use them how to get them set up how to get them deployed Um, it's very easy I'll recommend at least give you a try if you've got a blog if you've got a fairly small website or if you're writing some documentation Or even if you're just working to work on a github project and you want to set up a github page then you can use jekyll um, or one of the other static site generators to create that content and Get it deployed very very quickly. Um, one of the added benefits of static site generators is that because you're not relying on any sort of server side code Your site should in theory run a lot faster and load a lot quicker because all of the site all of the content is static All of it can be cached in the browser. So especially on repeat visits You should get a nice speedy website.
So it's definitely made a difference for me and i'm sure it can make a difference for you So I recommend checking it out and um, let me know how you get on So once again, just want to say thank you to everyone who's listening so far Thank you for getting those numbers passed the 200 downloads mark and i'd love to hear your thoughts and opinions Love to have some feedback or any suggestions for the show you can catch me on twitter at inspector fem where you can email me on inspector fem at gmail.com and All the content details are available in the show notes as well as all the links to any tools and sites mentioned in the episode And um, I will see you in the next episode