Personal Website with Hugo & GitHub: Part 1 – Project Setup and Theme

This post will guide you through the first steps of setting up your personal website using Hugo, adding a theme, and integrating with GitHub.

1. Installing Hugo, a Theme, and Committing the Initial Project to Git #

Prerequisites #

Install the following tools:

git
go
sass

Install on macOS #

brew install git go sass/sass/sass hugo

Install on Windows #

winget install Git.Git
winget install GoLang.Go
winget install Sass.Sass
winget install Hugo.Hugo.Extended

Be sure to add these to your path.

Verify Hugo installation #

hugo version

Create your project directory #

hugo new site tristan.run
cd tristan.run
git init

Add a README and push to GitHub #

echo "# DotRun init" >> README.MD
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ImTris/DotRun.git
git push -u origin main

Note: If you get an error about the branch name (e.g., ‘master’ vs ‘main’), use git branch -M main to rename your branch to ‘main’ before pushing.

2. Setting Up the Congo Theme #

I used the Install using Hugo method, which is the recommended and easiest way to keep the theme up to date.

From your project directory, initialize Hugo modules:
```
hugo mod init github.com/ImTris/DotRun
```
Add the theme to your configuration by creating config/_default/module.toml with:
```
[[imports]]
path = "github.com/jpanther/congo/v2"
```
Start your server:
```
hugo server
```
In the root folder, delete the hugo.toml file generated by Hugo. Copy the *.toml config files from the theme into your config/_default/ folder. Do not overwrite your module.toml file.

Make yourself familliar with the Documentation for further configuration and how to add content to the website.