How Did I Developed This Site

Aug 22, 2021 · 3 min read · hugo github web hosting html  ·
Share on:

This article describes how I created this website and hosted it freely.

Preface

Whenever we hear the term ‘blog’, we think of wordpress or similar types of platforms. There is no problem with hosting your blog or website on them, but in terms of design or customization the options are very limited over there. Now being a networking guy I had no idea of how to create a static website and host it freely. The idea came from one of Ivan Pepelnjak’s interviews, whom I deeply admire.

Tools Required

The tools used for this site are Hugo and Github. Through Hugo I generated the codes for this website while via Github I maintained the repository and ultimately hosted the website.

Installing Git And Setup Github

  1. First, please install git appropriate to your OS.
  2. Create a Github account with the exact name that you will be using your website name. Note, this point is very important as to host a website via github, the website name has to be the same as the github account name and the repository name.
  3. After creating the account, login to github and create a public repository as the same name that you have used as account name/website name. By this way your website URL would be public-repositary-name.github.io

Installing Hugo

To install and set up your pc for Hugo, please use their documentation. Like, I am using linux mint, so I have used brew to install Hugo.

Develop The Site

To build the website now first create a directory and create a new site with hugo inside that directory.

1mkdir yourSiteName
2cd yourSiteName
3hugo new site yourSiteName
4cd yourSiteName
5git init

Choose A Theme

Browse through the themes catalog and select a theme. Clone the repository of that theme inside the themes directory of your site.

1git submodule add <github-link-of-the-theme-repository> themes/<theme-name>
2cp -a themes/<theme-name>/exampleSite/* .

After this, you will need to edit the content of the files inside your site directory as per your need. This below tutorial is a great playlist to learn how to develop sites using Hugo.

Host The Site Locally

Before publishing you can host the site locally via Hugo. Actually it is more easy to develop the site while keeping it hosted locally as any change to the files makes instant change on the site as well.

1cd yourSiteName
2hugo serve

To connect to the locally hosted site, browse to the link http://localhost:1313

Build The Site

Once the the devlopment is completed, to generate the files that you will need to upload to any hosting platform(in our case Github) please use the below code.

1hugo

Now you will see that a directory named public has been generated inside your site directory. This directory contains all the files that you will need for hosting.

Upload The Files In Github Repository

The easiest way to maintain the site is to add the public directory as submodule with your public Github repository. We can do that by,

1cd yourSiteName
2git submodule add -b main https://<url-of-your-public-repository> public

and then, go inside the public directory and push it to your public github repository.

1cd public
2git add .
3git commit -m "Uploading the website"
4git push -u origin main

And that's it, your website is up and ready on the internet. Visit it at: https://yourSiteName.github.io