Hosting website on GitHub pages for FREE
There are many options for hosting your static website. There are even completely free ones. Among them I've found the Github pages the best free hosting for a static website. This is a instruction on how to host your website on GitHub pages for FREE.
1. Sing Up to Github.com and create repository.
We need to create an account on Github.com and create a new repository of a special type.
- Go to
Sign upand complete the registration.
- After confirming the email address you will be redirected to the page for creating a
Create a new repository.
- Repository name should be:
*github_login*.github.io, where github_login is the User name you have chosen. You can see it also in a field called
Owner. In my case, the repository name should be
- Check the
Initialize with a README
- Repository name should be:
Check if it is working. Navigate to the
*github_login*.github.ioand you must see the greeting page. If you see
404error or anything else, delete the repository and start all over. Check the name of the repository, it should be exactly like your login and followed by
2. Adding HTML website.
Now we need to create a website you want to host on the internet. We can clone this repository to our computer and make changes to it or we can do it in the browser. For demonstration purposes, we will start with a browser.
- On the page of the repository, push the
Create new filebutton.
- Enter the name of the file:
- Copy & Paste the following code:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>How to host a website on GitHub pages for FREE</title> <!-- Stylesheets --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body class="bg-light"> <div class="m-4"> <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-xl-8"> <h1 class="display-1 display-fix">Awesome</h1> <span class="lead">My New and Awesome website hosted on GitHub pages</span> </div> </div> </div> </div> <div class="container py-5"> <h2 class="display-4">Thanks</h2> <p class="lead">Thank you for reading this instruction<br> <a href="https://akun.dev">https://akun.dev</a> </p> </div> </div> </body> </html>
- Commit this file to the repository.
- Open navigate to the
*github_login*.github.io. You will see a newly created website! Congratulations!
3. Buy your domain name.
Adding custom domain name to the GitHub pages is quite easy too. We need to buy one first. You can buy it from whatever registrar you want. I like Porkbun.com registrar.
- Go to Porkbun.com.
- Find a desired domain name. I wanted to buy
+, register, and pay for the domain name you want.
4. Setting up a custom domain name for GitHub pages.
Now we will point your new domain to the GitHub pages.
Navigate to the repository page on Github. It should be:
Scroll down to the
GitHub pagessection and add your newly purchased domain name to the Custom domain field.
5. Cloudflare DNS records.
We need to add new DNS records for our domain. For a number of reasons I like Cloudflare for that purpose.
- Go to the cloudflare.com and register there.
New Site. Type your domain name in the form
- Now we need to delete all the DNS record here.
And add DNS records we need. In the table below is how you need to type them in the empty field. They will be displayed a little differently after you hit the
Type Name Value A @ 220.127.116.11 A @ 18.104.22.168 A @ 22.214.171.124 A @ 126.96.36.199 CNAME www @
Now we need to change
nameserverson our registrar website(where you bought the domain name).
- Go to Porkbun.com. Open
AUTHORITATIVE NAMESERVERS, click
- Delete old records and add assigned by the
- Go to the cloudflare.com and click
Done, check nameservers.
Always Use HTTPS
- choose to minify everything
It will take a sometime (they say up to 24 hrs) to change DNS record.
We are actually done. We deployed a website to the internet without leaving a browser. Thank you!