Creating a portfolio website using Hugo
Since I just created this portfolio site using Hugo, it’s best that I jot down whatever I learnt while working on this so it might help someone who needs to create something similar to this. The steps written here are valid not only for portfolio sites but for any kind of static sites as well.
This site was made using Hugo, which is a framework for creating static sites. It is made with Golang and is open sourced. There are many SSGs (Static Site Generators) out there - Gatsby, Next, Jekyll are some of the ones I can remember. The best thing about Hugo IMO is their theme selection, I did not want to design a website from scratch so Hugo’s themes were a lifesaver, thanks to all the amazing people who created them because most of the themes are pretty well-designed and responsive. After a lot of searching, I decided to go with the CodeIT theme.
The current version of this site is created with Hugo as I have mentioned before and it is hosted on Netlify, which is a great site to host your static site for free. Netlify has Github auto builds, which means you can configure your website to be rebuilt the moment you commit code to your Github repository. There are other hosting providers too - Github Pages, Vercel and Heroku but for the sake of this tutorial, I’ll be using Netlify to host the site.
So, a summary of the requirements:
- Git & Github
- Custom Domain [Optional]
The easiest way to install Hugo is downloading a release for your operating system from their repo. Alternatively, if you are on an Arch based distro, Hugo is in the official repos and can be installed using
pacman -S hugo
Once you have downloaded the Hugo executable, add it to your path and verify the installation by running
hugo version. If all goes well, then you should see something similar to this:
hugo v0.81.0+extended linux/amd64 BuildDate=unknown
Create an account on Netlify
Just create an account on Netlify for now, sign in with Github preferably since we will be needing that later. We will be setting up a project and automatic deploys later on.
Setting up the project
1 2 3 4 5
hugo new site example #Put whatever name you want instead of 'example' cd example git init #Initializing a local git repo gh repo create #Create a repo on github using the github-cli # Alternatively create a bare repository from the github website and set remote origin
This command will add the CodeIT theme repository as a submodule ( a git repo within a git repo). You have to set the
theme key in your hugo config file to ‘CodeIT’. But, I’d recommend copying the example config file in the themes/CodeIT/exampleSite folder since this theme has a lot of configuration parameters.
If you want to edit the HTML layout files of the theme, copy the layouts folder from the themes/CodeIT folder to the root of your project, since the layout folder in root of the project always overrides those in the themes folder
This will allow you to edit the HTML files and add some custom content or pages in addition to the default theme layout.
Updating the theme
Since the theme is an entirely different repository, it is advisable to keep it up to date with its remote. To do that, use the command:
1 2 3 4 5
git submodule update --remote # This will pull the changes from the remote repo of the submodule to your local repo # To push it to your repo, just commit and push git commit -am "updating submodules" git push
There is a generic command for creating a hugo post, all the pages in the site will be arranged in some way in the
contents directory. Running this command will directly create a new post with some metadata in the
CodeIT theme, the posts need to have their individual folder within the
content/posts directory. So, the above command will need to be modified to this:
hugo new posts/hello-world/hello-world.md. Edit this file, add whatever content you want and then run
hugo serve to spin up a hugo development server on your local machine. Go to localhost:1313 in your browser and you’ll be able to see your post at localhost:1313/posts.