Easily set up a free static site using GitHub Pages Matt B, May 21, 2024 Table of Contents IntroWhy should I use GitHub Pages for my free static site?Step 1: Create a GitHub accountStep 2: Create the repositoryStep 3: Upload the files and configure the repositoryStep 4: Configure a custom domain using CNAME recordsWrapping upIntroGitHub has a feature called Pages that allows you to set up a free static site. If you combine this with Cloudflare for a free SSL certificate, you can host a static site with the only cost being your yearly domain registration. This makes it an ideal setup for a personal portfolio page, or a very basic website that doesn’t have dynamic content.This guide will show you how to easily setup your free static site using GitHub Pages.Why should I use GitHub Pages for my free static site?GitHub’s Pages offering is a very good option for hosting a free static site as the simplicity of deployment and configuration means that you can get a site up and running in very little time, and with quite limited technical knowledge. Some other advantages include:Reliability – as your site is running on servers maintained by the biggest code repository management company in the world, you can rest assured that the servers hosting your site are actively maintained.Ease of future updates – if you need to update your site in the future, you don’t have to worry about cPanel, file managers or FTP; just make the changes in the repository and your site is immediately updated.Low cost – as you only have to pay for a domain registration, if you pair this with a service like Cloudflare, you can create your website with very little upfront cost.I’ve personally been using GitHub pages coupled with Cloudflare to host my free static site (my work portfolio) for over a year now and I’ve faced zero downtime with this setup.Step 1: Create a GitHub accountThe first step in getting your site set up is to create a GitHub account. This will be used to provide the functionality, and it will also serve as the place in which your files live (think of it as being your web host). You can make a GitHub account by visiting their site, and then registering.For the purposes of this guide, I’m going to use a spare domain, developergoods.comStep 2: Create the repositoryOnce we’ve made our account, it is time to create the file repository. The naming convention of this is very important as it determines whether or not the repository is one that should be powered by GitHub pages. Per GitHub’s own documentation, you will need to “Enter username.github.io as the repository name. Replace username with your GitHub username. For example, if your username is octocat, the repository name should be octocat.github.io.”Step 3: Upload the files and configure the repositoryIt is now time to add your files to this repository. GitHub pages will treat the uploaded files in the same way that a typical web host would, meaning that your homepage should be named index.html. This also means that you can reference files within that HTML file by path names, i.e. /css/The files can either be uploaded by using Git to pull the repository, at which point you would then add your files and commit them to the main branch, or alternatively, pressing the full stop (.) symbol while viewing your repo should open a web-based IDE where you can upload your files directly:Once you have made this repository and added some initial content, there is one more setting we will need to adjust to get this working correctly. Go to your repository Settings, then navigate to Pages. Once here, you will want to make sure that Source is set to “Deploy from a branch”, and that the selected branch is main:Once your files are uploaded and you’ve made this final change, navigating to (githubusername).github.io should result in you seeing your website:Step 4: Configure a custom domain using CNAME recordsHaving our website up and running is great, however, if we want to use a custom domain instead of the x.github.io convention, there are three extra steps to complete.Fortunately, these steps are quite straightforward, and they allow you to use any domain you’d like for your site.The first of these steps is to verify your domain with GitHub. This is done by adding a TXT record to your DNS zone. Navigate to your GitHub profile picture at the top right of GitHub, and then click on Settings. Once done, navigate to “Pages” on the left-hand sidebar, and then add the domain:Once you add the domain, you will be prompted to add a DNS record to verify ownership:Add this record and then click Verify. If you added the record correctly, you should now see the domain showing in the list of verified domains. We can now add the domain to our code repository directly. Navigate to the repository, and then go to Settings -> Pages. Once here, simply add the domain to the “custom domain” box, and click save. Doing this will trigger GitHub to automatically create a commit, adding a new file to your repository entitled CNAME that contains the domain name as plaintext.Lastly, we need to repoint the domain in our DNS zone to point it to GitHub. I’m making these changes in Cloudflare which is ideal as this provides me with a free SSL certificate (along with other features such as enforcing HSTS). You will want to add 4 A records, all against your Apex domain, pointing to the following servers:185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153If by the time you’re reading this the IP addresses have changed, you should be able to find the new ones on GitHub’s documentation. GitHub’s documentation also provides IPv6 formatted addresses should you wish to add support for that. You will also want to add a CNAME record against the www subdomain, pointing it to your githubusername.github.io address. This won’t cause the site to load by that address, but it will ensure that www requests are correctly fulfilled.After adding these records and waiting a short time for this to propagate, visiting the domain now shows me the website:Wrapping upThis guide has shown you how to set up a free static site using GitHub Pages. If you’ve got any questions or run into any problems, please feel free to leave a comment. Git