For the last few websites I’ve worked on I’ve utilised this thing called a Static Site generator, and one in particular, Jekyll. I’ve wanted to post about this for a little while because it’s honestly been one of the best things I’ve done in along time. It’s forced me to deeply think about webdesign in a verry fundamental way, learn a bunch of new techniques and skills, exposed a whole new way of building with the web and returned my enthusiasm and passion for the web that I fell in love with two decades ago. The recent podcast from the Tech Gypsies was the inspiration and motivation to finally sit down and write, so here we go.
What are Static Site Generators?
Lets kick this off with a quick overview of what a Static SIte Generator (SSG) is. StaticGen, a site dedicated to listing and ranking these tools, fortunatel had this pretty adequately covered :
The typical CMS driven website works by building each page on-demand, fetching content from a database and running it through a template engine. This means each page is assembled from templates and content on each request to the server.
For most sites this is completely unnecessary overhead and only adds complexity, performance problems and security issues. After all, by far most websites only change when the content authors or their design team makes changes.
A Static Site Generator takes a different approach and generate all the pages of the website once when there’s actually changes to the site. This means there’s no moving parts in the deployed website. Caching gets much easier, performance goes up and static sites are far more secure.
In many ways static site generators simplify the technical overhead required to design, write and publish on the web. Yes there are skills you will need to employ and technology you will have to understand, but these skills and knowledge are essential literacies for working with the web. Literacies that I think gets lost when using most CMS’s and social media platforms, because their shiny Admin interfaces ad WYSIWYG editors, essentially divorce users from the underlying workings of their site and they become dependant on developers and programmers to make the web work. Static sites are a return to the essentials of the web and what makes it great and powerful.
What’s It Like Using a Static Site Generator?
Using a Static Site generator work in ways similar to Dremweaver templates but with a numbder of key enhancements You create template pages that define the look and structure of your site and you keep your content completely seperate and simple, and then with a small amount of programming code you build your site.
From here on in I’m going to be talking about Jekyll, the most popular SSG out there at the moment. While I am familiar with the range of SSGs out there, Jekyll is the only one I’ve spent a lot of time with. I’m keen to have a play with Grav in the near future – as I think it might be capable of some of the dynamic components I need with some projects.
How Jekyll works is that you create a few HTML pages as templates, utilise Liquid to create some basic queries to populate pages with content, write your content in Markdown and metadata in YAML and then get Jekyll to do the grunt work of putting it all together. What you end up with are essentially two folders – one is your development area and contains all your build files, the other is your finished site full of HTML pages, links and menus all built for you and ready to deploy on a server. If you have web hosting already set up – just FTP the folder to your site and you’re done. Even cooler – make the site a repository in GitHub and it can host it and do the build for you for free. That’s right, free websites!
The Learning Curve
For some of you that last paragraph may have been written in cypher – yes you will need to learn new things but I can assure you that the curve isn’t steep. Each of the technologies listed are core to working with the web and understanding how it works:
- HTML – is the building block of the web and once you understand how it works, you can manioulate and publish virtually anything you want. You can tweek, hack and change your web experience.
- Liquid – is pretty basic programming and developing an understanding is a transferable skill.
- Markdown – can be viewed as simplified HTML, but it also introduces the power of plain text as a timeless and adaptable content format. It also brings to the for the cetral idea of seperation content from presentation.
- YAML – is a great introduction to metadata. Using metadate we can connect content, posts, ideas and visuals and also seperate display options, graphics and information about the content from the content.
- FTP – File Transfer Protocol is the equivalent of a file manager for your web server. It allows you to upload, copy, move, delete and update files and it kind of what the CMS admin menu will let you do – except now your dealing with real files and folders.
- GitHub – Git is a version control system, GitHub is a service that allows you to host your digital projects online and take advantage of versioning and centralised access that’s great for teams. GitHub have also built a bunch of useful tools and additions – like website hosting, wikis and issue tracking – that make it incredibly useful for open and public projects.
Working with Text
What you will need to get used to is working with text. Rather than a fancy Graphical User Interface, to use Jekyll you’ll need to embrace the Terminal and run commands and to tweak and build things you’ll need a Text Editor. The beauty of this is that neither of these require expensive or proprietry tools, in fact there are plenty of great free options so the total cost for development is close to zero. (Side note: I’m on a Mac and have used Homebrew to get me up and running quickly.)
Developing on my local machine meant installing Ruby and Jekyll by copying and pasting in some commmands – which does mean opening the terminal. This might be pretty scary for some people – but to be honest, most of the code is cut and paste from some of the fantastic documentation and demonstration that are available. Did I tell you how awesome the community is? Well it’s one of the greates things about developing this these tools, because the resources people have shared are incredible and impressive. Even if you’re a novice you’ll find a wealth of tutotials, videos and discussion forums to learn from and engage with.
Working with SSGs has meant that I’ve been able to focus on the design a lot more. I’m able to use my knowledge of HTML and CSS to put together simple and well designed websites – Quickly! That’s a key element to this for me – time – and I’ve been able to invest more time doing and learning about these sites than planning, researching, shopping and hacking them together. And then having them break over time.
- Brackets – This is my text editor of choice at the moment. It’s free, it’s from Adobe, and it’s build using web technology. It’s open, customisable and simple to use.
- Skeleton CSS – Getting started with the actual design of a website should really begin in the code. Rather than start from scratch I’ve found the Skeleton library to be a light weight and simple starting point. In my latest project I found a SCSS version of Skeleton up on GitHub that I’ve used. This has broken up Skeleton into a bunch of components that I can add or remove from a project if needed. It also takes advantage of Jekyll being able to compile SCSS and take advantage of variables within the code.
- GitHub – I’m a pretty novice user of Git – but GitHub I use alot. From finding interesting projects, unearthing code snippets and examples, to digging through source code – GitHub is a fantastic resource. I’ve also made use of their ability to host a couple of my sites and setting up domains to point there.
- Reclaim Hosting – I’m a paid up memeber of the Reclaim crew, but to be honest I still have plenty of work to do on my Reclaim Project. That said setting up domains and utilising FTP is an incredibly easy and painless way of getting sites up and running.
- Chrome – I do most of my debugging in the Chrome browser. Whenever you’re working in the web you need to see what you’re looking at and being able to bring up the developer tools (CMD+OPT+I) to inspect a site is so easy. Plus, if you see something you want to steal, Inspect and find the source code 🙂
- Jekyll Serve – one of the hand commands is
Jekyll servewhich basically tells Jekyll to watch a folder and anytime there’s a change, rebuild the site. When I’m making I leave this on the whole time, which means any change is a simple refresh away.
My Jekyll Projects
So in the last year or so I’ve ran a number of projects through Jekyll.
- Inhal.es – this was my first project utilising Jekyll. The site was inspired by Stephen Downes’ amazing OLDaily posts and Audrey Watters’ HackEducation (so much so I used the same theme!). I wanted to create something similar, find an interesting article and comment on it. To set this up I had to install Ruby and Jekyll on my local machine and then tweaked the Mediator theme developed by Dirk Fabisch. The site is hosted on GitHub pages and the domain redirects from my account with Reclaim Hosting. See the repo.
- Lessons From Dad – This project is yet to be finished or finalised, but it’s a collection of lessons I want to pass on to my daughter. I started these just before she was born and aim to continue to add to these over the next 14 years till she’s 18 – and then hand them over as a present. This project was simply playing with a different theme and finding my way around Jekyll.
- TimKlapdor.com – This was my first big foray into using Jekyll for something beyond a blog. Instead of using Pages and Posts this site uses Collections to group content. The aim of the site was to create a simple one page resume – so each section makes use of a different type of collection. I created custom YAML data as well so that I could use Liquid to parse and populate the index page. See the repo.
- Resume Builder – This project takes what I created for TimKlapdor.com and turned it into a forkable and reusable boilerplate for creating your own one-pager online. I’ve simply stripped the site of personal information and left it ready for you to fill in. By simply copying and adding your own Markdown files for each of the sections the page will build itself and put it all together. Most of the configuration is done in the _config.yaml file where you can change colours and various bits of informationSee the repo
markdown="1"to the container tag. The Learning Exchange (or LX as I’ve come to know it) is the culmination and proof for me that there is an undeniable power associated with the current crop fo SSGs. The speed I was able to get this up and running from a some basic mockups was astonishing.
So the future is Static?
I’ve loved reconnecting with some of the “old” ways of developing with the web. I’ve realised how much faster I am at hand coding stuff, becasue there’s no abstraction or middleware in your thinking. I can write, review, re-wrire, review and repeat – much, much faster. There’s no UI to get in the way. I know some people may struggle with this, but as someone who was first to code their first website by hand in Notepad – it’s hard at first, but it is ultimately beneficial. If you’re learning about web development, this is the equivalent of immersion to learn a foreign language. It can be hard at first, but you’ll see results faster and be practicing with more fluency than in any other way.
I’m not sure if WordPress is the best introduction to the web – there’s a lot that gets in the way of learning the mechanics and masquerades what’s actually happening underneath the hood. SSGs maybe more “raw” becasue you can see the engine working, kind of like a hot rod. And continuing with that metaphor – they don’t lack power or control or nuace – they just have it on show. Perhaps SSGs are the Centre Pompidou of the web.
Will SSGs suit everyone? No.
If you need forms and a bunch of server-side functions you’re better off with an existing CMS. The same goes for large complex sites because rebuilding an entire site for every small change is going to take time.
But if you just want to serve up content quickly and easily, there are few better options. I’m not entirely sure why the default for a website became a CMS which needs a complex database and programmatic language to drive it, but for most applications its simply overkill. I think SSGs are a return to the traditions of the web but with some 2015 Delorean Upgrades. Not new, but definately improved!