Gitty

Lesson 11 GitHub Pages

In this lesson, we will explore GitHub Pages, a feature that allows you to create and host a static website directly from your GitHub repository. We will cover creating a GitHub Pages site, customizing it with themes, adding content, and setting up custom domains and HTTPS.

Objectives

  • Understand the purpose of GitHub Pages
  • Learn how to create a GitHub Pages site
  • Customize your site with themes
  • Add content to your site
  • Set up custom domains and HTTPS

Creating a GitHub Pages site

To create a GitHub Pages site, you need to create a new repository with the naming convention <your-username>.github.io. Add an index.html file to the repository, and your site will be automatically published at https://<your-username>.github.io.

Customizing your site with themes

GitHub Pages supports Jekyll, a static site generator that allows you to use themes and templates to customize your site. To apply a theme, create a _config.yml file in your repository and specify the theme you want to use. For example, if you want to use the "Minimal" theme, your _config.yml file should look like this:

theme: jekyll-theme-minimal

You can find a list of supported themes in the Github Pages Documentation. After adding the _config.yml file and specifying a theme, commit and push your changes. Your site will be automatically updated with the new theme.

Adding content to your site

You can add content to your GitHub Pages site by creating new HTML, CSS, and JavaScript files in your repository. Jekyll also supports Markdown, which allows you to write content in a more readable format that will be automatically converted to HTML.

Custom domains and HTTPS

By default, your GitHub Pages site will be hosted at a subdomain of github.io. If you want to use a custom domain, you can add a CNAME file to your repository with the domain name you want to use. GitHub Pages also supports HTTPS for custom domains, which can be enabled in the repository settings.

Exercises

Create a GitHub Pages site

  • Create a new repository with the naming convention <your-username>.github.io
  • Add an index.html file with a simple "Hello, World!" message
  • Visit https://<your-username>.github.io to see your published site.

Customize your site with a theme

  • Choose a Jekyll theme from the GitHub Pages documentation
  • Create a _config.yml file in your repository and specify the theme you want to use
  • Commit and push your changes, then visit your site to see the applied theme.

Add content to your site

  • Create a new Markdown file in your repository, such as about.md
  • Write some content about yourself or your project.
  • Commit and push your changes, then visit your site to see the new content.

Set up a custom domain and HTTPS

  • If you have a custom domain, add a CNAME file to your repository with the domain name you want to use
  • Update your domain's DNS settings to point to GitHub Pages
  • Enable HTTPS for your custom domain in the repository settings
  • Visit your site using your custom domain to ensure it is working correctly.