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. Dylan is online at https://dylanbeattie.net/ and on Twitter as @dylanbeattie.
Upcoming Course Dates
No public dates are currently scheduled.
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.