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?

Portfolios are primarily used in creative professions to showcase creative work. For example in web design or photography. However, portfolio websites are also suitable in product management or product ownership. My freelance product management portfolio website focuses on successfully completed projects, developed digital products, improved KPIs and the added value for consumers. But this article focuses on setting up the website, so let’s get started.

Step 1: Install a package manager

A package manager is required to install Hugo. I use Homebrew for macOS, but there are also other options. First check if Homebrew is already installed:

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

This is how you create a new Hugo site with the complete folder structure within myportfolio:

hugo new site myportfolio

Step 4: Basic configuration

A few small configuration adjustments need to be made to the config.toml before you publish your website. This is your static site’s main configuration file. To do this, simply open the file in a text editor:

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

Hugo offers several portfolio themes for download. I use the free version of UILite for my website and for illustration purposes in this article. Now download the theme and extract it into the themes folder, for example into themes/uilite:

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

Typically, editorial content in Hugo is written in markdown files which are converted to HTML during the build process. In the UILite theme, however, content is entered via components, which must be available as a json file in the data folder:

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

Hugo comes with a HTTP server, which builds and serves your site. Therefore you don’t need nginx or other products to preview your website during development on localhost. The web server comes with a build in live reload which automatically triggers a rebuild after changes.

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

Internal templates are available to load standardized code snippets. Google Analytics is one of them. To do this, the tracking ID must be entered in config.toml.

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

Now build the site with the command:

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

I host my website www.sischreiber.com on GitHub Pages. Of course, you can alternatively use a Google Cloud Storage bucket, an AWS S3 bucket, Netlify or other cloud providers. I find GitHub Pages almost self-explanatory in terms of setup and configuration, very well documented and linking a custom domain was possible right away. In addition, GitHub Pages is free of charge if you use it with a GitHub Free public 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

Select the main branch to serve your website’s content:

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

The files of the static website can be pushed into the repository in different ways: for example with a git terminal client or the GitHub desktop app. The hurdle is the lowest when files are committed via drag and drop in the browser:

Step 13: Buy a domain

It doesn’t really matter which domain registrar you buy your domain from. But it is important to have access to the DNS settings in order to create CNAME records. Keep in mind that the domain registration can take between a few hours and up to two days, depending on the domain ending.

Step 14: Add your domain in the GitHub repo settings

Now add your domain to the 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

The final step is to create DNS records at your domain registrar. The 4 entries below tell the DNS to point sischreiber.com requests towards the GitHub site. You need to enter 4 separate A records pointing to GitHub’s IP addresses:

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!

That’s it and your static Hugo website is ready to be served by GitHub pages. Although you will probably have to wait a moment for your website to be accessible under your domain. Due to the DNS propagation period it may take up to 24–48 hours for the change to take effect. Thanks for reading!