In another post Static Web Hosting Using Firebase, we saw how we used Google Firebase to publish a static website onto the internet for absolutely free.
Google Firebase is a great option to host your static websites but for people who have less experience using the terminal and command-line interface, this can be a little intimidating.
For developers and users who don't want to use the CLI to publish their website, there is another great option where we can host a static website on the internet.
This option is Github Pages. Github offers a great way to host a website using its user interface. Github pages offer free web hosting of static websites and in this free plan, you can also add custom domains to your websites.
This offering makes it slightly better than Google Firebase.
What is a static website?
Now we know that Github Pages offers web hosting for static websites. Let's understand what static pages are.
A static website is a website that is made of three components:
- HTML
- CSS
- Javascript
These comprise together to make beautiful web pages that we see in our browsers.
Github Pages will not be able to host dynamic websites like PHP, C#, JAVA, RUBY etc.
Adding Your Website Code To Github
To use Github Pages, we first have to make sure that our website code i.e. HTML, CSS and JAVASCRIPT files to Github.
Go to Github website and Sign Up.
Create New Repository With Github
Click on the button "New" to create a new repository.
Give a repository name of your choice.
For Github Pages to work, you would have to keep your repository as "Public".
Select the "Add .gitignore" checkbox.
Use the "Add File" button to upload your website code (i.e. all the HTML, CSS, and Javascript files) and upload it to the newly created repository.
Setting Up Github Pages For Your Repository
Once you have uploaded all the files, it's now time to set up Github Pages for this repository.
Click on the "Settings" button to open settings for this repository.
Go to the "Pages" tab once you are in the settings
Select the branch that you have and want the source code to be hosted from.
In our example, we only have one branch. We will use "master" as the selection and click on "Save".
Once you have saved the changes, Github Pages tells you that your website is ready to be published to a Github URL.
When we browse on this URL that Github has provided, we can see that our website has been hosted and published successfully and we also got a free domain from Github.
If you want you can keep this URL and use it as your website.
Adding Custom Domain To Github Pages
There may be a requirement that you need a domain that is personal to you or the website that you created and you don't want to use the generic URL that Github Pages gave you when you hosted the website.
In this case, we can add our own custom domain to this hosted website using Github Pages.
On the same page, if you scroll down, you can see that you have an option of adding your own custom domain in a text box and "save" the changes.
When we click on the save button, we see that Github gives us a warning message like below:
Github is saying that the domain that we have given does not resolve to the Github Pages server.
Github also tells us that we need to add an "A" record pointing to Github Pages IP Addresses or an "ALIAS" record pointing to "the domain that Github gave your website"
The next steps for you would be slightly different depending on where you bought the domain from and who your domain registrar is.
In my example, I bought this domain from "Namecheap".
So I log in to "Namecheap" registrar website, and I add an "ALIAS" record as Github suggests.
The changes may take some time (up to a day) to reflect back, but now when you visit your domain, you should see your website that you hosted with Github Pages.
