Hello World: How this website came to be
This website you’re looking at has been on quite the adventure to get to where we are now.
Tasked with writing a blog for my university module, I assessed my options:
- Use a pre-made blog platform like Blogger, WordPress or Wix
- Code the entire site myself, making this assignment 10x harder for myself
If you know me, you’ll know of course I chose the second option! “But why,” I hear you ask.
You see, it’s not about the assignment. I have actually needed a blog for years, so I wanted to make one from scratch exactly how I like it. I just really, really like coding. It’s a lot of fun and I find myself losing hours to it. I plan to retroactively go and document all of my other projects here once I’m done.
While all the new kids are using a JavaScript framework like React for their websites, I’m an old school dev who still uses PHP in 2024. So staying well within my comfort zone I whipped up a blog site in just a few hours. I used ‘raw HTML’ with the Bootstrap CSS framework for the frontend, and PHP for the backend. Take a look!
It’s a little basic, but I think it’s kind of pretty! However behind the scenes, things weren’t so great..
Everything is wrong with this
Starting with positives, the important part is that it worked. So why does the site look a lot different now? Because although it worked, it only worked..sometimes. Every now and then, all requests to the webserver would time out, and I couldn’t figure out a way to consistently reproduce the issue. It had other lesser issues too, like how it wasn’t very convenient to write posts. I had all of the posts stored in a single JSON file because a database was way out of the scope of this project at the time.
I was running a Caddy stack in Docker Compose, with PHP-FPM and MariaDB. This setup was, for the most part, flawless. Caddy is a nice webserver that makes SSL cert management quick and easy. In order to debug the timing out issue, I enabled and monitored the trace logs (to see each and every request as the server receives them). A request would come up every time as normal, but when it timed out? Nothing. Very strange. I was expecting an error with the connection to PHP maybe, but no. Same with when I monitored PHP’s logs - all fine until the timing out began to occur, where it would do nothing with no errors.
After some research, I found that maybe PHP was limiting the amount of child processes for its site rendering. I personally saw no error indicating this, and my site does not have enough traffic for this to really be an issue anyway, but it was worth a try. I used Jair Cueva Jr’s answer on ServerFault to update PHP’s config when building the container to increase the maximum allowed processes. Unfortunately, as you might have expected, it didn’t help.
At this point I was at a loss - the server just wasn’t playing ball and there was no indication at all as to why. I went back to my brother for advice, he had a quick look over and couldn’t think of anything either. So perhaps underwhelming, but desperately needed, I decided to part ways with old Bulbasaur and start fresh. Yes, I name my servers after Pokémon.
Hugo
I decided to take my brother’s advice and go serverless. He suggested I use Hugo, a piece of software that generates static websites written using Markdown. He also suggested I use CloudFlare Pages to host it.
I followed CloudFlare’s official guide on setting up a site with Hugo, such that whenever I commit changes to a GitHub repository they are automatically pulled, built with Hugo and deployed to CloudFlare. This method is a very elegant alternative to what I was doing before. Of course I don’t get the benefits of PHP anymore, but do I really need a dynamic site for a blog? The answer is ehh.. no, not really.
Whereas before I would write my posts in a JSON file with dodgy HTML baked into the body of text, I can now use Markdown to fully customise how the text is formatted! It’s clean, easy, efficient, always online, serverless, incredibly fast, and most importantly, it all just works.
I even figured out how to add comments using a service called Utterances, which is a GitHub issue-based commenting system. (edit 2024-10-15: I now also have a working view counter using CloudFlare Workers!)
I’m very happy with how it all turned out. Thanks for reading.
P.S. The original issue was more than likely DNS related. I had already spent too much time investigating, and I was already planning to start over anyway.