March 4, 2020

2392 words 12 mins read

How To Create Your Online Portfolio: The Fun Way

How To Create Your Online Portfolio: The Fun Way
Learn how to create your personal portfolio that scales in just around 10 minutes

๐Ÿ‘‰ Intro

In this article, I will talk about what I used to create my online portfolio. I will also do a quick overview of the Hugo framework and walk you through the process of setting up your portfolio in it. So this is the content:

  • Part 1: Why I chose Hugo for my portfolio
  • Part 2: How Hugo works
  • Part 3: Creating your portfolio and deploying it on Netlify

And the result will look kind of like this:

Final homepage design

Feel free to skip to any part of the article, but I recommend you read at least Part 2 before going to the Part 3.

Side Note
I will assume you have at least a basic understanding of working with git and at least some knowledge of HTML and Markdown

Part 1

Why Hugo?


๐Ÿ˜– My Frustration

I wanted to build my portfolio properly for the longest time. I wanted to have all my work in one place so I can showcase it properly when someone asks and to be able to easily update it over the years.

As a developer, I got by with a CV and a GitHub handle. But, when I started my shift towards UI and UX design, I had to do something about my online presence situation.

I thought of the ways to create my page, but nothing seemed to fit my needs just right. Here’s my thinking:

WordPress
๐ŸŸข PROS
  • It’s very fast to build a website and have a lot of work done for me.
  • Supports commenting and RSS feed out of the box.
๐Ÿ”ด CONS
  • After a while, all the WordPress sites start to look the same. They objectively look good, but every time I see one I think to myself “Ugh, another WordPress website”.
  • If I have the reaction I have, how can I expect anyone who comes to my site looking to hire me to think anything else?
  • WordPress is boring. I want something more interesting.
React + Node
๐ŸŸข PROS
  • I will have full control over how my site looks.
  • I have a personal server. If I set it up properly, I can add a JSON and my page should be able to generate a beautiful case study page for me.
๐Ÿ”ด CONS
  • It’s very time consuming and it’s never done.
  • I tried this but failed many times as I would leave it halfway done due to a lack of time. When I would return in a month or so, I would just do the whole thing again from scratch.
Static Site (React or Vanilla JS)
๐ŸŸข PROS
  • Very customizable (like the above option).
  • Kind of simple to build.
๐Ÿ”ด CONS
  • Tedious to add new content.
  • I wouldn’t be happy with the way my site is set up.
Other options

I briefly considered using some other site builder like Squarespace, but I couldn’t be able to live with myself if I did it like that.

๐ŸŒŸ Solution

Hugo turned out to be just the thing I was looking for. It’s the perfect combination of easy to maintain and versatility.

This is their description of the product:

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

And I couldn’t agree more. Creating my portfolio with Hugo is probably the most fun I’ve had creating a website in a long time.

Hugo is simple enough to get you started right away, yet fully customizable. You can set up and start creating content right away, or you can fully personalize your website. I landed somewhere between the two options. I took a theme, adjusted it and adjusted my content creation flow just a bit to suit my needs.


Part 2

How Hugo Works


โ“ Overview

Hugo is a static HTML and CSS website generator written in Go.

The idea is to have Markdown files that contain all the content which is rendered in HTML using templates. You do not need to know Go to use Hugo, though.

The folder structure of your Hugo project determines how your website will be generated.

๐ŸŽจ How Can I Customize Layout and Design

There are themes, and they are completely free. Themes are diverse and highly customizable. There is for sure more than 200 at the moment. Some are very simple and some very complex. There are themes for creating landing pages, portfolios, blogs, documentation, etc.

You can take the theme’s design completely, you can fork the theme and customize it, or you can create a theme all by yourself.

Most of the themes offer a very good explanation of how to modify them.


Part 3

Create a portfolio in Hugo

Side Note
Note that Hugo’s documentation is very good and there are even videos that explain some key concepts. If you want to dive in more, I encourage you to go through it.

๐Ÿ huGO (Getting Started)

First of all, you need to install Hugo.

  • Mac/Linux:
brew install hugo
  • Windows:
choco install hugo -confirm

