Do you have a personal site? If you dabbled with computers in your lifetime, there's a really high chance that you do. Maybe it's not hosted, you've watched a video on HTML when you were 10 and decided to make something of it, maybe it's a simple Neocities page, a Blogspot site or even a Weebly cookie-cutter homepage. Whatever it is, it's a nice feeling to know that you have a corner of the internet that's yours.
While nowadays hosting infrastructure for your site is hard and expensive, as each user requires more and more bandwidth, for 99.99% of us, this doesn't matter. Most of our personal sites are relatively obscure, with free hosting tiers covering all traffic, to accidentally create and host another Wordle with millions of active daily users isn't on our schedule.
But infrastructure costs aside, there's another good cost that's associated with creating and maintaining a website - time for development. Sometimes we are limited in the amount of tools that we can use to make sites, for example, if all you have is Neocities, you're essentially left with plain old HTML, CSS and JS, all hand-written. While for small, simple sites this is more than enough, for larger projects, this is nowhere near ideal. Committing to hand-writing hundreds of lines of JS is going to end up in buggy and slow code, which is why nearly everyone, including small sites, have migrated to using libraries, as even the most basic ones (Vite, Alpine, TypeScript, ESLint) can increase productivity and decrease stupid bugs ten-fold. Or if you used GitHub Pages before the days of CI/CD, you had plain HTML or minimal Jekyll at your disposal.
We live in a very, very different world now. A world where computing resources have become as cheap as water, and thus, you can join the dark side and totally over-blow your blog into a brilliant masterpiece of complexity. This guide will be based off my real website, zxyz.gay (GitHub).
Always think big.
What do you want your homepage to have? A bio? Some contact info? That's clearly not good enough. Try several services, several pages. A simple blog? Make it two. One JS framework? Make it three.
Here's the layout of my site:
- Frontpage
- Guestbook
- OS Reviews
- URL Shortener
- Blog
In short this makes 3 backends, 2 frontend frameworks (3 if you count Jekyll) and 3 languages. Does anyone need this much stuff? Probably not, but, if we can add it, then, why not?
If it wasn't enterprise, it is now.
The mindset of enterprise-level software is always the best to follow. For example, Sentry is a good service for crash reports, so - add it to every single file of your site. Even if there's barely anything in there that could fail, add it anyway, can't be too sure.
"Yeah, I can see this being Google-scale"
Nowadays, nearly all developer tools are open sourced and available for anyone with an internet connection, so, make use of them. Use Docker for everything, even your static site, because, why not? Hell, throw in some Kubernetes in there too.
Another trend you can take advantage of is making your site into a monorepo. You can use Nx or Turborepo, both free, turn your semi-simple site into something straight out of Facebook's arsenal. Don't forget to not include any docs, no one else should be able to host it, only you.
This is your ideal site configuration.
Remember - your computing resources don't matter.
As I said previously, computing resources are cheap. A lot of it is free now, too. This means you can do whatever crazy stuff you want and you can totally get away with it.
For hosting, any free static file service will do, many of them have quotas that are far beyond what you'll even care to reach, so, it doesn't matter that much.
For backend, many free sites like Deta, Vercel, Northflank, Koyeb, Glitch. Make as many services for your sites as you desire without even entering in your credit card.
For source code, GitHub hosts anything and everything, a whole lot of it without any limits whatsoever. I have 40+ repos, one of them being 5 Minecraft worlds, with all the world files and even the server JARs included. It's essentially cloud storage, for free. Blow up your site with files, what's the worst that could happen?
For building, CI/CD pipelines are really, really cheap and really, really fast. GitHub Actions has 2000 free minutes on private repositories and unlimited free minutes on public repositories. Create tens of pipelines, use several compilers, upload to a multitude of hosting services, it's all free.
For coding, GitPod has 50 free hours of private Visual Studio Code workspaces. This is not only convenient, as you get to install less stuff on your computer and the Google Cloud container will most certainly be faster than your machine, it will also allow you to code on your projects from your Chromebook or your iPad. But most importantly, you can have 10 services and run them all without blowing your fuse. Thus, you're free to over-engineer even more.
Real world example - stupid me.
Now, I didn't really want to over-engineer my site. It just sort of happened, I wanted to learn several technologies and adding pages to my site was fun, so, it just ended up like this.
Frontpage
The magnum opus, the self-made Carrd. Many years of iteration, ending up in a design that's questionable at best and a codebase with so many compromises you really couldn't count them all.
Technologies used:
- Vite - build tool. Bundles all JS modules.
- Vanilla HTML, CSS - Simple enough
- Alpine - Simplest framework I found, used for the guestbook.
Hosting providers:
- GitHub Pages - main host
- Neocities - mirror
Guestbook
You can read about the infrastructure and its history in detail in my other blog post.
Technologies used:
Hosting providers:
URL Shortener
I don't really use it for anything, it's more of a joke, so I tried to slim it down to the bare essentials with a hosting provided that would be willing to just work.
Technologies used:
- Express
- Deta Base
Hosting providers:
- Deta
OS Reviews
It's essentially a blog, but with its infrequent updates, and the fact that it was made before the blog, it ended up being a simpler Markdown-flavored site. With styling being primarily made with Tailwind, I got the final design in under a day, which is rather simple, yet pleasant.
One of the downsides of Jekyll is the fact that it takes 4-10 minutes to build the entire site, generating hundreds of images scaled differently for mobile and desktop devices and many Ruby dependencies that take... a really, really long time to install.
Since it's the same static site as the frontpage, I just build it and deploy it into a subdirectory of the site, which is then mirrored to Neocities.
Technologies used:
Hosting providers:
- GitHub Pages
- Neocities
Blog
The blog is pretty boring, the amount of boilerplate that Vercel and Sanity have done made it a really easy project to get started on. A headless CMS allows for quicker build times, skipping the image optimisation. With new features like on-demand incremental static generation in Next, it also means that updating or creating a post can be done in seconds rather than minutes, unlike the Jekyll setup.
But ultimately this does leave you with two billing accounts to worry about - the usage quotas for Vercel and Sanity. While their free tiers are generous, you might want to think twice about the amount of vendor lock-in you're signing up on if you plan your blog to have thousands of viewers. Which, for this tutorial anyway, is rather perfect.
Technologies used:
Hosting providers:
- Vercel
- Sanity
And now - you're a master-class over-engineer.
Remember, being a 10X engineer doesn't mean that your 10X will be towards good quality engineering, but rather totally incoherent, unreadable code that 20 people will later have to try and maintain.
Take these tips as do or do not do's, on one hand I can see that this is a total mess and I should probably spend some time trying to simplify it. But on another hand, it's rather fun to learn to use that many tools in the real world. I'm not trying to make a new unicorn, I just wanna learn.
So go make something, chances are - it won't be good, but, it doesn't matter. Start up Microsoft FrontPage and make your own next site. It's only one $300 monthly AWS bill away!
Top comments (0)