5.9 KiB
title, date, author, tags
| title | date | author | tags | |||||
|---|---|---|---|---|---|---|---|---|
| Quickly Convert Webflow to Static Site | 2025-02-23T10:43:58-05:00 | Mike Conrad |
|
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.
$ 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.
$ 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:
$ 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:
$ 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):
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:
$ 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.
$ 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:
$ 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.
$ 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.