Posted March 31, 2021 Zachary Fetters

How to Build and Deploy Your Static Site, Fast and Free!

github
netlify
webdev
html

In this modern day of web development and deployment, there are (seemingly) a million different ways to design, build, and deploy a static or dynamic website. Many of these ways are simply not suitable or appropriate for a simple static site, like a web portfolio or simple Jekyll blog. Plus, not everyone has enough money or reason to afford a domain, web host, and CMS. However, by combining the power of GitHub Pages and Netlify’s build and deploy tools, you can launch your static site within a day and completely for free!

Step 1. Getting Started with GitHub Pages!

Assuming you’ve already designed or have an idea of what your static site will look like and do, all you need now is somewhere to host it! Luckily, GitHub has the ability to not only host HTML/JS/CSS code, but even build and deploy it for public view via GitHub Pages, their static site generation and deployment service. GitHub Pages is very versatile, supporting both static web code out of the gate as well as the Jekyll framework for turning Markdown text into static web pages. You can read more about Jekyll from their website here, but I am going to focus on deploying a site using static web code.

Now, on to the nitty-gritty! First, you’ll need to create a new repository on GitHub so you have somewhere to host your site’s files. I’m going to assume that the majority of people reading this know how to create a repo, but for those who don’t, please follow these steps:

  1. Log-in to your GitHub account. If you don’t have one, make one here.
  2. Once you’ve made or logged in to your account, find the button labeled “New” on your dashboard, or visit this link to make a new repo.
  3. Give your new repo a name, and make sure to make it public so that Netlify can access it later!
  4. Feel free to start with a README file if you plan on uploading your web files via the web interface.

Screenshot of the GitHub repository creation dashboard

Now that you’ve created the repo that’ll hold your site files, you’ll need to commit them to your repo. This can be done multiple ways, with the quickest being to upload them directly to GitHub via their web upload system. To do so, simply click the “Add file” button and navigate down to the “Upload files” button, once you click that, you’ll be navigated to the web upload interface where you can upload your static site files.

Screenshot of the GitHub web uploader

Once you’ve uploaded all of your files, make sure to add an informative commit message, then click “Commit changes”. Now your files have been uploaded to your repo! You are now exponentially closer to launching your site to the world!

Screenshot of the GitHub repo homepage

(I recommend that if you plan on making future updates to your site, that you consider downloading and learning how to use the Git CLI or the GitHub Desktop application. Uploading files directly to your repo from the web isn’t always reliable and could result in commit overlaps and other nasty issues!)

Lastly, visit your repo’s settings page and scroll down until you see the “GitHub Pages” section. To enable GitHub Pages, select the drop-down under the “Source” subsection, pick your main branch, then click save. You don’t have to worry about the “Theme” section unless you’re running a Jekyll site.

Once GitHub has finished building and deploying your static site, if you re-visit the settings and scroll back down to the GitHub Pages configuration section, you should see the URL of your new static site! If you visit this URL, you should see the web files you uploaded earlier.

Now, you may have noticed that this seems to cover everything you’d need for a simple, static site. You have options to use SSL, add a custom domain, and more! In most cases, you’d be right and you would probably not even need to mess with Netlify on top of GitHub, but if you are looking for CDN edge servers for quicker access, plugins to improve your site, and other service integrations, Netlify is the prime choice! Plus, GitHub Pages has one fatal issue, it can sometimes take anywhere from a few seconds, to a few minutes or even longer for your changes to be reflected to the public-facing site. Netlify can support near-instant public deployment once a site has been built.

Step 2. Integrating with Netlify!

Now that you’ve launched your site using GitHub Pages, it’s now time to integrate your repo with Netlify to use their amazing web deployment and building features!

First, create an account or log-in over on Netlify’s site.

Once you’ve made an account, you’ll be navigated to your user dashboard. Find a button labeled “New site from Git” and click it.

Netlify user dashboard

Once you’ve clicked the button, you should see a page labeled “Create a new site.” Under the “Continuous deployment” section, click the GitHub button to link GitHub and Netlify together. This will ensure that any changes you make to your web files on GitHub will automatically be deployed on Netlify, hands-free!

Site creation page

At first, you will not see your site repo, that’s because you haven’t added Netlify to your repo’s integrations. Click the “Configure the Netlify app on GitHub” button near the bottom of the page and go through the process of linking Netlify to GitHub.

Alt Text

Once you’ve linked Netlify to GitHub, you now need to configure your site settings before it can go live with Netlify! Unless you need some sort of custom configuration, just click the “Deploy site” button on the “Site settings” page to continue.

Alt Text

Now, Netlify will start to deploy your site and prompt you to add a custom domain to your site. This is not required, but is heavily recommended if you plan to use your site as a professional portfolio or business site!

Assuming everything worked out, you should now have a deployment URL that you can visit to see your site on the Web!

Alt Text

Step 3. Add Some Bling to Your Site!

The following steps are completely optional and are not required for the basic deployment of your site, however, they are heavily recommended!

The first thing I would recommend to spruce up your new site is a custom domain! Luckily for you, Netlify also acts as a domain registrar and can provide a custom domain, at charge, to you natively within the dashboard. To get a custom domain, click the “Domain options” button on your site’s dashboard and click the “Add a custom domain” button that appears under your domain settings page. Now, all you need to do is pick a domain, register it with Netlify, and they will handle the DNS configuration automatically. Within 24 to 72 hours, your domain will be ready to use and automatically connected to your site.

If you’re a hands-on person in regards to DNS configurations, don’t worry! Netlify allows for custom DNS configurations within your domain settings page!

Now, a custom domain is cool and all, but what is a shiny domain without an SSL certificate? Netlify offers automatic SSL certificate assignment via Let’s Encrypt. These certificates are free and Netlify handles the configuration and renewals automatically!

Lastly, let’s talk plugins! Netlify has a suite of open-source, community plugins that can do everything from HTML/CSS/JS minification to running build checks to see if your site is accessible to those with disabilities. To access these plugins, simply visit the plugin directory via the “Plugins” tab. Find a plugin you want and click the “Install” button. Pick your site as the installation source and ta-da! The plugin is now installed on your site and will run on the next deploy. If you want to configure the plugin, click on the “Options” button on your plugin of choice and then click the button labeled “Read plugin docs.” This will take you to the assigned documentation page of the plugin that may provide the various configuration options you can use to customize the plugin’s behavior.

To learn how to set a custom configuration for a plugin, please read the documentation on file-based configuration by Netlify.

Final Remarks!

Assuming you had no hiccups during this process and you’ve made it this far, congrats! You have now built and deployed your static site to the web! The road from here on is now easier for you, courtesy of the amazing capabilities of GitHub Pages and Netlify. Make sure to read the Netlify documentation for more information about what you can do for your static site as Netlify has WAY more to offer than what I glossed over in this guide.

This guide is not meant to be a comprehensive guide for publishing your static site! As with all things in web development and deployment, YMMV (Your Mileage May Vary!)

If you liked this guide, please consider leaving a like! If you have any questions or concerns, please leave a comment and I’ll try to get back ASAP!

(NOTE: Despite how much I’ve sang my graces about GitHub Pages and Netlify, I am not sponsored or compensated by them for the creation of this guide (although I wish I was!) I’ve simply used them for a long time and they have made my life significantly easier in terms of publishing static sites.)

Want to leave a comment?

I don't allow public comments on my blog because moderation is a pain and I have things to do, ya' know? If you want to leave a comment about my post, head on over to my contact page and get in touch with me there!