The world’s leading publication for data science, AI, and ML professionals.

How to Make a Data Science Portfolio That Stands Out

Create a data science portfolio with Cloud-flare and HUGO

My website that we are are going to create.
My website that we are are going to create.

Many people have asked how I made my website. In this article, I want to describe that exact process and walk through all the tools and tech I used.

Note: This tutorial is mainly for Mac users as that’s what I use and can document.

Pre-Requisites

To deploy our website, we will use Git and GitHub quite a lot. The stuff you need is:

  • GitHub account -> Create one here.
  • Install git for command line -> Follow this guide.
  • Generate SSH keys for cloning repos -> Follow this guide.
  • Basic understanding of git commands -> Check out a guidebook here.
  • Understanding of command line -> Here is a good tutorial.

However, don’t worry too much. I will walk through all the git commands in this post anyway, but it’s always better to have some intuition of what’s happening.

You will also need Homebrew. This is dubbed the ‘missing package manager for MacOS’ and is very useful for anyone Coding on their Mac.

You can install Homebrew using the command given on their website:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Verify Homebrew is installed by running brew help (you should get a list of brew commands and how to use them).

Finally, have some IDE, like PyCharm or VSCode. Anything you like will do.

Hugo

Hugo is a tool for creating static websites written in GO. It is straightforward to use but requires some programming experience. I wouldn’t recommend it if you don’t have any coding experience whatsoever; in your scenario, no-code solutions are better.

Installation

The first step is to install GO and Hugo using Homebrew. Run the following command to do this:

brew install go hugo

Verify both are installed by running:

hugo version
go version

Creating Site

First, we will create a new website template by running the following:

hugo new site quicksite

Then we will go into that new directory:

cd quickstart

You can view whats in this folder by running ls.

Now, we will initialise this folder as a GitHub repo in preparation for pushing it to GitHub.

git init

Adding Theme

Hugo has many themes and templates that you can use instead of building your website from scratch. A link to all the templates is here.

Congo is the theme I use for my website, and we will be working with it today. However, this process will work for any theme in the list, so if you don’t like the one I use, I am sure you can find something.

Credit to James Panther for creating this template, I recommend you check his stuff out!

There are different ways to add the theme to your repo; my personal preference is through git submodules.

See here for a complete list of adding themes. Many users prefer to use Hugo modules.

Git submodules allow you to put another git repo/project within your own git repo, and you can reference it. The main project can then use the submodule’s code, but it maintains its own commit and branch history.

It may sound complicated, but it’s not that difficult in practice. In essence, it’s just copying and pasting a directory into a project.

To start, we need to add the Congo theme as a submodule (make sure you are in the projects directory when you do this):

git submodule add https://github.com/jpanther/congo.git themes/congo

Your file structure should look something like:

quicksite/
├─ archetupes
├─ assest
├─ config
├─ content
├─ data
├─ i8n
├─ layouts
├─ public/
├─ static
└─ themes/
   └─ congo/

Now, we need to move some theme files into our main project. I used my IDE for the next few steps, but you can just do what feels comfortable to you.

In the root folder, delete the hugo.toml file that was generated by cloning the submodule.

Copy the *.toml config files from the congo theme into your config/_default/ folder. This will ensure you have all the correct theme settings.

The file structure in config should look like this:

config/_default/
├─ config.toml
├─ languages.en.toml
├─ markup.toml
├─ menus.toml
├─ module.toml
└─ params.toml

Go to the config/_default/config.toml file and uncomment the baseURL line and add theme = "congo". To verify the theme is active, run hugo server and click on the local host link. You page should look something like this.

Congrats, the theme is now up and running!

The author of the Congo theme also provides his own guide on installing the theme if you want a second reference point.

Installation

Editing Theme

Let’s now customise the theme. I won’t go over every detail because it will take ages, and the author has a complete guide on their website that you can use for more information.

In general, the structure of the repo looks as follows:

.
├── assets
│   └── img
│       └── author.jpg
├── config
│   └── _default
├── content
│   ├── _index.md
│   ├── about.md
│   └── posts
└── themes
    └── congo

To customise mine, I viewed some other websites that use this theme, found ones I liked, and simply copied their GitHub code. This one was a big inspiration, and you can find the GitHub code here.

For this tutorial, I will show you how I made my homepage, which you can see at the start of the article.

Create content/_index.md page, and add the following to it:

---
title: "About"
showAuthor: false
showDate: false
showReadingTime: false
showTableOfContents: false
showComments: false
---

