Overview

This is a tutorial on how to set up a website with Hugo , Caddy , and Docker . Caddy makes it extremely easy to set up SSL for your websites, and it integrates really well with Docker. You can easily run multiple web services in different Docker containers, and easily manage them with Caddy.

I will also explain how to use a specific theme, the KeepIt theme. If you use a different theme, the process will be similar. There might be some slight differences with the front matter in your posts, the hugo.toml configuration , and file paths.

I will assume you’ve already got Docker set up and running. If you don’t, get started here: https://docs.docker.com/get-started/

Setting Up Caddy

To set up Caddy with Docker, create a folder in your home directory called caddy:

mkdir ~/caddy
cd ~/caddy

Docker Compose File

Next, create a docker-compose.yml file in the caddy directory with the contents below.

services:
  caddy:
    container_name: caddy
    image: ghcr.io/authp/authp:v1.0.1
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - /home/${USER}/caddy:/etc/caddy/Caddyfile
      - /home/${USER}/caddy/static:/srv
      - /home/${USER}/caddy/config:/config
      - /home/${USER}/caddy/data:/data
    networks:
      websites:

networks:
  websites:
    external: true

This configuration sets up Caddy as follows:

• The container name will be caddy
• It will forward both HTTP and HTTPS
• Your Caddyfile will be located in ~/caddy
• Static files can be placed in the ~/caddy/static directory
• Files caddy needs to persist with configurations and SSL certificates will be placed in ~/caddy/config and ~/caddy/data:/data
• A Docker network called websites will be used

Caddyfile

Next, create a file named Caddyfile in the ~/caddy directory with the following content:

yourdomain.com {
	reverse_proxy hugo_blog:1313
}

Replace yourdomain.com with your actual domain. This configuration will configure a reverse proxy for Hugo Docker container that you will have running on port 1313.

Launch the Caddy Docker Container

To start Caddy, run the following command:

docker compose up -d

This command will start the Caddy service. You won’t be able to see anything until you get Hugo up and running.

Setting Up Hugo

To set up Hugo with Docker, create a folder in your home directory called hugo:

mkdir ~/hugo
cd ~/hugo

Docker Compose File

Next, create a docker-compose.yml file in the ~/hugo directory with the contents below.

services:
  hugo:
    container_name: hugo_blog
    image: hugomods/hugo
    restart: unless-stopped
    # The ports configuration is optional, if you want to test locally
    # Caddy will be able to reverse proxy the container without exposing
    # the ports
    ports:
      - "1313:1313"
    volumes:
      - /home/${USER}/hugo/site:/src
    command: server -D --buildDrafts --buildFuture --bind 0.0.0.0
    environment:
      - HUGO_THEME=KeepIt
    networks:
      - websites

networks:
  websites:
    external: true

This configuration sets up Hugo as follows:

• The container name will be hugo_blog
• It will use the hugomods/hugo image
• The Hugo site files will be located in ~/hugo/site
• It will bind to all network interfaces and serve the site
• It will be configured to use the KeepIt theme
• It will use the existing websites network

Build the Site

To build the site using the hugomods/hugo image, run the following commands:

docker run --rm -v $(pwd)/site:/src hugomods/hugo new site .
sudo chown -R $(whoami):$(whoami) site

This will build the site for you and set up permissions so you can read/write files. All of the hugo site files will be located in the site directory

Install the KeepIt Theme

To install the KeepIt theme use the following commands:

git init .
git submodule add https://github.com/Fastbyte01/KeepIt site/themes/KeepIt

Configure Your Blog

You can run the following command to copy the theme config into your main config file:

cp site/themes/KeepIt/config.toml site

Update the site/config.toml file with the info that is appropriate for your site. There are comments in the file that help explain all the options.

You can search for “KeepIt” within the file, which will bring up options to change the title, description, etc. It also comes with a lot of social icons by default. Set the ones you don’t want to display to false and update the ones you want to display with the correct ids.

Add Some Content

Use the following command to create a new file for your first post

mkdir site/content/posts
mkdir site/content/posts/my-first-post
touch site/content/posts/my-first-post/index.md

Hugo allows you to put front matter at the top of your Markdown files for your content. The front matter is nothing more than metadata, that the template uses for rendering the content you create.

Update the file at ~/hugo/site/content/posts/my-first-post/index.md and some front matter as well as some content:

---
title: "My First Blog Post"
date: 2020-01-01T00:00:00+00:00
lastmod: 2020-01-01T00:00:00+00:00
draft: false
author: "Me"
authorLink: "https://example.com"
description: "My first blog post on Hugo."

tags: ["announcements"]
categories: ["Announcements"]

---
Hello world!  This is my first blog post in Hugo!

Start Up Hugo

To run Hugo, just start up the container the same way you did Caddy:

docker compose up -d

Your site should be up and running now! Caddy should be properly configured to point to your domain, and everything should be served up there. If you exposed port 1313 in your Hugo docker-compose.yml file, you should also be able to view your website at http://localhost:1313 . You should see sample content that’s generated by the theme, with documentation on how to use it. You’ll see your first post at http://localhost:1313/posts/my-first-post/

Delete the Sample Content

Review the documentation before you delete it. It provides good info on how to use the theme. To delete the sample content:

rm -rf site/themes/KeepIt/content

The documentation will always be available at site/themes/KeepIt/exampleSite if you need to refer back to it again.