Contents

Creating a portfolio website using Hugo

Motivation

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.

Requirements

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:

  • Hugo
  • Git & Github
  • Netlify
  • Custom Domain [Optional]

Setup

  • Installing Hugo

    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
    

Theme installation

First, choose a theme. Now, this method of installation can vary from theme to theme but the most recommended method for most themes is using git submodules.

1
git submodule add https://github.com/sunt-programator/CodeIT.git themes/CodeIT

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.

1
cp themes/CodeIT/exampleSite/config.toml .
Note

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

1
cp -r themes/CodeIT/layouts .

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 
    

Creating posts

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 content/posts directory.

1
hugo new posts/hello-world.md

For 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.