Compare commits
3 Commits
bd02a69a06
...
b1ce65902b
Author | SHA1 | Date | |
---|---|---|---|
b1ce65902b | |||
8dd2705ec2 | |||
50497c1416 |
8
README.md
Normal file
@ -0,0 +1,8 @@
|
||||
```shell
|
||||
git clone https://git.hackanooga.com/mikeconrad/hackanooga.com.git
|
||||
cd hackanooga.com
|
||||
git checkout master
|
||||
git submodule init
|
||||
git submodule update
|
||||
hugo server --disableFastRender
|
||||
```
|
@ -2,6 +2,11 @@
|
||||
author: mikeconrad
|
||||
title: About Me
|
||||
---
|
||||
|
||||
#### Keeping systems up and running with automation, a lot of elbow grease and sometimes a little luck.
|
||||
I have spent the last 10 years refining my craft. My solid grasp of fundamentals in computer networking and software development set me apart. I have a passion for learning and growing in my trade and a relentless desire to solve complex problems and scale systems.
|
||||
My curiosity and determination constantly drive me to explore new frontiers and push the boundaries.
|
||||
|
||||
With experience in DevOps and Site Reliability Engineering (SRE), I've spent years fine-tuning the art of keeping systems up, running, and automated. Whether it's untangling complex and obscure bugs in production to optimizing and automating test environments, I thrive on making things work smoothly behind the scenes. This space is where I share my thoughts on software, automation, and the tech that powers everything we rely on daily.
|
||||
|
||||
I am an engineer with 10+ years in the industry. My journey into software development started out in a call center in Tampa Florida doing tech support for Dell Computers. The year was 2010. I was into technology and computers and had studied hard to ace my `CompTIA Network+` certificate but I didn't have any background in programming.
|
||||
|
85
content/post/quickly-convert-webflow-to-static-site.md
Normal file
@ -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 '</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.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 44 KiB |
BIN
static/wp-content/uploads/2024/03/chadev-tile-alt-1536x1152.jpg
Normal file
After Width: | Height: | Size: 135 KiB |
BIN
static/wp-content/uploads/2024/03/chadev-tile-alt.jpg
Normal file
After Width: | Height: | Size: 220 KiB |
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 554 KiB After Width: | Height: | Size: 174 KiB |
Before Width: | Height: | Size: 750 KiB After Width: | Height: | Size: 234 KiB |
Before Width: | Height: | Size: 926 KiB After Width: | Height: | Size: 284 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 443 KiB |
Before Width: | Height: | Size: 395 KiB After Width: | Height: | Size: 136 KiB |
Before Width: | Height: | Size: 681 KiB After Width: | Height: | Size: 226 KiB |
Before Width: | Height: | Size: 810 KiB After Width: | Height: | Size: 253 KiB |
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 68 KiB |
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 24 KiB |