How I Made This Webpage (Part 1)

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

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

3. 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.

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

5. In VSCode right click on the Explorer sidebar and click Open in Integrated Terminal to open the terminal console on the bottom right.

6. 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 https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

7. 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)"

8. Install Hugo using the following command;

brew install hugo

9. Check that you have successfully installed Hugo using the command below;

hugo version

Congratulations!

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.

• ← Previous Post
• Next Post →