The Dynamics of Static Sites

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.

My Workflow

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.

Tools

  • 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 serve which 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
  • CSU Online Learning Exchage – This has been my main project for the last couple of months. Originally this was going to be WordPress site and I started to create a Plugin that would create a custom post type and related taxonomies. As the project rolled on it was getting to difficult to define all the data and structure that I needed and there were ongoing disagreements about terminology. So instead I went back to the drawing board and decided to keep it simple. Rather than go all out with the build – I decided to make it adaptable and iterate to get it right. So I went with Jekyll. The idea was that over the next couple of months we would flesh out the site, test it with users and add features and changes as required. I can do a lot of what we need in Jekyll, and am exploring adding search via Javascript. If it fails the content is in Markdown and easily transferable and reused. The site is also an example of my recent learning. I started with SCSS as I wanted to do as much as I could with HTML and CSS without resorting to JS. I find it a lot easier to write CSS in this way, and the fact that Jekyll looks after the compiling make it simple. The banner colour is me playing with a CSS gradient animation – wait for a little while and it will change from Orange to Pink to Purple to Blue,and back again. The Mixer page was built using HTML and Flexbox, a fairly new layout function thats available and makes life a hell of a lot easier when it comes to layout. While I’ll admit it can be a little confusing, it seems to do a nice job of showing what is essentially 11 A4 pages of text 🙂 . Jekyll doesn’t come with Archive pages like WordPress so I borrowed some code to create the pages for the strategies for each of the Elements . The View All page was created using Tags and some borrowed and tweaked liquid code. I also used a Liquid include to create a reusable YouTube Embed snippet. The site mixes HTML and Markdown and renders fine because I’ve added a 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!

Advertisements

8 thoughts on “The Dynamics of Static Sites

  1. Thanks for sharing these, Tim. It reminds me to try using your resume builder. A lot is afforded by the modern capability of browser side JavaScript to do what in the past required server side.

    My original platform, then open source MoveableType but now is commercial TypePad was somewhat a hybrid– authoring required database interaction but on publishing it rendered static content. Old days….

    • MT was great for that. Seemed clunky at the time, but now there are many projects trying to recreate that functionality. Blosxom was awesome for this, too. I loved running sites with that. RIP, Blosxom!

      With WP-Supercache, even WordPress kind of acts as a SSG. Pages/posts are generated once, written out as .html (or .html.gz) cached files, and those are served for subsequent requests. The cache directory even uses the full structure of the dynamic site, so it should be possible to remove WordPress from a server and still have the static cache working with just a minor tweak of an .htaccess file.

      I need to look into Jekyll again. Thanks for the nudge!

      • Thanks for mentioning the Caching side of WordPress Darcy – I’ve been playing a bit with that recently – and it did get me wondering – why am I using WP again? I think some of it comes down to the Interface – text files are plain scary for the non-initiated (i.e. the rest of the planet). That said I did come across http://prose.io for editing GitHub hosted content and have used it with success. https://forestry.io is another interesting interface for Jekyll, but I’m yet to have a proper go with it yet.

      • I’m using WordPress for the workflow. Easy to post a photo from my phone, or anything from my iPad or desktop. I don’t need to sync files or run a generator. It’s just there, waiting for me. And it works.

      • I’ll agree – current workflow isn’t great on Static Sites. I don’t have one I’m a fan of yet. I don’t like to write in WordPress at all – too many lost posts, comments & words – so don’t require a one stop shop. I did put together a script to post from the Editorally app https://gist.github.com/timklapdor/d692b2aa17b23681678f so that it’s a simple push of a button to publish to GitHub and triggers a site build.

      • I really miss Blosxom. Great static site generator, and ran wonderfully over a decade ago. It has crumbled since then. All that would be needed for the workflow is client software (local web app, or apps for Mac/win/iOS/android) to easily upload content (text and supporting media) to the proper locations on a server, where a static generator is triggered to update the website as needed.

    • Thanks Alan – would love feedback on the Resume Builder. I’m yet to find time to test it with anyone, but was a great little project to work on and find my way around the tool. I’m slowly resolving the fact that I need to lear JavaScript – it’s become so powerful and ubiquitous now I’ve run out of excuses.

      It’s interesting about MoveableType – I kind of missed the “platform” wars as I was mostly doing graphic design and print at that point in time. I kind of did my apprenticeship in HTML and tables, then in CSS, but missed the platform bit that drove blogging at that time. I played with Drupal for a while just to get my head around how these database driven things worked, but didn’t go very deep.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s