How to host a static site with Caddy, my own domain and docker-compose

In this tutorial I want to briefly discuss how to host a static website with Caddy2 and Docker. This means you will have a static website running with HTTPS available at your domain.

Prerequisites:

1. A static website project. This can be a single HTML file for instance.
2. Access to a server where Docker & docker-compose is available
3. A domain you own

What is Caddy?

Caddy is an open source webserver with build in automatic HTTPS. That means you do no need to take care about ensuring that your SSL certificates are valid and most importantly stay valid. In this tutorial Caddy will serve our static HTML project to the viewer (note that Caddy is much more capable of though). You could alternatively also use something like NGINX for example. How ever in that case you would have to take care about your certificates.

Setup

In this tutorial we will use docker-compose to run Caddy. If you plan to proxy multiple services through Caddy you can later on chain them together in that file. There are plenty of other ways to get Caddy going easily like running it manually by downloading or cloning the Git repository or use simple single docker container without docker compose.

Lets get started with setting up Caddy.

1. Create a docker-compose.yml.

The file should have to following content:

version: '3'
services:
  caddy:
    image: caddy:2.1.1-alpine
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - ./personal-site/personal-site:/usr/share/caddy
      - caddy_data:/data
volumes:
  caddy_data:
  # caddy SSL volume      

The file is pretty straight forward I think except maybe for the volumes part. The first line ./Caddyfile:/etc/caddy/Caddyfile mounts our Caddyfile into the container. The Caddyfile is somewhat the configuration file our Caddy server needs. In this file we will later on configure which domain Caddy will use for our server.

The second line ./personal-site:/usr/share/caddy mounts our static website folder into the Caddy share folder. This folder will be later on shared through our server.

In this example we assume that our Caddyfile as well as our personal-site static folder are in the same directory as our docker-compose.yml.

The third line caddy_data:/data is required for our SSL volume.

2. Create a Caddyfile at the specified location of your docker-compose.yml

Fill the Caddyfile with the following:

yousubdomain.domain.domainsuffix {
  root * /usr/share/caddy
  file_server
}

You are telling caddy to serve the folder under /usr/share/caddy. In our docker-compose.yml we specified our static site project folder for this. Make sure you set up a record in your domain management system.

When starting our Caddy server it will be available on port 80 and serve the static site with its assets located in the given folder.

Start the service

With sudo docker-compose up -d you can then start your Caddy server. Remove the -d if you want to see logs and get rid of the detached mode. Caddys first setup might take some time since it will take care of the neccessary certificates.

You can now navigate to your domain with HTTPS as protocol and should see your static site.