Introduction Hello, World!

Figure 1

Let’s write a more complex HTML example using a table showing the “Hello, World!” text in different languages that renders like: HTML table example

Figure 2

A similar example written using HTML lists would look as follows: HTML list example

Figure 3

Pages can be created in several ways: static server-side generation (where HTML is generated once on the server and doesn'tchange thereafter), dynamic server-side generation (where the server can update and send new HTML based on requests fromthe user's browser), and client-side generation (where parts of HTML pages are generated by the browser using Javascript code)

Figure 4

Static websites in GitHub Pages technology overview diagram

Figure 5

New repository button

Figure 6

Dropdown plus menu with new repository option highlighted

Figure 7

Blank new repository page

Figure 8

New repository - set name to group-website

Figure 9

New repository - set description

Figure 10

Initialise a new repository with a README and a licence file

Figure 11

Set licence to CC0

Figure 12

Filled in form with a create repository button

Figure 13

Github repository for the group website

Authoring With Markdown

Figure 1

On the homepage of a GitHub repository, the edit button is positioned to the top right of the README preview

Figure 2

Editing interface of the group websites README file

Figure 3

Preview of the rendered content of the group websites README file

Figure 4

Commit menu for changes done in the GitHub web interface is located at the bottom of the website

Figure 5

Preview of the formatting added to the README

Figure 6

Difference between soft and hard breaks

Figure 7

Committing the formatting added to the README

Figure 8

Rendered solution to the Markdown exercise

Hosting Websites on GitHub

Figure 1

Repository 'Settings' button in GitHub interface

Figure 2

Select 'Pages' tab in repository settings

Figure 3

Set default branch for the website in repository settings

Figure 4

URL where the project website will be published by GitHub Pages

Figure 5

Project website URL - indication of a successful build

Figure 6

Our first website rendered by GitHub and showing the contents of README

Figure 7

About section of a repository - edit repository details

Figure 8

Create a new file button in the GitHub interface

Figure 9

Create index.md file

Figure 10

  • Go to your website. It should now look like: Add 'About' section to index.md file

    • Figure 11

  • Create a new file called about.md from the GitHub interface: Create another page in GitHub called 'about.md' Edit about.md file to look something like:

    • Figure 12

  • Go to your website and click the link to ‘About’ page. It should look like: Rendered contents of the 'about.md' page

    • Starting With Jekyll

    Figure 1

    Jekyll pending/successful/failed builds after different commits

    Figure 2

    Jekyll - a failed build

    Figure 3

    Jekyll - error details of a failed build

    Reusing Blocks of Content

    Figure 1

    A page displaying the navigation links header

    Figure 2

    A page displaying contact links as footer

    Page Layouts

    Figure 1

    A page displaying the navigation section twice.

    Figure 2

    Home page with inherited layout

    Working With Filters

    Figure 1

    Blog post '1827-11-22'

    Figure 2

    Blog post '1851-05-06'

    Figure 3

    Blog post '1851-05-06' with human readable date using ordinal parameter

    Figure 4

    Without the ordinal argument, date_to_long_string produces the output 06 May 1851 (i.e. using the two digits to represent day). Whether you prefer this format is entirely subjective, and we encourage you to use which ever you prefer in your post layout. Blog post '1851-05-06' with human readable date without ordinal parameter

    Loops and Collections

    Figure 1

    Rendered team members list in the 'about.md' page

    Figure 2

    Rendered blog post list in the index page

    Wrap-up

    Figure 1

    Throughout this lesson, we learned how to create formatted webpage content with Markdown, configure a GitHub repository to use the Jekyll static site generator, and how to use Jekyll to build our Markdown pages and various other files (HTML snippets, CSS, images, etc.) into a set of HTML documents that are then served via the GitHub Pages framework. Static websites in GitHub Pages technology overview diagramHTML is the basic building block of webpages served on the Internet. It describes the structural elements of the page and their raw content and is often aided by CSS - an ordered set of styling instructions telling the browser how the content described in the HTML document should be organised and formatted. HTML is very verbose and difficult to write by hand - beyond their initial design HTML pages are meant to be processed by machines. For that reason, Markdown was introduced - a lightweight Markup language and a convention for adding style information to textual content while retaining the human-readable form. It is not as rich in syntax as HTML, but comparably more usable by a wider audience.

    Figure 2

    Directory structure of a jekyll website containing this lesson

    Figure 3

    the GitHub interface fork button

    Figure 4

    GitHub copying the fork

    Figure 5

    GitHub branching dropdown menu with gh-pages typed in box