or check out other options here if you don’t have chocolatey.

To confirm everything is working correctly, run

hugo version

The output should be something like this

Hugo Static Site Generator v0.65.3/extended darwin/amd64 BuildDate: unknown

Now position yourself into your desired folder and run

hugo new site portfolio-tutorial

Great, Hugo will now generate a sample website, but let’s first add a theme.

๐ŸŽก Adding a Theme

For this tutorial, I will be using a Chunky Poster theme. They have decent documentation, but I will walk you through everything you need to know.

In your terminal, type:

cd portfolio-tutorial
git init
git submodule add https://github.com/puresyntax71/hugo-theme-chunky-poster.git themes/chunky-poster
echo 'theme = "chunky-poster"' >> config.toml

What this does is it adds the Chunky Poster theme as a submodule to your site. That way you will be able to receive updates to the theme just by pulling from the branch. We also put it in the themes folder and called it chunky-poster

๐ŸŸข Starting Server

Once you run the server it will listen to all the changes made to the files and rebuild your site.

You start your server by typing

hugo serve

Or, if you want it to display draft articles

hugo serve -D

It should be running on localhost:1313 so you can check it out in your browser.

๐Ÿ“œ Adding Content

Add your first project by typing

hugo new post/project1.md

You can now open your text editor to see everything that happened. This should be your folder structure.

- archetypes
  |- default.md
- content
  |-post
    |-project1.md
- data
- layouts
- resources
  |-gen
    |-...
- static
- themes
  |-chunky-poster
    |-...
config.toml

I’ll now go through each folder from top to bottom. I’ll tell you what the folder is used for and what to change there to complete this tutorial.

archetypes

This is the folder where you define defaults for every Markdown file. Remember how we created hugo new post/project1.md?
Well, if you create a file there called archetypes/post.md, all the markdown files created in the post folder will have that archetype as a template.

You can also notice that there is a section surrounded by three dashes. Something like this:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

This is called Front Matter and it’s where you define all the page’s metadata. I encourage you to go through this topic more, but I won’t be covering it in this tutorial as the tutorial is already very extensive.

Leave the archetypes folder as-is for now.

content

This folder is home to all your content including all the markdowns for your projects, and images to be referenced by markdowns.

Create a new folder content/images and choose an image from your computer to put there.

Once you do that, open the created project (content/post/project1.md) and in its front matter add the line at the end.

---
title: "Project"
date: 2020-03-04T09:20:30+01:00
images: []
categories: []
tags: []
authors: []
images: ['/images/your-image.png']
---

While here you can also add some sample content below the dashes (---)

Before we can see our picture as a header we have to do one more thingโ€”create the file content/images/index.md with the front matter (include the dashes ---):

---
headless: true
---

Save everything. You should now have a header image for your project if you check the browser.

You can add more images that will be used in the article, but if you want to reference them in the body of the post you can do it like this:

Figure text samples

This is a shortcode. You can read more about shortcodes here. But for now, this should be enough.

data

We won’t be adding anything here in the scope of this tutorial. Here is, however, an excerpt from the documentation about this folder:

This directory is used to store configuration files that can be used by Hugo when generating your website. You can write these files in YAML, JSON, or TOML format. In addition to the files you add to this folder, you can also create data templates that pull from dynamic content.

layouts

This is an interesting folder. Here, you will be able to put all the custom HTML templates for your pages. To study the existing ones you can go to themes/chunky-poster/layouts. There, you can see the way the homepage (themes/chunky-poster/layouts/index.html), post page (themes/chunky-poster/layouts/post/single.html), and all the other pages are generated.

The layouts you put inside your folder will override the ones in the theme’s folder, but the theme’s layouts are used by default.

Read more about templates here.

resources

We’ll be skipping resources as here are the resources generated by Hugo.

static

Here are all the static files (you can put files for people to download, and so on).

We will just be adding a new folder images and in it a homepage image file (homepage-image.jpg). This file will be used as our big cover homepage picture. Remember this name as you will need to put it inside of the configuration file later.

themes

We already know that all the themes go here. Feel free to look around and check the example site for ideas about your site.

