Build and customize a website with Jekyll

This workshop will guide you to use Jekyll, a powerful static website generator, to build a website on your local machine and serve it on Github pages. In this workshop, we go beyond the material presented in the Introduction to Jekyll workshop and explore templates and styles to customize your website using themes, Liquid templating language, and plugins.

The material of this workshop complements the previous Introduction to Jekyll workshop. Thus, we are not going to cover the basics of hosting a website, choosing a site generator, and Git and Github.

Learning objectives

By the end of this workshop, you will be able to:

1. recognize the capabilities and shortcomings of Jekyll for building different types of websites
2. build a Jekyll environment hosted on a local machine
3. develop a simple website with Jekyll and free online themes
4. write your first post and add simple features using Liquid templating languages
5. differentiate domains and hosts and use free web hosts and domains to serve the website

Before the workshop

• Review the material in the Introduction to Jekyll workshop. Particularly, read Concepts and Terms and What is Jekyll.

• Set up a running Jekyll environment. Please follow this guide to install Jekyll on your system.

• Create a Github account. We will use Github Pages to host our static site. If you are interested in using a different domain name and connecting it with your Github Pages, please read this article.

• We expect you to have some basic familiarity with Git and Github. Please see this workshop to learn the basics: Introduction to Git and Github

Schedule

Slides

Find the workshops slide below or open it in a new tab:

Activities

More resources

• Official Jekyll Documentation
• Official Liquid Documentation
• GitHub Pages Documentation
• Introduction to Jekyll Workshop
• Jekyll CheatSheet
• HTML Tutorial W3School
• CSS Tutorial W3School

---