This website took far too long to make
Making a website should take less time; then again, ideas derived from buying domains can quickly derail into things that go way beyond the scope that someone had in mind when starting to work on a side project. So let me share my experience.
The original idea for this website was to be a portfolio for a small consultancy software company or the welcome page for a gaming café that I wanted to open back in 2019! Unfortunately, neither of those ideas has come to fruition, but I kept some concepts for this project. The website made it through after a total of 3 very costly rewrites because I was never satisfied with any of the prototypes I created, nor the experience in any of them was great; they had ugly user experiences and designs and were challenging to maintain.
To illustrate how bad one of the prototypes was and to clarify, this is not on the technologies themselves but my wanting to reinvent the wheel when there are perfectly viable solutions that allow for shipping things. For that prototype, I used Next.js after a somewhat unfortunate incident with Nuxt. This Vue equivalent framework prevented me from using images since, at that time, Nuxt had one of their first release candidates for version 3.0. Of course, I could beat the release window by using the release candidate, but that was a bad idea; for a release candidate, it had plenty of missing features that would've taken a while to be available before I could use them.
So for the Next.js prototype, I had a pleasant developer experience; the prototype used Sanity.io for the CMS (Content Management System) and Tailwind to help me with the design; I was even able to deploy a few iterations of the website using Vercel, which at that time, it helped me quickly share the early concepts with a few friends to one get some encouragement and two get some feedback as to what could be missing. Unfortunately, Next.js' quick development pace left me behind on a few features since the documentation changed across versions, namely the same thing as Nuxt, which was image processing; I was able to work around this thanks to the fact that the documentation was versioned, but some of the features I wanted to use changed entirely across versions which would've left in a difficult spot in case I wanted to migrate to a newer version of Next and since the intent of this project is to be a hobbyist website, I couldn't justify spending time on updating the Frontend whenever a new version of Next.js became available, especially when it involved breaking changes.
After those failed prototypes, I moved onto a CMS that included everything since I could spend more time writing and less worrying about upgrading Frontend frameworks. Ideally, it would be a CMS that I could self-host because if I weren't going to be able to code everything the way I wanted, I would at least have to have control over almost every aspect of the stack behind the CMS I went for, my top requirements were:
• Open Source.
• Made with a programming language I feel comfortable with.
• The CMS can ship the content via an API as a headless CMS.
A few CMSs fit those criteria, namely WordPress and Ghost, the latter being my preference. So the final stack for my website looks like this:
• Ghost, as the Content Management System
• Cloudinary serves the images of my website, most of them, as there are a few images that Ghost handles.
• Umami tracks visits and the average visit time while complying with GDPR laws.
• DigitalOcean is my infrastructure provider that hosts the Umami and Ghost instances.
• Webpack to develop my custom Ghost theme forked from the open-source Edition theme from the Ghost team.
• Formspark manages the contact form and sends me notifications when people submit queries.
• hCaptcha prevents my Formspark submissions from being flooded with spam; this is necessary for today's Internet, where spam is a real problem.
• Varnish is a caching HTTP reverse proxy that I use to cache the contents of my website and improve response times.
• Mailgun as part of Ghost's dependencies. This service emails people who wish to subscribe to my newsletter (WIP).
• Stripe handles tip jar contributions.
What about other concepts that made it through the cutting process?
That would be the welcome illustration for the website! To be more specific, the character you see in the image is an original character created by the fantastic Kamochiiru, his name is Trace, and he has his section on this website. Please take a look if you wish to know more about him and some of my plans for him moving forward.
What drove me to make a final push and get into publishing a blog?
One of Hacker News' top posts for the past month (as of the time of this writing), written by Jose M., talks about owning your work and getting it out, and to quote my favorite part of the post, "If it's important enough for you to spend time creating something, it's important enough to have a safe online place."