๐Ÿ— Config

In the end, we’ll adjust our config file. You can find it inside your project root. It’s called config.toml

To do this as fast as possible, the best is to go to themes/chunky-poster/exampleSite and find a config.toml there. Copy it and paste it inside our project root.

You can also paste it from here:

baseURL = "https://portfolio-tutorial.com"
title = "Hugo Themes"
copyright = "Copyright ยฉ 2008โ€“2019, Steve Francia and the Hugo Authors; all rights reserved."
paginate = 2
languageCode = "en"
DefaultContentLanguage = "en"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"
googleAnalytics = "UA-XXXX"
DisqusShortname = ""
theme = "chunky-poster"

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 10
  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 0

[taxonomies]
category = "categories"
tag = "tags"
series = "series"
author = "authors"

[params]
  author = "Hugo Authors"
  description = "Lorem ipsum dolor sit amet."
  homepageImage = "/images/homepage-image.jpg"
  share = true
  showLanguageSwitcher = false

  # Custom CSS and JS. Relative to /static/css and /static/js respectively.
  customCSS = []
  customJS = []

  [params.social]
    rss = true
    email = "example@example.com"
    facebook = "https://facebook.com"
    twitter = "https://twitter.com"
    linkedin = "https://linkedin.com"
    stack-overflow = "https://stackoverflow.com"
    instagram = "https://stackoverflow.com"
    github = "https://github.com"
    weibo = "https://www.weibo.com"
    medium = "https://medium.com"
    pinterest = "https://pinterest.com"
    reddit = "https://reddit.com"
    gitlab = "https://gitlab.com"
    mastodon = "https://mastodon.social"
    keybase = "https://keybase.io/"

  [params.prismJS]
    enable = true
    theme = ""

  [params.commento]
    enable = true
    url = "https://commento.io"

[markup]
  [markup.highlight]
    codeFences = false

[services]
  [services.instagram]
    disableInlineCSS = true

  [services.twitter]
    disableInlineCSS = true

Go through the options there. They are very intuitive. The most important part for now is

[params]
  author = "Hugo Authors"
  description = "Lorem ipsum dolor sit amet."
  homepageImage = "/images/homepage-image.jpg"

Change author to your name, description to a description of your site and homepageImage to the name of the image in your static folder.

title, description, and homepageImage will be shown on your home page hero section.

๐Ÿฅณ Result

Your result should look like this:

Result of this tutorial

Feel free to spend as much time as you want to modify it. To change anything regarding the design of the webpage, you’ll have to modify the theme. However, keep in mind that the changes won’t be visible when you deploy to Netlify.

You can then either physically download the theme and put it inside the themes folder to modify, or you can fork on GitHub and import your own theme. I recommend the latter, but only if you’re comfortable enough with working with git and submodules.

I modified my theme a bit. you can check the results here and check out my fork of the Chunky Poster theme here.

๐ŸŽฏ Deploying

Fist of all, push all the changes to GitHub, GitLab or Bitbucket to any repository (it can even be private)

Go to Netlify and create a free account.

Then click on a button New site from Git. There connect to the repository and your desired branch and for the final step input the following:

  • Build command: hugo
  • Publish directory: public

Netlify might have done this for you and that is completely fine.

After you deploy you should be given some default domain name like random-word-23904.netlify.com. You can change that or import your own domain name.

Congratulations! You have your portfolio up and running ๐Ÿฅณ.

๐ŸŽฌ The End

This is the end of the tutorial on how to build a portfolio using Hugo.

To keep on exploring, look through the example page of the theme or this page as it is completely created with Hugo.

I did not cover all Hugo has to offer. I encourage you, again, to go through the official Hugo documentation as it is very well written.

I hope you had fun and I wish you a lot of success in creating your portfolio. If you have any questions, compliments, criticisms, post them the comments below, I’ll try to help/reply as soon as I can!

If you discover something interesting and new about Hugo, feel free to also post it below or contact me at hi@grgi.chโ€”I love talking about it!

Thank you for reading and have fun!

You can also buy me a coffee here:

Buy me a coffee badge