This lesson is in the early stages of development (Alpha 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)
Re-using Blocks of Content

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

  • Errors can happen but Jekyll will often tell us what’s wrong
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

  • You can use Liquid filters 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