0x00 - Deploy your Hugo Site in the blink of an eye with Docker

This article offers a practical guide to installing and configuring a Hugo website using Docker. It presents two methods: a simple installation and another with Nginx Proxy Manager for secure management. The author shares his motivations and provides detailed instructions, including sample docker-compose.yml files. This guide is ideal for those wishing to quickly deploy a Hugo site with multilingual support.

0x00 - Deploy your Hugo Site in the blink of an eye with Docker

Introduction

This article was written in response to a need I encountered: there was no simple Docker image to install and manage a Hugo site. So I decided to create my own solution from scratch.

My goal was to create a Docker container capable of easily deploying a Hugo site, meeting the following criteria:

  • On first run, a new site must be created if it doesn’t already exist.
  • If a site with the same name already exists, the Hugo service should simply launch.
  • Offer users a simple, clear theme (e.g. Stack).
  • Offer two default languages: English and French, to simplify configuration.

In this article, I’ll present two installation methods: a simple version and a version using Nginx Proxy Manager.

Creating the docker-compose.yaml file

Let’s start with the simple method. Run the following commands to create and edit your docker-compose.yml file.

1
touch docker-compose.yml

Edit the file and copy the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
version: '3.5'
services:
  hugo_app:
    image: ghcr.io/thehackdes/docker-hugo:main
    container_name: hugo_app
    hostname: hugo_app
    restart: always
    ports:
      - 1313:1313
    volumes:
      - volume_hugo_app:/srv
    environment:
      WEBSITE: "thehackdes.com"
      OPTIONS: "--bind 0.0.0.0 --appendPort=false --baseURL=http://127.0.0.1:1313"

volumes:
  volume_hugo_app:
    name: volume_hugo_app
    external: false

Then launch Docker Compose :

1
docker compose up -d

If all goes well, you will be able to access your site at the following address: http://127.0.0.1:1313.

Configuration with Nginx Proxy Manager

Here’s the configuration I’ve set up on my personal server with Nginx Proxy Manager. This method differs in that it creates two networks: one for Hugo and one for the Proxy. This improves security, as the Hugo network is dedicated solely to communication with the Proxy network.

Start by creating your docker-compose.yml file :

1
touch docker-compose.yml

Edit the file and copy the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
version: '3.5'
services:
  hugo_app:
    image: ghcr.io/thehackdes/docker-hugo:main
    container_name: hugo_app
    hostname: hugo_app
    restart: always
    ports:
      - 1313:1313
    volumes:
      - volume_hugo_app:/srv
    environment:
      WEBSITE: "thehackdes.com"
      OPTIONS: "--bind 0.0.0.0 --appendPort=false --baseURL=https://thehackdes.com"
    networks:
      network_nginx:
        ipv4_address: 10.0.20.29
        aliases:
          - hugo_app
      network_hugo:
        ipv4_address: 10.0.29.10
        aliases:
          - hugo_app

networks:
  network_hugo:
    name: network_hugo
    ipam:
      config:
        - subnet: 10.0.29.0/24
  network_nginx:
    external:
      name: network_nginx

volumes:
  volume_hugo_app:
    name: volume_hugo_app
    external: false

Then launch Docker Compose :

1
docker compose up -d

All that’s left to do is configure your proxy to set up the redirection, and you’re done. Here’s how I set up the redirection on my end:

0x00_1 0x00_2
Image 1 Image 2
Licensed under CC BY-NC-SA 4.0
Built with Hugo
Theme Stack designed by Jimmy