How to Create a Portfolio Website: A Step-by-Step Process With Examples

Hugo is one of the most popular static site generators and has been around for almost 10 years. If you have a basic understanding of web development and know how to use command line tools, you’ll be able to create a basic website within a few hours.

I’ll explain step by step how I created my freelance product management portfolio website www.sischreiber.com with Hugo and host it on GitHub Pages.

How is a product management portfolio different from other portfolios?

Step 1: Install a package manager

brew --version

Step 2: Install Hugo via Homebrew

brew install hugo

To check whether the installation was successful:

hugo version

Step 3: Create a new Hugo site

hugo new site myportfolio

Step 4: Basic configuration

baseURL = “https://www.myurl.com"
languageCode = “de-de”
title = “My title”
theme = “”

If you already know your domain, add it to baseURL. You'll find more details regarding the theme configuration later in this article. There are a lot more parameters but my portfolio site only requires the ones above.

Step 5: Add a portfolio theme

Then add the theme to Hugo’s main configuration file. Either via the command line:

echo theme = \”uilite\” >> config.toml

Or by editing the config.toml directly:

baseURL = “https://www.sischreiber.com/"
languageCode = “de-de”
title = “Simon Schreiber — Freelance Product Management Consultant”
theme = “uilite”

The theme folder name must match the theme name in config.toml, otherwise it won’t work.

Step 6: Add your content

data
├── config.json
├── experience.json
├── services.json
├── sidebar.json
└── social.json

In order to add the sidebar with content, you need to create the file sidebar.json in the data folder. The JSON markup for the individual components is documented on the UILite help section. For example my sidebar.json content is:

{
“title” : “Simon Schreiber”,
“highlightedText” : “”,
“description” : “Freelance Product Manager”,
“displayPicture” : “simon-schreiber-img.jpg”
}

If you add a component to the data folder, it will be rendered to your static site. If you delete it, it will disappear.

Step 7: Preview your site with the Hugo server

Now start the web server (with the -D flag to also display draft content if needed):

hugo server -D

Once the server is up and running you can preview your website at http://localhost:1313/.

Step 8: Google Analytics tracking

For Google Analytics v3 with analytics.js:

googleAnalytics = “UA-PROPERTY_ID”

For Google Analytics v4 with gtag.js:

googleAnalytics = “G-MEASUREMENT_ID”

Afterwards you have to insert in the HTML head:

<head>
{{ template “_internal/google_analytics.html” . }}
{{ template “_internal/google_analytics_async.html” . }}
</head>

For data protection reasons (GDPR in the European Union) you should familiarize yourself with Hugo’s privacy setting and consider a consent banner like Cookiebot.

Step 9: Build your static pages

hugo

You’ll find the output in the ./public/ directory:

All files within the public directory need to be pushed into the GitHub repository.

Step 10: Create a GitHub repository

Now create a new public repository. Your repository must follow the naming convention:

<username>.github.io

This will also be the URL to reach your site. You can directly add a README file so you can configure GitHub Pages without having to commit files in the next step.

Step 11: Configure GitHub Pages

Be aware that it can take up to 20 minutes for your site to be reachable under <username>.github.io. Because your main branch only consists of README.md by now, it’s the only content you will see.

Step 12: Commit and publish your static pages

Step 13: Buy a domain

Step 14: Add your domain in the GitHub repo settings

Make sure that you add the domain first to GitHub pages and in the next step configure the CNAME record at your domain registrar.

Step 15: Add CNAME record to your domain

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Please check out the official documentation if you get stuck. This is what my entries look like and work:

Step 16: Open your site!

Freelance Product Manager www.sischreiber.com