I'm a Data Scientist & Machine Learning Engineer with a Master's degree in Physics, currently working at [Deliveroo](https://deliveroo.co.uk/).

In my spare time, I create [YouTube videos](https://www.youtube.com/channel/UC9Tl0-lzeDPH4y7LcRwRSQA), 
and write [newsletters](https://newsletter.egorhowell.com/) and [blogs](https://medium.com/@egorhowell) about Data Science and machine learning.

<div style="max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #EEE; background-color: #f9f9f9; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
  <p>For any questions or inquiries, feel free to reach out via <a href="[email protected]">email</a> 💌 </p>
</div>

My languages.en.toml file looks as follows:

languageCode = "en"
languageName = "English"
languageDirection = "ltr"
weight = 1

title = "Egor Howell"
# copyright = "Egor Howell"

[params]
  dateFormat = "2 January 2006"

  description = "Personal website of Egor Howell"

[params.author]
  name = "Egor Howell"
  image = "img/pic2.png"
  headline = "Data Scientist, Machine Learning Engineer &amp; Content Creator"
  bio = "Data Scientist, Machine Learning Engineer &amp; Content Creator."
  links = [
    { youtube = "https://youtube.com/@egorhowell" },
    { medium = "https://medium.com/@egorhowell" },
    { instagram = "https://instagram.com/egorhowell" },
    { github = "https://github.com/egorhowell" },
    { linkedin = "https://www.linkedin.com/in/egorhowell/" },
  ]

params.toml is:

# -- Theme Options --
# These options control how the theme functions and allow you to
# customise the display of your website.
#
# Refer to the theme docs for more details about each of these parameters.
# https://jpanther.github.io/congo/docs/configuration/#theme-parameters

colorScheme = "ocean"
defaultAppearance = "light" # valid options: light or dark
autoSwitchAppearance = false
defaultThemeColor = "#007fff"

enableSearch = false
enableCodeCopy = false
enableImageLazyLoading = true

# robots = ""
fingerprintAlgorithm = "sha256"

[header]
  layout = "basic" # valid options: basic, hamburger, hybrid, custom
  # logo = "img/logo.jpg"
  # logoDark = "img/dark-logo.jpg"
  showTitle = true

[footer]
  showCopyright = true
  showThemeAttribution = true
  showAppearanceSwitcher = true
  showScrollToTop = true

[homepage]
  layout = "profile" # valid options: page, profile, custom
  showRecent = false
  recentLimit = 5

[article]
  showDate = false
  showDateUpdated = false
  showAuthor = false
  showBreadcrumbs = false
  showDraftLabel = false
  showEdit = false
  # editURL = "https://github.com/egorhowell/testing_website/"
  editAppendPath = true
  showHeadingAnchors = false
  showPagination = false
  invertPagination = false
  showReadingTime = false
  showTableOfContents = false
  showTaxonomies = false
  showWordCount = false
  showComments = false
  #sharingLinks = ["facebook", "twitter", "mastodon", "pinterest", "reddit", "linkedin", "email"]

[list]
  showBreadcrumbs = false
  showSummary = false
  showTableOfContents = false
  showTaxonomies = false
  groupByYear = false
  paginationWidth = 1

[sitemap]
  excludedKinds = ["taxonomy", "term"]

[taxonomy]
  showTermCount = true

[fathomAnalytics]
  # site = "ABC12345"
  # domain = "llama.yoursite.com"

[plausibleAnalytics]
  # domain = "blog.yoursite.com"
  # event = ""
  # script = ""

[verification]
  # google = ""
  # bing = ""
  # pinterest = ""
  # yandex = ""

And that should be it; your site should be like this (if you copied the above):

There is a lot to customise, so I recommend just playing around for a few hours to get the feel of the theme and get something you like. You can add more pages, change the layout, colour, etc.

I recommend looking at what other people have done with this theme and my website for inspiration.

Full customisation guide by Congo author.

Getting Started

Pushing To GitHub

We need to push this code up to GitHub to access it from Cloudflare.

The first step is to create a git repo on GitHub. Follow this link to do that.

Then run the following commands.

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main 
git add .
git commit -m "first commit"
git push -f origin main

You should see your code on GitHub!

Cloudflare

Our website is on GitHub, and we need to deploy it!

I use Cloudflare to host my website, as it’s free to use and has many features. It is an "all-in-one" platform, so it gives you domains, hosting, and analytics all in the same place. You can also manage all your websites in one place, which I really like if you want to expand your business.

It is straightforward to deploy on Cloudflare.

  1. Make a Cloudflare account; see here.
  2. Go to your Cloudflare dashboard.
  3. In Account Home, select Compute (Workers) > Workers & Pages > Create > Pages > Connect to Git > Select Your Git Repo
  4. Add the below in the Build settings

Your website should now be live at the given domain, which will be some thing like https://quicksite-env.pages.dev/.

And that’s it!

If you want more information, checkout Cloudflare’s guide.

Hugo · Cloudflare Pages docs

Other Thoughts

Here are some other things to try if you want

  • Get a custom domain to connect your webpage to, and follow this guide if you’re interested.
  • You don’t have to deploy on Cloudflare, there are many solutions out there. Hugo has a great guide here.
  • Try out other Hugo themes; list them here.

What I showed here is just one way, but many different ways of generating websites and portfolios exist. The main thing is to just create one and not get too bogged down in the tools or tech.

Done is better than perfect

Another Thing!

I have a free newsletter, Dishing the Data, where I share weekly tips and advice as a practising data scientist. Plus, when you subscribe, you will get my FREE data science resume and short PDF version of my AI roadmap!

Dishing The Data | Egor Howell | Substack

Connect With Me


Related Articles