How I Made This Webpage (Part 1)

Developing Hugo in Docker

Posted by Mohd Shah on Sunday, July 17, 2022

Let’s Get Started

I’m gonna spare you the long dreary introduction and assume that you’re here for one thing and one thing only, to make your own website!.

Well good news! Not only am I going to show you how to do just that, but by the end of this article you will be familiar enough with Docker, Hugo and GitLab to create your own static blog, portfolio or retail site.

So let’s get started shall we?

Why Docker ?

If you’re anything like me, you might not like installing varies different programmes and dependencies when developing a particular project.

There might be compatibility issues, such as a particular dependency not being compatible with your Window’s or MacOS version or you might need a different version of a software for different project.

Whatever it is, I’m here to tell you that with just Docker and VSCode you can spin up any development environment you want, be they Python, Java, Go, Rails, Ruby, PHP, C/C++, Node, and the list goes on.

So first things first, let’s install Docker.

What do I need ?

Before we move on any further, please ensure you met the following pre-requisite:

  1. Install VSCode using the link provided here
  2. Install Docker using the link provided here.
  3. Install the VSCode Remote Development Extension pack using the link provided here

Once you have installed all the required pre-requisite, we can begin by creating a Docker container for your development environment.

Creating your dev environment

Follow the steps below :

  1. Launch Docker for Desktop
Docker landing screen
Docker landing screen

  1. Click on Dev Environments on left side bar and then the Create button located on the top right hand side.
Click create button
Click create button

  1. Click on the Get Started button to move to the setup phase. Select Local Directory as the source and then click the Select button and select the empty folder that we will be working on.
Config the working directory
Config the working directory

  1. Click Continue and let Docker prepare your new container. Next click OPEN IN VSCODE to open an instance of VSCode and begin your development.
Click to open VSCode
Click to open VSCode

  1. In VSCode right click on the Explorer sidebar and click Open in Integrated Terminal to open the terminal console on the bottom right.
VSCode running in Docker container
VSCode running in Docker container

  1. To install Hugo you will need to have homebrew, so lets install homebrew by running the following command into the terminal;
/bin/bash -c "$(curl -fsSL"
Install homebrew
Install homebrew

  1. After the installation finishes, run the following TWO commands to add homebrew to your PATH;
echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/vscode/.profile
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
  1. Install Hugo using the following command;
brew install hugo
Hugo Install Complete
Hugo Install Complete

  1. Check that you have successfully installed Hugo using the command below;
hugo version


You’ve successfully create a Hugo development environment within Docker.

In Part 2 of this guide, we will look at how to create a Hugo webpage.

comments powered by Disqus