How to host a static website on GitHub pages for free
Hello, I’m Maduka Nuwantha. In this blog post, I’m going to help you step by step to host your HTML, CSS, JavaScript website for absolutely free with the help of GitHub.
GitHub is a platform for version controlling and collaboration. It helps a group of people to get together and work on their projects from anywhere across the globe. But GitHub doesn’t stop from that. Further, it provides you with a web hosting service through a feature called GitHub Pages. Now let’s see step by step how to host a simple static website with the GitHub pages feature.
1.Create an account in GitHub
First of all, you need to create a GitHub account. It’s essential to get all the services that GitHub has to offer. If you have an account, already you can skip this step.
2.Download GitHub desktop app
GitHub desktop app is the easiest way to upload our code to the repository. After downloading is completed, proceed with the installation process and finally login to your GitHub account.
3.Create a repository in GitHub
After logging in to the GitHub desktop app, you will see an option called ‘Create a Repository on your hard drive’, click on it.
Then a dialog box will appear asking you to enter the details of the repository. When you fill the ‘Repository Name’ field fill it as shown below;
[username].github.io
Replace [username] with your GitHub username.
Important: Naming the repository in the above-given format is crucial because it will announce to GitHub that the specific repository has to be hosted.
Select a folder to create the repository locally on your computer by clicking the ‘Browse’ button or typing the folder path in the given area. We will describe the above folder as your ‘Local Repository’ for the sake of this guide.
Select the ‘Initialize this repository with a README’.
Finally, by clicking the ‘Create Repository’ button, you can create your repository.
4.Adding code to the repository
We’ll assume that you have been developing your website and you have stored everything inside a folder, we will call this folder as your ‘Working Folder’.
Locate to the Local Repository folder, you will see a new folder has been created inside the repository folder with the name that you have given to the repository ([username].github.io).
Select all the files inside the Working Folder (HTML, CSS, and JS files) and copy them into the folder with the name of your repository ([username].github.io) inside the Clone Folder.
5.Commit and publishing the website
After copying the files, open the GitHub Desktop app and, you will notice that the app has recognized the files you added to the Repository folder. It will look something like this:
Now what you have to do is, you have to commit the changes and publish the repository. To do that you have to add a summary and a description (optional) in the given places.
After you add a summary click on the ‘Commit’ button, it will save the changes locally.
When the commit is done, you will see the files disappear from the app.
To upload the code to GitHub, click on the publish button, then it will prompt a dialog box, check the details, and continue with the process.
Finally, to host the website, click ‘View on GitHub’ option to open the repository from your browser and locate the section named ‘GitHub Pages’ in repository settings.
Next, select the branch that you upload the code into (In this case ‘main’) and click save. Click on the URL shown in the GitHub pages section to locate your free-hosted site.
6.Adding a custom domain
A little bonus tip for you, if you feel that the domain name is not suitable for your website, you can change it to a custom domain. First, you have to either buy a domain or there are many ways to get a free domain.
After getting a domain, go to the domain’s DNS settings and, if there is a preset named GitHub pages select it if not, set the values as shown below;
Note: Replace ‘madukanuwantha.live’ in the above picture to your domain name.
Finally, go to the GitHub pages section in your GitHub repository settings and enter your custom domain name in the given space and click save. Congratulations, now you can access your website with your custom domain.
Note: It may take up to 24 hours to set the custom domain to the site.
We have reached the end of this guide. I hope this assisted you with hosting your website.
