Introduction

I wanted to create a static website for myself and after very little research I decided to give Hugo a try.
If you want to try it out as well, follow the instructions below.

Assumptions

I’m going to assume a few things:

  1. You are on a Linux or macOS environment.
    • Or you can translate the commands to Windows equivalents.
  2. You have Git and Hugo installed.
  3. You are using GitLab for your Git repository.
    • If not, remember to make the necessary changes to the examples when you copy/paste it.

Setting up the repository

First, set up a new project in GitLab:

  1. Log in to GitLab and create a new blank project.
  2. Fill in the details about your repository, for this post we’ll use hugo-site as the project slug.

NOTE: Change the folder and username below to match your setup.

With that completed, open a terminal and checkout our new repository:

cd ~/Development/
git clone git@gitlab.com:<username>/hugo-site.git
cd hugo-site

Getting a local Hugo website up and running locally

NOTE: The --force is needed because the folder is not empty

Create a new Hugo site in the root of your repository folder:

hugo new site . --force

NOTE: For this post I’ll use the Hello Friend theme.
Installation might differ for other themes, so follow their instructions.

With an empty Hugo website created, add a theme and load it up with the demo content it comes with:

git submodule add https://github.com/panr/hugo-theme-hello-friend.git themes/hugo-theme-hello-friend
cp -r themes/hugo-theme-hello-friend/exampleSite/* .

That’s it!
Start the Hugo server from the root of your repository and open up http://localhost:1313 in a browser.

hugo server

Push the changes to your repository

When running Hugo, some resources are generated that we do not need to check in to our repository.
Ignore them by creating a .gitignore file with the following content:

/resources/_gen/

Then add, commit, and push all the files to the remote repository:

git add .
git commit -m "Add new Hugo site with demo data"
git push