GitHub is not just a great tool for storing and sharing your code. GitHub offer free web hosting for your HTML, CSS, and JavaScript projects! This is more than enough for us to get a static HTML website live and running on GitHub Pages.
What is GitHub Pages?
GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.
You can host your site on GitHub’s github.io domain or your own custom domain.
In this article we’ll show you how to get setup in order to publish and share your own static HTML website on GitHub using the GitHub Desktop app.
Getting started with GitHub Pages
1) Create a GitHub account
Create a GitHub account by clicking here. Don’t worry it’s completely free 🙂
2) Download and install the GitHub Desktop app on your PC
Open the downloaded application file and continue through the installation process as required with your computer’s operating system.
3) Create a new GitHub Repository
Before we upload our code to GitHub we first need to make GitHub Desktop aware of our project files. We do this by creating a new Repository folder, then copy our website files to this new folder.
Open up the GitHub Desktop app and click the “Create New Repository” button like in the image below:
When the “Create a New Repository” dialog window appears, fill in the “Name” text input as:
[username].github.io
Replace [username] with the url you would like to use for your website.
The “Local Path” text input is where your repository will live on your computer; this is not where your website files currently reside on your computer’s hard drive. GitHub Desktop needs to create a new, empty folder.
We’ll need to copy your site files over later, but for now, select a folder such as /Sites in your home folder. This will create a new folder inside the /Sites folder with the name of your repository, which will look like:
/Sites/[username].github.io
Leave all the other options in the form at their default settings and click the “Create Repository” button. For now we just want to create the folder which GitHub Desktop will recognize as a folder it can work with. For the sake of the guide, let’s describe this new folder as your GitHub Repository folder.
After your GitHub Repository folder has been created by clicking the “Create Repository” button, the GitHub Desktop app should look something like this:
4) Copy your files to the new Repository folder
Let’s say up until now you’ve been working on your website in a folder located at /Documents/my-site; we’ll describe this as your working folder. Within this working folder there’s probably some files and folders named index.html, /css, or /javascript. What we need to do is copy everything from the working folder over to our new GitHub Repository folder.
In the previous step, we created the GitHub Repository folder inside the /Sites folder with the name, [username].github.io. So, this means the GitHub Repository folder should be located at /Sites/[username].github.io.
Copy everything in your working folder (/Documents/my-site for example) into your GitHub Repository folder (/Sites/[username].github.io).
The GitHub Desktop app should now look something like this:
With all our files in the GitHub Repository folder, we’re ready to commit our files!
To “commit” files means to take a “snapshot” of the files and folders in their current state. By doing so, we get them ready to be pushed up to a repository on GitHub.
Optionally, you can add more details about the commit in the “Description” text box. Usually you’d want to include things like what changed; maybe you fixed a bug or added some new content. It’s great to have these notes available for other developers or even future you to make sure you know why you made those changes oh so long ago!
Once the “Summary” and optional “Description” fields are filled out to your liking, click the “Commit to main” button!
5) Now it’s time to publish your website
After clicking the “Commit to master” button in the previous step, you may be wondering:
What just happened? My files are gone and the app is empty now!
Don’t worry! In the bottom left corner of the GitHub Desktop interface there’s a little indicator that your commit was successful.
Now that our files are committed, this allows us to push our commit to GitHub!
To “push” files means to upload the committed files in their current state to a repository on GitHub.
Find the “Publish repository” button along the top of the GitHub Desktop interface.
Go ahead and click this to upload your website files to GitHub.
When the “Publish Repository” dialog window appears after clicking the “Publish repository” button, it will first prompt you to sign-in to GitHub if you haven’t yet already.
Click the “Sign In” button to show the “Sign In” dialog window; fill in your Username and Password and click the “Sign In” button to complete the process. You should now be logged in and good to proceed!
Now that we’re signed in to GitHub, go ahead and click the “Publish repository” button to begin the upload process. The “Publish Repository” dialog window will appear with a last few options for you to choose from before placing your website live.
All the options in the form are fine as-is except the “Keep this code private” checkbox; this needs to be unchecked in order for you to share your site with friends and family.
Click the “Publish Repository” button to send your files up to GitHub!
Now, in your browser, go to your new GitHub repository page to make sure your files made the journey to their new home:
6) Using custom domain for GitHub pages
Go to your GitHub profile and inside the repository settings of the repo that we created earlier. Under “Custom domain”, add the domain name you want to use.
Setting “custom domain” creates a file named CNAME in the same repository. Don’t delete it.
Now we’re gonna set custom dns records for our domain through the domain registrar dashboard. This step is specific to your domain name registrar (like GoDaddy, Domain.com, Google Domains, etc). All you need to do is set A & CNAME records for the selected domain.
For A record, set 185.199.108.153, 185.199.109.153, 185.199.110.153 and 185.199.111.153. To redirect www subdomain to the original domain, add a CNAME record with your GitHub pages profile URL with a .(dot) in the end, for example, ‘YOUR-GITHUB-USERNAME.github.io.’.
That’s it, both www.your-domain.com and your-domain.com will now go to your selected GitHub pages site (may need to wait up to 24 hours).
