Learning Portal (beta)

# GitHub Pages Hosting

# Learning Objectives

After completing this lesson, you will be able to do the following with the GitHub Pages service:

  • Host a static website
  • Automatically deploy changes
  • Use a custom domain

# Lesson

# Overview

Hosting a website can be done in so many ways. When your website is only static files (HTML, CSS, JS, and images) you can use a static hosting service. This kind of service is inexpensive and fast since it delivers the site from small files instead of processing databases or back-end programming languages.

Thankfully GitHub offers a hosting solution they call "GitHub Pages". The service is free and hooks into a GitHub repository. In this lesson you will learn how to host a website, auto-deploy changes, and use a custom domain.

# Hosting

To get the latest documentation for step-by-step how to deploy a website, please visit the official documentation for detailed instructions.

Here are the steps for using GitHub Pages:

  1. Go to your GitHub repository on github.com
  2. Go to the repo's "Settings"
  3. Scroll down to the "GitHub Pages" section
  4. Select "master branch" as the source
  5. Visit <username>.github.io/<repo> to see your static site hosted!

Subdomain Website

Creating a repo called <username>.github.io will allow you to host a website on the same domain.

# Auto-Updates

You can automatically update GitHub Pages by pushing commits to the master branch. To push code without updating your live site, create a separate branch. When you want to update your site with those code changes, merge that branch into master.

# Custom Domain

Adding a custom domain means you can change your site from <username>.github.io/<repo> to mydomain.com. This is done by completing the following steps:

  1. Go to your GitHub repository on github.com

  2. Go to the repo's "Settings"

  3. Scroll down to the "GitHub Pages" section

  4. Fill out the "Custom Domain" input with your domain and click "Save"

  5. Follow the instructions from GitHub for updating your domain's DNS provider

    Navigate to your DNS provider and create either an ALIAS, ANAME, or A record. For more information about how to create the correct record, see your DNS provider's documentation.

    To create an ALIAS or ANAME record, point your apex domain to the default domain for your site. For more information about the default domain for your site, see "About GitHub Pages."

    To create an A record, point your apex domain to the IP addresses for GitHub Pages.

    185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
    1
    2
    3
    4

    See Managing a custom domain for your GitHub Pages site for more detailed instructions.

  6. Visit customdomain.com to see your site!

DNS Timing

DNS Record changes are not immediately updated. It can take anywhere from a few minutes to a few hours for changes to be reflected. Try a hard reload or a different web browser if you are having issues seeing the DNS change.

# Summary

GitHub Pages is a simple and free solution for static hosting. You have learned to host, auto update code, and use a custom domain with this service.

Official Documentation

GitHub offers official documentation they call "Working with GitHub Pages".

# Training Exercises

To solidify your knowledge, here are a set of exercises that will require you to use the techniques you've just learned in the lesson above.

# Medium

# Create <username>.github.io Site

Create a repo called <username>.github.io and host the site on GitHub pages using the instructions in this lesson. You will be able to visit <username>.github.io to view your site.

# Interview Questions

# Fundamentals

  • What is GitHub Pages?
  • How do you manage a custom domain using GitHub Pages?
  • What are the advantages/disadvantages of hosting your website with GitHub Pages?

# Bugfix

Show them code and ask them what they would change to make it exhibit the correct behavior.

# Conceptual

Ask them how a technique or technology works.

  • Explain how GitHub Pages is able to offer hosting for free?
  • What are you able to put on GitHub Pages? What kind of project is not supported?

# Architect

Ask them how they would build a particular feature or set of features.

  • When would you recommend using GitHub Pages as a hosting option?

# Additional Resources