> ## Content Index
> Fetch the complete content index at: https://www.techielass.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Dev Container Setup for Hugo
- URL: https://www.techielass.com/dev-container-setup-for-hugo/
- Published: 2025-04-02T07:01:10.000Z
- Updated: 2025-04-02T07:01:09.000Z
- Description: Learn to set up Dev Containers in VS Code for Hugo projects! Simplify dependencies, ensure consistency, and share configurations seamlessly.
- Author: Sarah Lean
- Tags: Dev Containers, Hugo

Imagine a development environment where you never have to worry about mismatched library versions, missing dependencies, or spending hours setting up a new project. [Dev containers](https://www.techielass.com/what-are-dev-containers) in Visual Studio Code (VS Code) are here to make that a reality. These Docker-powered environments are tailored to your codebase, ensuring everything runs smoothly, consistently, and with minimal setup.

In this guide, I’ll walk you through the process of setting up a dev container from scratch and setting it up for your [Hugo](https://www.techielass.com/tag/hugo/) project. Let’s get started!

## What are Dev containers in VS Code?

Development containers, or dev containers within Visual Studio Code (VS Code), are Docker containers configured to provide a fully featured development environment you can work within. 

## What is the point of Dev containers?

Dev containers can configured to run an application, to have separate tools, libraries runtimes, dependencies, or whatever is needed to run your codebase. 

How many times have you worked on a project and had problems trying to set up your laptop to have the right version of a library or runtime and had trouble and wasted hours? If you set up a dev container you can be sure the environment is set up for that codebase, and better yet you can share the dev container with colleagues making their life easier to work on that codebase as well. 

## Prerequisites

Whether you are a macOS user or a Windows user, you need to have the following installed:

- Visual Studio Code (VS Code)
- [Dev Containers extension installed](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers&ref=techielass.com)

*I have prepared this guide as a Windows user, steps may be different for macOS users.* 

## Dev Container Setup

In the bottom left-hand corner of VS Code click on the container button. 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXf6lMD8yWFfErGOpVNChTjpIn-ABk3iA0DJWvPYMTnMYv2yGXdD43VeLQcwJUc9DjY40IGXfoXjBAhfv_56Kl5EHlisrgAZNttlleaw76Li87ICvOMhcRF592bJdVvns_ERmjgB8g?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

The setup wizard will pop up at the top of your screen. 

When it does click on **New Dev Container**

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcPH8WchpQREoQ8iafTWJs2tqWiterUJrzbggTvGDCnyUiKy7YHa8ZQal0rCgE3bfDc5Iu4pIL2JvXvkvetK3DJFp2nvEXEsv5QocFgK8POMeUzE1UkEx_qdRRBUU5Zb_h4aAch?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

The setup wizard will check if Docker is already installed, if it’s not it will ask if you want to install **Docker within WSL**, say **Install**, as this will install Docker within the Windows Subsystem for Linux. 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfpqAWbVbIZLXDaBrkMttuIawPKuSAkDA9Div1YjUBAMJOXx2DoXXWAiHtoh2-Rvjmpur9aOYi2KkkXctcv2tON0vf9P4PUQ9KOayqFu5P5kFlhtBUj3QvrKAxPAUSZfeI6MsYsZw?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

Once the installation has been completed, restart your laptop and relaunch VS Code. 

Click on the button in the button in the left-hand corner of VS Code again. 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfd9VyCluLJnpXdVFZPyNQLAONYQfO99WUz84C3P-GcYvOdJpVsRqNvQU0ljmsSNRNKgGWvx6JTVsZ2d4S4bPbs63CF-1PvjNyChcAhnMcjkga3Fa5PIkBw6p6EfnqaVm8QbCc2bg?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

The setup wizard will pop up at the top of your screen. 

When it does click on **New Dev Container**

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd_aF1TcUtXn25JuYlnzYSlcvm3vQpfcGNTHSMk4dgsKXJzWf-Pw14hZBpKxz5kAaGlfxg6xI-qElZT2a6hrlSywU1pM99cwlfXDR1AaBLAUXdiSDK4KT-0J01k1cGv10zYSl6E?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

The next step is to select the template you would like to use. In this case, I am going to select the **Ubuntu** configuration template. This template already has Git installed. 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXflJtY7hHM4JwIbuKpVXjyZyh1WIHLiOIS-tYTCYP51EiSgqxqleyS-t7rk1otFaFWueezVcD0iBJ_TF-vR01u6-V2RH-5k_D9_4rAfUy5gogfNUOHEZ_W307dMb1eS_GJ1pEyDRg?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

The container will launch and start to set up the necessary parts for it to be usable. 

When it finishes loading click on the container button in the left-hand corner again. This will pop up the menu again. Be sure to select **Configure Container Features**. We are now going to install Hugo and Go. 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcag887ekcfmg7zWlTcBXoXqhBU8ljVp_BUoNJ7-XgBBuFhx6IPBKLeysbqjK4qnXjoQJiv9JDsFRfUYur2Zz9wS7snvT-UltCyPJL8CYpcxfXTqLwlRoQUqdXNyOpDvOXPH-hBWw?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

Search for **Go**. There are several options, but I use the official dev containers version. Click **OK.** 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdUlJ5EosEj-SbbH5reVltUd2CJgyX_VMXQ0r_ys9MPCW9rT3FIXqvCESMYOyOEzpyDaUMj9FRp5_tAyNWXrnN7GNQ5TjH8fVrDCJWiy1sLQrDj9jemOG1KiFV2fQqYDVO92QZkWA?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

You’ll be asked how you want to configure this installation, select **Keep Defaults.** 

Next search for **Hugo.**  There should only be one option, select it and click **OK.** 

This time you want to select **Configure options.** 

Select the version you want to install, I always go for the **latest.** Next, you will be asked if you want to install the extended version of Hugo or not, again I always select yes to this as some themes need it. 

![VS Code dev container setup](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfGopipt656bpM7LBw3E-YszWJF2VGitnn8KugWoOWnzD42GWS898c44Uh9ZEAPfnRkSSQ_W1jLXEZ8hajc6zIWGIKPUr_PmIm9NqrKvlR_WOnL0Ls_TL6dj8pFwUjMkj1zr0xMJA?key=EUlqXI37745Y8-dm3LOFBEIM)

VS Code dev container setup

When you’ve selected these options, VS Code will alert you that your container configuration has changed and needs to be rebuilt. Be sure to rebuild it. 

## Create Hugo website

First of all, we have to create a new site. In the root folder then run:

```bash
hugo new site . --force

```

In the project I have created, I have installed Hugo bigspring-light theme. Let’s see how.

In the root folder run:

```bash
git clone https://github.com/gethugothemes/bigspring-light-hugo themes/bigspring-light

```

And the last step, let’s copy the example content located in *mynewsite/themes/bigspring-light/exampleSite/*.

```bash
cp -r themes/bigspring-light/exampleSite/* .

```

We are now ready to build and serve our new site. Let’s run:

```bash
hugo server

```

The VS Code dev container will automatically configure any port forwarding for you. *It’s worth noting that this Hugo theme shows the example website at https://ipadress:port/bigspring/site*

If we want to automate the building and the serving actions, we can add a **postStartCommand** property, with Hugo server set, to the devcontainer.json file.

```json
{
	"name": "Ubuntu",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/base:jammy",
	"features": {
		"ghcr.io/devcontainers/features/go:1": {
			"version": "latest"
		},
		"ghcr.io/devcontainers/features/hugo:1": {
			"extended": true,
			"version": "latest"
		}
	},
	"postStartCommand": "hugo server"
}

```

In this way, the next time you start the container again, the hugo server command will be run automatically.

## Wrap Up

Dev containers in [VSCode](https://code.visualstudio.com/?ref=techielass.com) can be a game changer for engineers working on multiple projects as it offers a consistent, reliable and shareable environment for your individual project. By following this guide, you’ve learned how to set up a dev container from scratch, configure it for a Hugo project, and even automate tasks like building and serving your site.

Whether you’re working on a team or solo, dev containers eliminate the headaches of environment mismatches and setup struggles. Plus, the ability to share your container configuration ensures everyone can hit the ground running.

Happy coding!