---
title: "Quickly Convert Webflow to Static Site"
date: 2025-02-23T10:43:58-05:00
author: Mike Conrad
tags:
  - BASH
  - wget
  - caddy
  - linux
  - webserver
---

I recently ran into a situation where a small site that I help manage went offline.  I got the dreaded text on a Sunday morning as I was on my way to a coffee shop to focus on some side projects.  The site is built/hosted on Webflow so my first suspicion was a billing issue.  As soon as I got to the coffee sshop I logged into the Webflow dashboard to find out what was going on.

I confirmed that the site hosting plan had indeed been cancelled and the custom domain was disconnected.  This was unfortunate to say the least.  It meant that every visitor to the site was seeing a generic `403` error.  It was more unfortunate because there was an invoice for a full year worth of site hosting from the previous month.  In my haste, I missed the fact that that invoice was unpaid meaning there was some issue with the card on file.

None of that mattered in the moment though, my only goal was to get the site back up and running as fast as possible because the client in this case had been investing in some marketing and promotion campaigns to drive traffic to their site.  I did what any seasoned engineer would do in this situation, scraped the existing site, stood up a simple `ec2` instance, copied all the files over, installed `caddy` and switched the DNS records.  Here is my runbook.

## Step 1: Scrape the existing content
`wget` to the rescue on this one!  This one liner will grab all of the html files needed for the site.  I am not worried about any assets as they are all still hosted on Webflow and will still work in this case.
```shell
$ wget --recursive --no-clobber --page-requisites --html-extension --convert-links --domains example-site.webflow.io --no-parent https://example-site.webflow.io/
```

## Step 2: Set up EC2 instance
I won't go over creating an `ec2` instance in this article.  I created a basic micro instance and added a keypair.  Networking settings were set to allow ssh and http/https.  Once I had my instance set up I ssh'd into it and installed [caddy](https://caddyserver.com).
```shell
$ wget https://github.com/caddyserver/caddy/releases/download/v2.9.1/caddy_2.9.1_linux_amd64.deb
$ sudo dpkg -i caddy_2.9.1_linux_amd64.deb
```

## Step 3: Copy site files
Now we need to get the static files to our new server.  Pretty simple over ssh:
```shell
$ scp -r -i ~/EC2Key.pem ./example-site.webflow.io/ ubuntu@52.23.100.100:/home/ubuntu/
```
Once the files are transferred, we can ssh into the server and move them to the apppropriate directory:
```shell
$ ssh -i ~/EC2key.pem ubuntu@52.23.100.100
$ sudo cp -r /home/ubuntu/example-site.webflow.io/* /usr/share/caddy/
```

Great!  Now that are site files are in place and caddy is installed we just need to configure it.  This is an area where Caddy really shines.  Automatic TLS and simple configs.  Here is all we need (this site has multiple domains, you can specify them all on one line if they share the same config):

```shell
echo 'example.com, www.example.com, example2.com {
    root * /usr/share/caddy
    file_server
    try_files {path}.html {path}
}' | sudo tee /etc/caddy/Caddyfile
```
That's seriously all we need.  Caddy will handling requesting and managing the TLS certificates for us automatically.

We can run a couple commands to validate our config:
```shell
$ sudo caddy -c /etc/caddy/Caddyfile validate
2025/02/23 15:19:01.351	INFO	using config from file	{"file": "/etc/caddy/Caddyfile"}
2025/02/23 15:19:01.352	INFO	adapted config to JSON	{"adapter": "caddyfile"}
2025/02/23 15:19:01.353	INFO	http.auto_https	server is listening only on the HTTPS port but has no TLS connection policies; adding one to enable TLS	{"server_name": "srv0", "https_port": 443}
2025/02/23 15:19:01.353	INFO	http.auto_https	enabling automatic HTTP->HTTPS redirects	{"server_name": "srv0"}
2025/02/23 15:19:01.353	INFO	tls.cache.maintenance	started background certificate maintenance	{"cache": "0xc0000d3180"}
2025/02/23 15:19:01.353	INFO	tls.cache.maintenance	stopped background certificate maintenance	{"cache": "0xc0000d3180"}
Valid configuration
```

Now before we restart Caddy, we will need to update the DNS records of the site to point to our new `ec2` instance.  I won't cover that in this article as it varies by provider.  Once you have the DNS records updated it is time to reload caddy.  Before you run this step, verify that the DNS records have propagated.  I always find it helpful to run `nslookup` and verify.
```shell
$ nslookup example.com
Server:		127.0.0.53
Address:	127.0.0.53#53

Non-authoritative answer:
Name:	example.com
Address: 23.215.0.138
```

Assuming that the entries correctly point to the new server, go ahead and reload Caddy:
```shell
$ sudo -c /etc/caddy/Caddyfile reload
2025/02/23 15:22:05.223	INFO	using config from file	{"file": "/etc/caddy/Caddyfile"}
2025/02/23 15:22:05.224	INFO	adapted config to JSON	{"adapter": "caddyfile"}
```

That's it!  You can run `curl -k https://localhost` to ensure that Caddy is serving the proper files.  After a couple minutes, the certificates should be in place and you should be able to access your site externally.  One last thing you may want to do is remove the `Made with Webflow` badge that will pop up in the bottom corner of your pages.  Here is a quick one liner that should get rid of that for you.

```shell
$ grep -rlZ '</head>' /usr/share/caddy/ | sudo xargs -0 sed -i 's|</head>|</head>\n<style>\n.w-webflow-badge: {display: none !important;}\n</style>\n|g'
```

This searches all files in the specified directory and subdirectory, looks for the presence of the `</head>` tag and essentially prepends a `<style>` tag with the inline css needed to hide the badge.

This whole process took me a grand total of about 20 minutes or so to setup.  Obviously if you have a more complicated site you may need to adapt some pieces but hopefully this helps.