
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.
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 & Content Creator"
bio = "Data Scientist, Machine Learning Engineer & 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.
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.
- Make a Cloudflare account; see here.
- Go to your Cloudflare dashboard.
- In Account Home, select Compute (Workers) > Workers & Pages > Create > Pages > Connect to Git > Select Your Git Repo
- 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.
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!