The Starting PointLink to heading

I had a website. It worked. My many years of experience working in tech gave me the knowledge that all I needed was three files sitting in a directory - index.html, script.js, and styles.css - dutifully served by nginx running in a Docker container on my Raspberry Pi to have my very own website. When you visited slimpy.me, you saw a webpage. It even had a little animation and it was mostly yellow and pink.

But it wasn’t a blog, or anything really. It was just a page with links to Jellyfin and Audiobookshelf - two services I’ve had running for at least 3 months now and all I’ve done is watch 1949’s The Third Man on the former and listened to a chapter of Andy Serkis reading Lord of the Rings on the latter. Safe to say Netflix and Audible needn’t worry about my fledgling media empire just yet.

Enter AstroJSLink to heading

After approximately four minutes of research, I decided AstroJS was the answer. It had a terminal-themed template that looked like what tech blogs look like. It generated static sites. It seemed like the natural evolution from my three-file setup.

I also found a template called multiterm-astro, copied all the files into my existing repo, and expected it to just work. My domain promptly returned a 403 error.

The Part Where I Should Have ThoughtLink to heading

Here’s what I knew:

• nginx was serving files from a directory
• I had put files in that directory
• Website no work

Here’s what I failed to consider:

• AstroJS source files are not website files
• The npm run build command exists for a reason and it’s function was described clearly in the README I apparently chose to ignore
• The dist folder is important

Instead of taking thirty seconds to think about this, I immediately launched into troubleshooting with Claude, creating increasingly elaborate theories about what might be wrong.

The Docker ConfusionLink to heading

My nginx setup was running via Docker Compose. Not plain nginx, but Nginx Proxy Manager, because at some point I’d decided I needed a GUI for something I touch once every three months. This detail seemed critically important, so we spent considerable time discussing reverse proxies, port mappings, and container networking.

The actual problem: my docker-compose.yml was pointing to ./slimpy-homepage/ instead of ./slimpy-homepage/dist/.

Five characters. We spent an hour troubleshooting for want of /dist.

Now I will lay part of the blame at the AI’s feet for not immediately suggesting the simplist solution but truthfully I just gave it bad prompts and expected results. I have since learned to request Occam’s Razor whenever troubleshooting for the sake of my own mental health.

For fun here are some highlights from my less-than-ideal prompting

“So for example I just pasted in the code and now my site just shows 403.”

“I ran it with “npm run build && npx serve dist” and it was running on http://localhost:12345. It also said it was running on http://192.168.0.100:12345 which is my pi ip but the connection timed out.”

“I’m thinking this might just be a case of something not being pointed in the right direction. For example does my docker-compose.yml need to have the path to the dist directory?”

To my surprise looking back it was actually me that sussed the real issue. Only took an hour and some shouting at my laptop to get there 😊

The SSH Remote Development TangentLink to heading

"I'm building on my Mac via VS Code SSH remote to my Pi" I explained, as if this exotic setup was surely the source of all problems. We discussed build locations, deployment strategies, and the philosophical implications of where code should be compiled.

The files were building fine. They just weren’t in the right folder.

Authentication TheatreLink to heading

At one point, we got into a whole discussion about creating a second container to serve the static files, setting up PM2 (whatever that means), creating systemd services, and implementing GitHub Actions for automated deployment.

All of this for a simple static site that could be served by nginx pointing at a folder. A folder that just needed /dist added to its path.

The ResolutionLink to heading

volumes:
  - ./slimpy-homepage/dist:/usr/share/nginx/html:ro # Added five characters

Container restarted. Website worked. Ordeal over.

Lessons LearnedLink to heading

1. When replacing a working simple solution, understand what made it work first
2. Read the build output. If it says “creating dist folder”, that folder is probably important
3. The simplest explanation is usually correct, especially when the problem is “files not showing up”
4. An hour of troubleshooting can save you five minutes of thinking

The Current StateLink to heading

The blog now runs on AstroJS. It has MDX support, which means I can write these posts in Markdown and theoretically add React components if I ever figure out why I’d want to. It has a terminal theme that makes it look like I know what I’m doing. It builds in just under 600ms unless I add an unoptimized image, in which case it takes 6.7 seconds for reasons I haven’t investigated.

Most importantly, it’s no longer three simple files I understood completely. It’s now several hundred files I understand partially at best, which I’m told is progress.

The next post will either be about setting up email with Proton and Cloudflare, or why my Jellyfin migration to Docker failed spectacularly. Both stories involve similar levels of overthinking simple problems, so they should fit right in.