Hugo Portfolio Website

A portfolio website made with Hugo

I created my portfolio website using Hugo and UIKit, it serves as an online resume containing all my work.

This has been created as a theme so that others can use and adapt it.



Homepage Screenshot

The homepage provides the basic information about you, including links to social media, skills you have, things you've done and your education. This page makes good use of UIKit grid and cards for organising all the information and ensuring it is responsive to work on mobile devices. The hackathon section of this page uses code from to ensure that the hexagons tile correctly.


About Screenshot

This is the page for a description about you, along with non-technical skills. This uses UIKit grid and cards in a very similar way to the homepage.


If you want to have a blog, this page will serve that purpose. I may end up changing this to a column view rather than a column view in the future, but for the present I think it looks fine.


This allows you to describe the projects you have created in order to showcase them to people looking at your site.


This provides a simple contact form which allows users of the site to send you a message. I implemented this using as it has a generous free plan and is very simple to integrate.


Integrating into your site

To install this theme, first create a themes folder in your site with

mkdir themes

Then move into this directory with

cd themes

The repository can then be added either by cloning or adding as a submodule

# Cloning
git clone hugo-developer-portfolio
# Submodule
git submodule add hugo-developer-portfolio

In the config.toml file in your site directory add


Creating a new site

If you just want to get set up with a new site, you can start from the Example Site I have provided. To do this:

  1. Cut the exampleSite folder out of the theme and paste it wherever you want
  2. Create a theme directory within the exampleSite folder
  3. Paste the theme into this directory, ensuring is has the name hugo-developer-portfolio


For the content management system I have used Forestry CMS. This provides great flexibility for adding and editing content and integrates great with Hugo as it commits markdown files directly to GitHub.


This is a highly configurable site, and as such, it will be unlikely that it will work with your existing site.


Config.toml provides the basic structure of the site, it contains a range of sections

Base information

In the example site, the base information looks as follows

baseURL = "" # The URL of your site
languageCode = "en-gb" # The language you want to display the site in
title = "Sam Robbins" # The title you want to appear in the address bar
theme = "hugo-developer-portfolio" # The theme, don't change this


These are the essential plugins required to run the site, but you can add more if you need

  # CSS Plugins
  URL = ""
  # JS Plugins
  URL = ""
  URL = ""


This specifies the titles for the entries in the taskbar. name can be changed to show a different name. URL should not be changed in most situations as the pages will exist at the old URLs rather than the new ones, so this will result in dead links.

# navigation
  name = "About"
  URL = "about"
  name = "Blog"
  URL = "blog"
  name = "Portfolio"
  URL = "portfolio"
  name = "Contact"
  URL = "contact"


This contains the other configuration information

home = "Home" # What you want the homepage to show up as in the menu bar
# Meta data
description = "The website of Sam Robbins, 2nd Year Computer Science Student at Durham University"
author = "Sam Robbins"

  formAction = "<Insert code>" # Add your formspree URL here to get emails

  # This contains the contact information for the footer
  email = ""
  address = "Durham, UK"
  googlemaps = ""


This file is stored in data/homepage.yml. It determines the content of the homepage and contains many sections


This is the text in the hero section, change it to whatever you want

  title: Hi! I’m Sam


Put all of your social links here and they will appear in the social section

  twitter: ""
  linkedin: sam-robbins-gb
  github: samrobbins85
  gitlab: ""
  facebook: ""
  instagram: ""
  gmail: samrobbinsgb


  • enable can be used to hide this section
  • content determines what text is shown here
  • btnText changes the text on the button
  • URL changes the URL the button directs to
  enable: true
  content: 2nd Year Durham Computer Science Student
    btnText: Find out more
    URL: "/about"


  • enable can be used to hide this section
  • title determines the text both under the image and in the modal
  • logo determines the image that shows up
  • description is the text that appears inside the modal
  enable: true
    - title: JavaScript
      description: Details coming soon, contact me if you want to know more


  • enable can be used to hide this section
  • logo determines the image that shows up
  • title is the main text that appears in the card
  • company is the secondary text in the card
  • duration is the tertiary text in the card
  enable: true
    - logo:,q_auto/v1591793271/logos/logos_google_id6v9a.svg
      title: init.g
      company: Google
      duration: November 2019


  enable: true
    - title: Hack Cambridge 2019
      description: Climate change simulator
      url: javascript:void(0)