Hosting a Website with Github Pages

Published in

TestingOnProd

4 min readNov 28, 2021

This week I am going to cover how to host a website using Github Pages. It’s super easy to do and if you also own a domain, it only takes a few extra steps to setup your Github Pages website with it!

Getting Started

To get started, you’ll need the following:

Github Account
Website Source Code
Custom Domain (optional)

Step 1: Create a Github Repo

Using your Github account, you’ll want to login and create a new repo that will contain your website. Feel free to use whatever settings work best for you. I will be using the following:

It should be noted that it does not matter if your repo is public or private.

Step 2: Create Website Source Code

Now that we have our repo, you’ll want to have some kind of content for your website that will be displayed to your visitors. You can use anything for this step to create your content, but for this walkthrough we will just create a basic “Hello World” html file.

To get started, let’s go ahead and clone our empty repository

Inside our repo, let’s add the following file:

If you open up your browser of choice and navigate to this newly created HTML file, you should see the following:

Now let’s push this change up to our Github Repo!

We should now be able to confirm that our file was added by checking the repo on Github.com

Step 3: Setup Github Pages

Looking at our repo on Github.com, let’s navigate over to our Github Pages settings:

In this case, we’ll want to use the following settings:

After you click save, you should see something like the following after your page refreshes

We should now be able to use that link to navigate to our Index.html. Make sure you append the filename to the end of the provided URL so that you’re able to view your website. In this case, I will be visiting https://d3ism3.github.io/SampleWebsite/Index.html.

And just like that, our website is now published and publicly available for the world to see!

(Optional) Step 4: Setting Up Custom Domain

If you own a domain, you can setup your Github Pages website to use that instead of the one Github generates for you. In my case, I own my comains through Google Domains. I will be providing a TLDR summary for setting up your custom domain, but if you want more information Github provides useful documentation here.

For this example, I own the domain d3isme.com. So I setup the following record in my Google Domains setting:

Once you have this record properly created, you will now need to revisit your Github Pages settings and add your Custom domain. For this, I will display the settings that I have for a separate repo:

Once your custom domain is properly setup, you should see a message from Github mentioning that your site is published like above. This setting may take some time to fully take affect after you added your custom record to your domain.

Conclusion

Overall, hosting a website with Github Pages is super easy and convenient! Once you’ve done it at least once, it should take you about 5 minutes to do it the next time!

If you enjoyed this post, maybe you’ll enjoy some of my other posts:

I post something new every single week on Sunday! If you want to help out by supporting me, you can also follow me on WordPress, Instagram, Facebook, Twitter, and/or Medium!

Originally published at http://testingonprod.com on November 28, 2021.