Hugo's There - Flying with Hugo and Caddy

There I was wondering what to do about a website for a new community venture I was running where I thought, yes, let’s generate the site with Hugo, serve it with Caddy and run it all on Fly. Why Hugo and Caddy? Well, they both have good reputations as

Fly.io logo
Fly.io
•
Dj Walker-Morgan
•8 min read•intermediate•
--
•View Original
DockerHTTPSJSON

Overview

This article provides a detailed guide on how to create and deploy a static website using Hugo and Caddy on Fly.io. It covers the setup process, configuration of Docker and Caddy, and how to manage domain and TLS certificates effectively.

What You'll Learn

1

How to initialize a Fly deployment for a Hugo site

2

How to configure a Caddyfile for serving a static site

3

How to set up Docker for building a Hugo site

4

How to manage DNS records for custom domains

5

How to obtain TLS certificates using Fly.io

Prerequisites & Requirements

  • Basic understanding of web hosting and DNS management
  • Familiarity with Docker and command line tools(optional)

Key Questions Answered

How do I deploy a Hugo site using Fly.io?
To deploy a Hugo site on Fly.io, you first initialize your Fly deployment using the command 'flyctl init'. Then, configure your Hugo site and Dockerfile, followed by setting up Caddy for serving the site. Finally, use 'flyctl deploy' to publish your site.
What is the purpose of the Caddyfile in this setup?
The Caddyfile is used to configure the Caddy web server, specifying how it serves files and handles HTTPS. In this setup, it is configured to serve the static files generated by Hugo and to disable its own certificate management since Fly.io handles that.
How can I set up a custom domain for my Hugo site?
To set up a custom domain, you need to point your DNS records to the Fly.io IP address for your application. This involves adding an A record for the IPv4 address and an AAAA record for the IPv6 address obtained from 'flyctl ips list'.
What steps are involved in obtaining a TLS certificate for my domain?
To obtain a TLS certificate, you need to add an AAAA record for your domain in the DNS settings, then use the command 'flyctl certs create <your-domain>' to request a certificate from Let's Encrypt, which Fly.io manages automatically.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Static Site Generator
Hugo
Used to generate the static files for the website.
Web Server
Caddy
Configured to serve the static files generated by Hugo.
Containerization
Docker
Used to build and deploy the application in a containerized environment.
Cloud Platform
Fly.io
Provides hosting and deployment services for the application.

Key Actionable Insights

1
Utilize the multi-stage Docker build process to optimize your application size.
By using multi-stage builds, you can separate the build environment from the runtime environment, resulting in a smaller final image that only contains the necessary files for production.
2
Always verify your Caddyfile configuration against the latest documentation.
Caddy has different versions, and using the wrong documentation can lead to configuration errors. Ensure you are referencing the Caddy 2 documentation for accurate setup.
3
Regularly check your DNS settings after making changes.
DNS changes can take time to propagate. If your site does not appear as expected, verify that your DNS records are correctly configured and have propagated fully.

Common Pitfalls

1
Failing to disable Caddy's automatic HTTPS management can lead to conflicts.
Since Fly.io manages TLS certificates, having Caddy attempt to manage them as well can cause issues. Always ensure to turn off Caddy's certificate management when using Fly.io.
2
Incorrect DNS configuration can prevent access to your site.
If DNS records are not set up correctly, users may not be able to reach your site. Always double-check your A and AAAA records after making changes.

Related Concepts

Static Site Generation
Web Server Configuration
Containerization With Docker