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

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




 Blog

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:

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:

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:

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:

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

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

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:

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:

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:

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:

hook /github_hook secret  

Restart Caddy to apply the changes:

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.

Leave a Reply

Your email address will not be published.