You have finished creating your HTML website and you're feeling proud of your hard work. But there is one thing that is still missing: you have no idea how to publish your website.
In this tutorial, you will learn how to publish an HTML website using two popular platforms – Netlify and GitHub.
Before we start, make sure that you have a GitHub account because you will need to host your repository (your source code) on GitHub. Without it, you won't be able to publish your HTML website following this tutorial.
How to Publish a Website on Netlify
The first method we're going to explore is how to publish your website on Netlify.
Netlify is a platform for hosting websites. It is easy to host sites on Netlify as you don't need to configure it manually – and best of all, it's free. If you haven't signed up for an account, now is a good time to do so.
Here's the step-by-step process of publishing your website on Netlify:
Step 1: Add your new site
Once you've logged in, it will take you to a home dashboard. Click the New site from git button to add your new website to Netlify.
Step 2: Link to your GitHub
When you click the New site from git button, it will take you to the "Create a new site" page. Make sure that you push your repository on GitHub so that Netlify can link to your GitHub account.
Click the GitHub button as shown in the screenshot below:
Step 3: Authorize Netlify
Next, click the Authorize Netlify by Netlify button. This permission is needed so that both Netlify and GitHub can connect.
Step 4: Select your repository
Once you grant permission to Netlify, you can see a list of all your repositories. Select your website to publish. You can find it by either scrolling down the list or using the search bar to narrow down the list.
Step 5: Configure your settings
After selecting your website, you will be prompted to configure the settings for deploying the website. Since your website is simply a static one, there's not much to do here. Just click Deploy site to continue.
Step 6: Publish your website
Your website is now ready to publish! Netlify will do the rest of the work for you, and it will only take a minute or so to complete the process.
Now you are done! Your new website is published, and you can view it by clicking the green link.
Right now, your URL looks random, but you can edit it by clicking the Site settings button and then the Change site name button.
Congratulation on publishing your first new website! Now we'll learn how to publish a website with GitHub.
How to Publish a Website on GitHub
The second method we'll look at uses GitHub to publish your site. GitHub is a platform for storing, tracking, and managing project source code. It is also where you can publish your HTML website – and like Netlify, it is free to host here.
Here's the step-by-step process of publishing your website on GitHub:
Note: You can only publish your website on GitHub if you set the repository's visibility to public. If you want to deploy a website while it is private, upgrade your account to Pro or use Netlify to host there instead.
Step 1: Go to your website's repository
After you've logged in, go to the repository on the left sidebar and select the one you want to publish.
Step 2: Select the settings
In your repository, click the Settings link, and it will take you to the repository's settings page.
Step 3: Go to GitHub Pages
When you're in a repository's settings, scroll down a bit until you see the Pages link on the left sidebar. Click it, and it will lead you to GitHub Pages.
Step 4: Select the branch
In the source section, click the dropdown and select the master branch and save it. Depending on how you name it, it can be master or main.
Step 5: All done
And you are done! Your website will be published, and it will take only a minute or so to complete the process. Refresh the page, and you will see a link to your newly published website.
I hope you've found this tutorial helpful. You have learned how to publish your HTML website with Netlify and GitHub. Now you can go ahead and show the world of your incredible work.