diff --git a/content/post/quickly-convert-webflow-to-static-site.md b/content/post/quickly-convert-webflow-to-static-site.md new file mode 100644 index 0000000..9c09ac2 --- /dev/null +++ b/content/post/quickly-convert-webflow-to-static-site.md @@ -0,0 +1,85 @@ +--- +title: "Quickly Convert Webflow to Static Site" +date: 2025-02-23T10:43:58-05:00 +--- + +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 '' /usr/share/caddy/ | sudo xargs -0 sed -i 's||\n\n|g' +``` + +This searches all files in the specified directory and subdirectory, looks for the presence of the `` tag and essentially prepends a `