This lesson is being piloted (Beta version)

Building Websites With Jekyll and GitHub: Glossary

Key Points

Introduction

  • A static site generator combines page-specific content with layout elements and styling information to construct individual static webpages.

  • GitHub Pages/GitLab Pages is a good choice for people who are already familiar with Git and GitHub/GitLab.

  • This approach can be used to create a relatively small website/blog on a limited budget.
Authoring With Markdown

  • Markdown is an relatively easy way to write formatted text
Hosting Websites on GitHub

  • GitHub Pages is a static site hosting service that takes files in various formats (Markdown, HTML, CSS, JavaScript, etc.) straight from a repository on GitHub, runs them through its website engine Jekyll, builds them into a website, and publishes them on the Web

  • By convention, if you create a branch called gh-pages in your repository, it will automatically be published as a website by GitHub

  • You can configure any branch of a repository to be used for website (it does not have to be gh-pages)

  • GitHub publishes websites on special URLs formatted as ‘https://GITHUB_USERNAME.github.io/REPOSITORY_NAME’
Starting With Jekyll

  • Variables can be defined globally in _config.yml or locally within YAML header (front matter) of a page

  • Variable values can be substituted into page content with Liquid notation: {{ variable }}

  • Global variables are accessible from any page of your website; local variables can only be accessed within the page in which they were defined (and any pages that include this page)

  • Errors can happen but Jekyll will often tell us what’s wrong
Reusing Blocks of Content

  • The content of files in the _includes/ directory can be inserted into a page with { % include file_name % }
Page Layouts

  • Files in the _layouts/ directory can be used as page templates

  • The structure of a page is determined by the layout field in the page front matter

  • You can find many pre-existing themes for sites on the Internet

  • You can avoid duplicated effort by basing new layouts on previous ones
Working With Filters

  • Liquid filters can be used to adapt the values of variables when adding them into your pages.

  • Datetime filters such as date_to_string can provide more readable timestamps on your pages and posts.

  • GitHub Pages doesn’t use the most recent version of Jekyll, so you should avoid the features added most recently.
Loops and Collections

  • Iterate over multiple values in a list with a for loop.

  • Collections are defined in a site’s global configuration and populated in a corresponding folder.

  • Collections are presented by Jekyll as a list of page objects.
Wrap-up

  • Jekyll is a powerful static site generator behind GitHub Pages that supports a high degree of reuse and separation of content and presentation.

  • Learning more on Jekyll themes will enable you to create complex and professional-looking websites.

Glossary