Creating websites with GitHub Pages

Owned by Edward Ned Harvey
Last updated: May 14, 2024
3 min read

You can create static websites that will be hosted by github, and automatically updated whenever you push changes to your content on git.

References:

Getting Started:

  1. To get started, browse to the GitHub Tufts University Organization
    Ensure you are logged in. (It should say “You are logged in.”)

  2. Go to Repositories > New Repository

    1. Owner: Tufts University

    2. Repository name: the name of your site, for example, testwebsite.it.tufts.edu

    3. Visibility: Internal (notice, this is the visibility of the repo, not the website)

    4. Yes, add README

  3. After the repository is created to go Settings > Pages

    1. Visibility: Public (notice, this is the visibility of the website, not the repo it came from)

    2. Source: Deploy from a branch

    3. Select the branch: Main, and the path / (root)

    4. Save.

  4. After clicking Save, a new field will appear that allows you to specify Custom Domain. Enter the name you want, for example testwebsite.it.tufts.edu

    1. For more info, see https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site

    2. Entering the custom domain into the field above actually creates a file called CNAME in your repo. You can edit this file to change the custom name if you want. If you use an apex domain such as example.com, you will automatically get www.example.com supported as well. You may only have one name in your CNAME file. If you need to support more than one name, you need to use a redirector. Redirection is supported by most domain registrars, and at Tufts we support it via lb-redirector-tss.it.tufts.edu.

    3. Configuring DNS:

      1. If your custom name is not an apex domain (for example, your custom name is testwebsite.it.tufts.edu) create a CNAME to whatever organization or username your repository is under:

        1. tufts-technology-services.github.io

        2. tufts-university.github.io

        3. youruserprofile.github.io if the repository is not in one of the above organizations

      2. If your name is an apex domain, for example, foobar.org, follow the instructions https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain to find what IP addresses you should point your DNS to. Create A records for foobar.org and create CNAME record for www.foobar.org going go @ which is a reference to the apex domain. In other words, create these:
        foobar.org A 185.199.108.153
        foobar.org A 185.199.109.153
        foobar.org A 185.199.110.153
        foobar.org A 185.199.111.153
        www.foobar.org CNAME @

    4. You might need to refresh the Settings > Pages page, to get the “DNS Check” check near the bottom. After your DNS changes have propagated, you should get “DNS Check Passed” at the bottom. Then you can click the checkmark to force HTTPS. Github will automatically manage SSL certs via letsencrypt.

  5. If your repository contains index.html, index.md, or README.md, that file will be served by default when the URL requested by clients does not contain a filename. Markdown md files are automatically rendered to HTML.

  6. Optionally, much more powerful style and formatting can be obtained by using the Static Site Generator (SSG) Jekyll. For more information, see GitHub Pages and Jekyll. To see themes examples, you have to jump through a couple of hoops. First go to , then click on a theme, and it will take you to the source code of that theme, but notice over in the right, there is a link to a github.io page. Click that link to see an example of the theme. Here are a few examples:

    1. https://pages-themes.github.io/architect/

    2. https://pages-themes.github.io/cayman/

    3. https://pages-themes.github.io/dinky/

    4. For more, go to Supported themes, and follow the links as described above