• Post last modified:June 11, 2020
  • Post Comments:0 Comments

Hosting a Static Webpage Using Netlify, GitHub, and a Custom Domain

Introduction

If you’re like me and have very little web development skills outside of the course you took in college that covered the basics of HTML, CSS, and JavaScript, you probably lie awake at night cursing yourself for not being able to create and manage a beautiful start page for your server’s applications and bookmarks like some of the folks over at reddit’s r/startpages subreddit do.

Luckily for us both, there’s an easy (and free!) way to host webpage files from people who have shared theirs (granted you have enough knowledge to tweak them with your own bookmarks and URLs) using a free web service called Netlify. Let’s take a look at how to do this.

Note: This guide utilizes Netlify, an external service, to host and serve your webpage. If you’d rather host your webpage on your own server, keep an eye out for an upcoming post where I’ll show you how to do that using NGINX Proxy Manager.

What We’ll Need

There are a few things you’re going to need to make this happen. Almost everything below is free to use with the exception of a custom domain, which I’m going to assume you’ve already purchased before reading this tutorial.

I’m working on a separate version of this guide for those who prefer to use free subdomain/dynamic DNS services like Duck DNS, so stay tuned if that’s your thing.

  • A custom domain (I’ll be creating a site using a subdomain, but you can use your base domain if desired)
  • A free Cloudflare account
  • A free Netlify account
  • A GitHub account and basic working knowledge of how to use it
  • Ability to create your own basic static HTML page or files from someone with a page you’d like to replicate (I’ll be using this user’s SUI project that’s been floating around on reddit the last day or two)

Connecting Your Domain to Cloudflare

In this guide I’m going to be utilizing Cloudflare’s free DNS capabilities to create subdomain records and point them to an address that’s hosting my webpage’s content.

Netlify does have its own DNS capabilities that would eliminate the need to use Cloudflare, but I – and I’m going to assume you as well – already have my domain connected to Cloudflare to manage my reverse proxies and don’t feel like complicating things by switching services.

You’re welcome to use a service other than Cloudflare, but for the purposes of this guide, that’s what I’ll be referencing.

If you just purchased your domain and haven’t connected to Cloudflare yet, see their official documentation on how to do so or follow the “Registering a Domain and Connecting It to Cloudflare’s DNS Service” section in this post.

Prepping Your GitHub Account

As I’ll cover in further detail later, the best part about Netlify is that connects to your GitHub account and uses the files from a repository that you specify to serve your webpage.

This has a couple advantages:

  • Your files are automatically backed up due to the nature of it being hosted on GitHub
  • You can easily access/edit your webpage from any device as long as you have internet access
  • You can share your files with others or leverage files others have shared from their own repositories

I’m not going to cover how to use GitHub in this guide – what I will assume is that you have a GitHub account and repository created that has an “index.html” file, which is where we’ll point Netlify to.

You can utilize GitLab or Bitbucket if those are your preferred Git providers as well – but the steps below will assume you’re using GitHub.

As I mentioned, I’m going to being using this webpage as an example for this guide, so I’m going to clone the repository into my own GitHub account and call it “Sample Webpage”.

Configuring Netlify

Now that our domain and GitHub accounts are ready, let’s go ahead and configure Netlify to host and serve our webpage.

Start by navigating to Netlify’s homepage and creating an account. Once you’ve done that, click the “New site from Git” button.

Here it’s going to ask you to choose your Git provider. Select “GitHub” and walk through the steps to connect it to your GitHub account.

You will eventually come to a page where it will ask you to specify a repository for Netlify to read. I’d like to make note here that we will not be giving Netlify access to every repository in our GitHub account – only the ones you specify. This should hopefully eliminate any security concerns you may have about connecting to a GitHub account that has access to sensitive repositories.

You will eventually be redirected back to the Netlify site and asked to choose one of the repositories you provisioned access to. I’m going to choose the “Sample Webpage” repository I cloned earlier:

On the next page, change the owner and branch to whatever setting you’d like (I kept them at the default settings) and add a “/” forward slash in the “Publish Directory” field. This tells Netlify to look for the “index.html” file in the base directory.

Click the “Deploy site” button.

Configuring Netlify’s Domain Settings

The next step is to connect Netlify to the domain or subdomain that we’re going to be using. Click “Set up a custom domain” in the middle of the next page.

Enter the domain or subdomain that you’d like to access your webpage from and click “Verify”. In my example, I’m going to use sample.shiftfourteen.com.

It’s going to ask if you’re the owner. Assuming you are, click “Yes, add domain”.

The next page will bring you to your site’s domain settings. Note that section that says “Custom domains”. In it is a default subdomain name that Netlify has created for your site (mine is frosty-hopper-5736e4.netlify.app), with a reference to your domain or subdomain below it.

Before we can proceed in Netlify, we need to configure a CNAME record for our subdomain (or A record if you’re using your base domain) in Cloudflare’s DNS settings that points to the custom subdomain name Netlify gave us.

Create the record in Cloudflare, which should look something like this:

Head back to the Netlify setup and click the “Verify DNS configuration” button in the “HTTPS” section at the bottom to confirm your Cloudflare configuration is correct and generate a TLS certificate through Let’s Encrypt.

It may take a few minutes for Netlify to recognize Cloudflare’s updated records, so keep refreshing as needed until it detects the updated settings.

It may take a few minutes, but once it verifies your DNS configuration is correct and the domain/subdomain is pointing to Netlify’s custom subdomain address, it will give you the option to “Provision certificate”. Click the button.

Once completed, a certificate will be displayed and HTTPS enabled on your new site.

Accessing Your New Webpage

Assuming you followed the steps above correctly, your new webpage should be accessible by visiting your new subdomain and the connection should show as secure.

Updating Your Webpage

Your new webpage can now be updated by changing the files in your GitHub repository. You can manually tweak the files within GitHub if you’re that kind of person, or you can clone, pull, and push them from your favorite text editor.

When a push request is received within the GitHub repository (indicated the files have been updated), Netlify will be notified immediately and will update your live webpage with the changes.

Monitoring Deployment Status

Now that your webpage is live, Netlify provides a “Deploy status badge” that I typically stick in the top of my GitHub repository’s README.md file. This provides the ability to monitor the status of the webpage, which will change statuses when changes are made to the GitHub repository as Netlify works to update the webpage.

To add this, navigate to the General settings of your site in Nelify and scroll down to the “Status badges” section. There you will find the code for the status badge that can be pasted into your site’s README.md file.

Once pasted into your README.md file, your GitHub site should look like this:

Conclusion

Your site should officially be up and running and ready to modify/tweak to your liking.

As we’ve discovered, Netlify is a great service and has a lot more capabilities and functionality than I’m able to cover in this guide. If you’re a web developer and have used it more extensively and are willing to share any tips or feedback, please feel free to do so in the comments below.

Otherwise, comment if you have any questions or feedback.

Enjoy!

If you’ve found this or any of the other posts on SHIFT14 helpful, please consider supporting the site through a one-time PayPal donation or ongoing support through Patreon. My goal is to continue providing in-depth guides for the technical community and the support helps justify the time and resources spent doing so.

Leave a Reply