Deploying a Fully-automated Git-based Static Website in Under 5 Minutes

Sometimes you simply want to get a static website up and running as quickly as possible, whether it be the actual website, a placeholder, or a basic landing page. Recently I started using Caddy, a modern web-server focused on simplicity and security. It includes native support for Git and Let's Encrypt thanks to its plugin-based architecture.

RELATED: Implementing HTTPS for Chrome Users

I love how easy-to-use Caddy is, and I wanted to share a tutorial about how we can deploy a static website synced with a Git repository in under 5 minutes—all on a Droplet that spins up in 55 seconds.

Prerequisites

1. An Ubuntu 16.04 server configured according to our Initial Server Setup guide. While the goal is to get a website up quickly, we don't want to skimp on security. The guide will set up a secure environment for Caddy. Skip step 7 of the guide as we will be using a Cloud Firewall instead of a software firewall installed on the Droplet.
2. A domain name you own, to be used for the website.

Step 1 — Install Caddy

Caddy provides pre-built binaries on its website. Download Caddy on your Droplet:

```[php]{`

wget -O caddy.tar.gz "https://caddyserver.com/download/linux/amd64?plugins=http.git&license=personal"

`}```

This command will download a Caddy binary with the following settings:

Platform: Linux 64-bit

Plugins: http.git

License: Personal

Keep in mind that the personal license is available for non-commercial use only.

Extract the downloaded archive into a new directory and `cd` into it:

```[php]{`

mkdir caddy

tar vxf caddy.tar.gz -C caddy

cd caddy

`}```

The archive contains the Caddy binary and a Systemd service file. We will use both in this guide. First, install the binary:

```[php]{`

sudo cp caddy /usr/local/bin

sudo chown root:root /usr/local/bin/caddy

sudo chmod 755 /usr/local/bin/caddy

`}```

Because Caddy will serve as our front-facing web server, it will need to be able to listen on ports 80 and 443. Linux requires binaries to be run as root in order to listen on any port under 1024. It is however possible to allow specific binaries to do so without full root privileges:

```[php]{`

sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy

`}```

Then, create Caddy's configuration directories and set proper permissions:

```[php]{`

sudo mkdir /etc/caddy

sudo chown -R root:www-data /etc/caddy

sudo mkdir /etc/ssl/caddy

sudo chown -R www-data:root /etc/ssl/caddy

sudo chmod 0770 /etc/ssl/caddy

`}```

Finally, install the Systemd service file:

```[php]{`

sudo cp init/linux-systemd/caddy.service /etc/systemd/system/

sudo chown root:root /etc/systemd/system/caddy.service

sudo chmod 644 /etc/systemd/system/caddy.service

sudo systemctl daemon-reload

`}```

Step 2 — Configure DNS

Before configuring and starting Caddy we want to set up DNS so that Caddy is able to issue an SSL certificate via Let's Encrypt.

Add your domain name in the Domains page. We will create two DNS records pointing to the Droplet: one for IPv4 and one for IPv6.

The first will be of type A. In the hostname field, enter `@`. Select your Droplet in the Will Direct To field and add the record. The second record will have the same settings but with type AAAA.

Step 3 — Configure Caddy

For the purposes of this guide, we will use the following example website: https://github.com/kamaln7/basic-static-website

Caddy's configuration file will be located in `/etc/caddy/Caddyfile`. Open the file in a text editor (nano, vim, etc.) and enter the following:

```[php]{`

example.com {

tls you@example.com

internal /.git

git https://github.com/kamaln7/basic-static-website.git {

interval 300

}

gzip

redir 301 {

if {scheme} is http

/ https://{host}{uri}

}

}

`}```

Replace `example.com` with your domain name and `you@example.com` with your email address. This email address will be used to issue a Let's Encrypt certificate for your domain so make sure to enter a valid one that you have access to.

This configures basic sane defaults: gzip compression will be used when suitable and all HTTP traffic will be redirected to HTTPS.

The main piece of this configuration is the `git` block. This will configure Caddy to use the Git repository’s contents as the website's files, checking for updates every 5 minutes.

Step 4 — Start Caddy

Start Caddy, and enable it to start on boot:

```[php]{`

sudo systemctl start caddy

sudo systemctl enable caddy

`}```

It might take a few seconds for Caddy to receive the certificate from Let's Encrypt and clone your repository, but you should now be able to browse to your domain name and see your website.

Now, any changes you make in your Git repository will be automatically applied.

Step 5 — Configure a Firewall

DigitalOcean Cloud Firewalls make it very easy to configure a secure firewall. Browse to the Firewalls page and click on the Create Firewall button. If you already have one or more Firewalls on your account, you can access the Create Firewall page through the Create menu at the top of the page.

For the inbound rules, we will allow SSH, HTTP, and HTTPS traffic. Keep the outbound rules as is. Select your Droplet and create the firewall.

For further instructions on Cloud Firewalls, see our tutorial How To Create Your First DigitalOcean Cloud Firewall.

Optional: Step 6 — Enable Instant Deployments using Webhooks

Caddy will check the Git repository for changes every five minutes by default. While you can set the interval to a lower value, a better solution would be to configure GitHub to push any changes to Caddy instead. This will allow for near-instant updates.

Caddy makes this process very easy as well. The webhook will require a secret—you can use anything you want. The `uuidgen` program is a convenient tool that allows you to easily generate a random secure string. Simply run `uuidgen` and copy its output.

Edit `Caddyfile` and add the following line inside the Git block, replacing secret with your secret:

```[php]{`

hook /github_hook secret

`}```

Restart Caddy to apply the changes:

```[php]{`

sudo systemctl restart caddy

`}```

Then, configure Github to use the new webhook endpoint: browse to your repository's settings page and click on Webhooks. Add a new webhook and set the Payload URL to `https://domain.com/github_hook`. Set the the Content type to `application/json` and enter your secret and click on Add Webhook.

Now, whenever you push a change to your Git repository, it will be reflected on your website in seconds. For instance, if you are using the example website mentioned above, go ahead and change the highlight color to blue by replacing `b--gold` with `b--blue`. Commit the updated file and reload the page!

Conclusion

By following this guide, you will have deployed a fully-automated low-maintenance website using modern technologies such as HTTP/2 and Let's Encrypt. Caddy is a versatile web server and supports many great features such as on-the-fly Markdown rendering. You can find a list of plugins and features on the Features page on its website. Browse through the documentation to see what features you might want to enable and how to do so.

Kamal Nasser is a Developer Advocate at DigitalOcean. He is also a Computer Science student with a passion for software engineering and avocados. You can find him on Twitter @kamaln7.