Building Static Websites with Jekyll and GitHub Pages

A one-day workshop that covers everything you need to know to build static websites using Jekyll, set up advanced templates and manage content using Liquid and YAML, and host your sites for free using GitHub Pages.

Workshop Overview

Static websites are a great way to publish content online. With no runtime and no database, you don’t need to invest in infrastructure, security and monitoring - just upload your site and you’re done. When it comes to content management, though, static content presents a whole raft of problems. Traditionally, we’ve solved these by using dedicated content management systems such as Umbraco, WordPress, or Refinery, which provide powerful features like layouts, templating, and publishing workflows - but which require dedicated infrastructure, runtimes, databases and security considerations, whether you’re hosting on your own servers or using a hosted cloud solution.

Static site generators represent a perfect balance between the simplicity of static HTML and and power of a full CMS. Using a static site generator, you manage your content as standalone files, in standard formats like HTML, Markdown, JSON – even CSV. The generator merges your content with your templates and layouts to create a set of static HTML files; you upload this to the web, and you’re done.

Jekyll is one of the world’s most popular static site generators, thanks to first-class integration with GitHub; using Jekyll, you can build beautiful, responsive websites, and host them absolutely free on GitHub’s Pages publishing platform. It’s ideal for publishing project documentation; for creating small personal and commercial websites – and for countless other applications where you need something a bit more powerful than handwritten HTML but don’t want the cost and complexity of a CMS.

In this one-day workshop, you’ll learn everything you need to know to create static sites using Jekyll and host them on GitHub Pages. Attendees will build a static site using Jekyll, publish content authored in HTML, Markdown, JSON and CSV formats.

Workshop Structure

Overview and Introduction

In this module, we’ll get up and running with the Jekyll platform, build a very simple website, run it locally to check it looks OK, and then publish it online using GitHub Pages.

  • Introduction to static site generators
  • Overview of Jekyll and GitHub Pages
  • Creating your first page
  • Hosting locally with jekyll serve
  • Setting up GitHub Pages
  • Publishing your first page

Structuring your Content

In this module, we’ll look at the different kinds of content that Jekyll supports – what they can do, how they work, and some tips for creating and managing them

  • Pages, posts, and collections
  • What is “front matter” - and why is it important?
  • Using tags and categories
  • Includes and permalinks
  • Images, assets and static files

Styling your Content

In this module, we’ll look at how to choose, create and apply visual themes and layouts to your Jekyll content, and how to incorporate custom HTML

  • Introduction to layouts and themes
  • Working with Jekyll themes
  • Creating a custom layout
  • Adapting HTML templates to work with Jekyll

Advanced Templating with Liquid

Jekyll supports the Liquid templating language to give you even more power and flexibility when it comes to the layout and structure of your site.

  • Logic, flow control and conditional rendering
  • Filtering and sorting collections
  • Working with Liquid variables
  • Formatting dates
  • Manipulating data

Advanced Styling with SASS

SASS is an stylesheet language that extends regular CSS with features like variables, nesting, mixins and inheritance - and SASS support is built in to Jekyll, so you can use SASS stylesheets in your Jekyll sites without any extra modules or plugins.

  • Introduction to SASS
  • Using SASS variables to manage styles and colours
  • SASS nesting, inheritance and mixins - what they’re for, and when to use them

Putting it all together

Finally, we’ll look at the last few things you’ll need to do to create a great visitor experience for anybody browsing your site or sharing links to it on social media

  • Using a custom domain with GitHub Pages
  • Adding HTTPS with LetsEncrypt
  • Using GitHub Pages with CloudFlare
  • Adding OpenGraph tags and social media metadata
  • Traffic analysis with Google Analytics

Target Audience and Prerequisites

This workshop is aimed at technology professionals with some experience of HTML and web development. You don’t need to be an expert in frontend development – if you know what a <div> tag is and what 404 Not Found means, you’ll be fine.

Attendees will need a computer running Windows, macOS or Linux, and a recent version of Ruby, in order to install and run Jekyll. If you don’t have Ruby installed, let me know and Iit set up on the day.

Attendees will also need an account on GitHub to be able to publish your site using GitHub Pages; again, if you don’t have a GitHub account, we can set up a free account on the day.

About the Trainer

Dylan Beattie created his first web page in 1992. With nearly 25 years’ experience as a professional developer, he’s worked on everything from static websites to distributed microservice architectures. Dylan is a Microsoft MVP and the creator of the Rockstar esoteric programming language, and he’s presented talks about technology and software development at conferences and events all over the world.

Dylan has built websites on many different platforms over the years, from static HTML, to classic ASP and PHP, to ASP.NET Core, Ruby on Rails – and eventually back to static HTML again. For the last few years, almost all of his personal and project websites have been built and hosted using Jekyll and Github Pages, including his homepage at dylanbeattie.net, the Rockstar site at codewithrockstar.com, and this site, ursatile.com.

Upcoming Course Dates

Tue 2 Mar 2021
09:30-17:30 GMT

Online (Zoom)  •  £250 / £375 Book now!

If you'd like to run this workshop for your team or at your conference, please get in touch

Alternatively, join the mailing list to find out when new course dates are announced.