Introduction Hello, World!

  • 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.