I’ve been building websites for more than a decade, you would think that by now I would have the absolutely best workflow for building a website, but alas, I am still learning and tweaking my workflow.
I recently wanted to build a simple blog for my site and wanted to avoid the bloat and maintenance of Wordpress,after consulting the oracles at Reddit, I went with Jekyll, a static website generator I haven’t used before, here’s my experience so far:
If you haven’t used a static site generator, the big idea is that every time you make changes to your site files, your whole site gets rebuilt to reflect those changes, but unlike a CMS, you are mostly in charge of uploading your site to your server or host.
The biggest selling point is that you can include page and code variables and your file and folder structure works to make repetitive task easier, things like pagination, code snippets, menu bars, post lists etc,etc become a breeze; additionally, there is usually a template engine to help you import or make your own page templates.
There are so many out there, there is even a site that tracks them:
I gave Myself 1 week to learn and implement this blog with the first on the list, Jekyll, that way if something went wrong or I didn’t like the experience I would just go onto the next one.
The Biggest pain point so far has been installing Jekyll,if you are looking for a simple App or executable, this is not it , Jekyll is written in Ruby, and as such it seems to prefer a Mac environment, ( haven’t tried it on Windows, but it seems possible) it also requires several dependencies and I had multiple conflicts that required hunting down fixes on Stack Overflow and running terminal updates and commands, so business as usual, just be aware you will have some terminal time, you like your terminal time don’t you ?
Official Documentation : Jekyll’s Official Documentation
Great resource, but not very beginner friendly, if at first it seems inscrutable, fear not, this is your guy:
I went over Thomas’s excellent tutorials,which are both short and to the point, but got the gist of it halfway through and skimmed over the rest, if you’ve done any CMS or scripting development it will instantly click.
While you can use Jekyll without Github, you would be missing out on one of the coolest things ever, free and seamless github hosting and integration of your Jekyll project or blog, that’s right, after you setup your Jekyll site you can simply commit from your local build to your Github repo ( a special gh-pages branch ) and you are done .
If what I just said made no sense, you might want to learn and integrate Github version control into your workflow , here’s a painless introduction to Github:
So where does Codepen fit into this static website Github hosted Jekyll business ?
In my case, I wanted a very specific look for my blog posts inspired by Scrivener - an amazing writing tool, so I decided to make a couple of prototypes for my blog index and posts and then use them as templates for my Jekyll site, here they are:
The final templates ( layouts & includes in Jekyll’s parlance) ended up a little different, but using Codepen for the initial sketch was not only a time saver, it was fun
To give you an example of how Jekyll works, here is the Index file that generates this blog:
You might be wondering where is the rest of the document and what are those curly things, well, that’s how Jekyll works, the block up top is called Front Matter and allows you to specify a layout ( where most of the html resides) ,declare page variables and much more, the curly things are variables that work in tandem with the folder structure to allow you to say… go over all the posts in a folder and list their titles and create post pages, there is of course a lot more to it and this is not a tutorial, but hopefully you get the idea of how your files will look.
Drink Up !,