How We Built This Website

Last year, when we set out to build our own website, we realized that while we have lots of experience building CMS-based websites for our clients, working on our own site gave us a unique opportunity to get our hands dirty and learn some new tools and techniques that we might not otherwise get to use.

Instead of using Kobot’s custom CMS or WordPress, we chose to use Jekyll, a popular static site generator.

Jekyll affords us many of the benefits of a CMS while giving us much more flexibility with the underlying markup and code. Unlike a traditional, database-backed CMS, Jekyll’s output is a folder full of static files that can be published to any web server without the need for any special server-side processing.

When using a CMS, a normal page load involves a call to the database server, after which the content passes through application and templating logic before hitting the browser as HTML/CSS/JS. Using Jekyll, we get to skip all of those steps and simply serve the page, therefore we get a nice site speed upgrade for free.

Using Jekyll also enables us to keep our site’s content under version control. This allows us to distribute the entire site quickly and easily between the three of us so that we can work on it on our own machines without the need to setup a fancy staging server.

How we build this site

While our recent rise and fall in the search rankings taught us to become more aware of our own content strategy, it also made us think more about technical changes that we could make to increase our search relevancy by increasing our page-load speed. To that end we’ve added the Grunt task runner into the mix to automate image optimization, concatenation and minifying of Javascript and CSS files, and building and deploying the site.

Although we would never want our clients to have to deal with the level of complexity that Jekyll & Grunt present, it has forced us to reconsider how we work with content management systems and to place much more emphasis on site speed. For example, we’re now using Grunt in our barebones Wordpress theme to automate the same types of site speed improvements that we’ve made to our own website. While much of the work on our own website will probably not translate over to a client project, they still reap the benefits of our experimentation and improvements to our processes.

Sign up for our newsletter You’ll receive news, jokes and useful information from Edmonton’s most-handsome web design studio.

Read more from Kobot »