Creating a Static Website and Hoisting it on GitHub
Quick Summary
So today I was able to launch and host my static website on GitHub and also link it to my custom domain name. The general idea is that by leveraging GitHub I won’t have to pay for any web hosting services and also have unlimited bandwidth. This also drastically simplifies having your own website as you no longer have to manage or maintain a server regularly.
The only downside or restriction is that only static websites can be hosted on GitHub. But with the version control system provided by Git, it would be extremely easy to add new content to the website by simply committing changes and not worrying about taking the pull from the dedicated server.
For the purpose of creating static websites I leveraged Hugo framework. I’m sure there might be other popular frameworks as well but I just started using Hugo because of its simplicity. It allows the user to specify any new content for their blogs by the specifying mark down files. So if I have a good structure in place I can just keep on adding new markdown files corresponding to all the new blog posts or any new experiment that I do.
Motivation
So yesterday I decided that I want to have a place where I can log my WIP (work in progress) projects. I don’t want them to be out in the public on proper blog posts but at the same time I want to keep a track of all the things that I am doing. This is not only going to help me reflect on all the things that I have achieved but it can also be used to create a quick portfolio of all the skills that I’ve gained over time.
To do this I started looking into creating a simple website and hosting it somewhere on the internet. But I soon realize that there’s no short-term cheap hosting options available. I initially decided to create a nodeJS server but soon realize that this would be overkill for just a simple blogging system. Also on the cheaper hosting options available, it was hard to run nodeJS server and there are also several limitations because of which I had to scratch them.
So I started looking into hosting my own website on GitHub and then tried to see if I can link my domain name to the GitHub hosted website. I quickly learned that, this is something which can be done easily. So, I then started looking into popular static site building frameworks, so that I won’t have to build my own HTML pages. For this I came across Hugo. I stated before, the advantage of you Hugo is that the user can specify their content as new markdown files. And when integrated with Git we can simply commit the newly created markdown files to add more content to our website.
Techincal Details
I believe anyone can easily purchase a domain name so I won’t discuss that here.
With GitHub you can convert any get repository into a static site. This option is called GitHub Pages. There are also well documented processes describing how you can link your custom domain name to any repository containing of static website. Simply go into the settings of your repository and there you’ll have the option to specify if this repo is GitHub Pages repo and specify your domain name. To assign your domain name (or subdomain name) to this GitHub Page, you basically have to provide a bunch of GitHub provided IP addresses as aliases on your domain name console. I would highly recommend to configure the www. subdomain to the same location as well.
We use Hugo for generating our static website. Getting up and ready with Hugo is straight forward. The installation can be done with homebrew and one can quickly select from a bunch of freely available themes to quickly generate your static site. There are just a handful of commands which a person has to know in order to get up and running with their Hugo website. And adding any new blogpost is as simple as just adding a new markdown file and in the right location. You can simply call Hugo’s cli command to do this. After you have added your content, you can simply convert all content to static HTML files which will be made available in the public folder. I basically created a submodule within the public folder so that I can just use a different Git repository as my hosted repository.