hr
And so it begins! Alright, I guess I should first start with a question you're all probably wondering, who even am I?
Who?
I'm a 18 year old ✨ aspiring ✨ full stack dev sort of gravitating towards the backend part of fullstack. Currently I've done a few commission type jobs for a few people, out of which I'd like to give a shoutout to some of the best people I've ever worked with, Grant Imler and Isaac H . These people provided me with soo many opportunities and I definitely wouldn't be where I am today without them.
I'm currently still open for comissions, but I'm really starting to love open source development so I'm doing a bit of that too.
Alright, enough about me, let's get into why, what and where this blog came into existance.
Why?
So, why did I make this blog?
I felt like writing my random thoughts and giving them to the world, also I feel like having a blog would help with my reputation as a developer. It was also a really good excuse to try doing something with Svelte, which, so far, has been really amazing.
What?
I won't get too much into detail about how this was made since it's literally just a static SvelteKit project that parses markdown files(the posts), but I do think you'll enjoy reading about my pain and suffering durign the process. 😉
So why Svelte?
Well, I wanted to learn Svelte… buuut I also needed a good way of handling SSG (Server side generation) and for that I basically had 2 options: Astro and well… Svelte. These were the only two options that I knew could handle SSG well. A couple of my colleagues used Astro for building their blogs and I've heard that Astro still doesn't have good IDE support. So me being me, I didn't even give it a chance and went straight into Svelte.
And I have to say, I was not disappointed, Svelte has a few of it's quirks (but so does every other framework) but it's a really nice and intuitive framework. I would even go as far as to say it stands a chance to be my second favourite framework, right next to React.
The tech stack
Currently the tech stack looks like this:
- Svelte(Kit)
- the actual web framework
- handles SSG, compression and other optimizations
- MDsveX
- OpenGraph Images
- Custom built solution for generating banners on the fly
- Fonts
- JetBrains Mono
- Roboto
Wow, that list is short. At the time of writing this, I genuinely expected this to be longer…Well I hope this shows that making a blog is really not that complicated. (don't use wordpress though, please).
Where?
Ooo, this is exciting! Time to talk about how I deploy this thing. 🚚
At first, while I was still developing this, I used Netlify. And I originally planned to use this to serve the production site. But that's boring, it just works, that's not fun.
Seriously though, I have nothing against netlify, it really is a just works platform. But that doesn't mean it's flawless. One of the things I find slightly frustrating about it is that it has obnoxiously long load times here in Europe (that might just be my bad internet tho 🤷).
Signal 👀
My current solution of choice is Signal. And no, not that Signal. See, a good friend of mine Luc van Kampen took on a personal project of making a........
…, ok whatever, basically it deploys your website and serves it, here's the GitHub repo. Anyways so I chose that to host my website. And so far, it's been amazing. Deploy times are extremely quick, autodeployment was really simple to set up and the loading times are ⚡ blazing fast.
At the time of writing, there's one instance of it deployed on a shared k8s cluster of ours so there's no public interface for it.
SVGs ❤️
So, you know OpenGraph? That protocol "that enables any web page to become a rich object in a social graph". If this doesn't sound familiar, think of it as a spec for those nice looking Discord/Slack/Twitter/Facebook embeds that get generated once you paste a link to some site. And if you haven't already noticed, this blog has those, and they change for every blog post. Example for this specific post:
As you can see, it has the title and the description in the image itself.
So how did I achieve this?
SVGs
I'm still a bit fascinated how you can generate images just using text, no actual computation needed.
If you take a look at the url of that image:
https://cards.antony.cloud/post?title={title}&description={description}&type=pngyou can see that it goes to a service that I wrote and provides it with a title and a description and it dynamically generates the image. This is handled by SSG so built html pages will have them already filled in. Keep in mind that images are in SVG format by default, and OpenGraph does not support using SVGs as an image… crap. I figured converting an SVG to a PNG would not be hard, and I was right, it was not hard. But since I originally wrote this as a serverless function on Netlify (which was hell, I'm never doing that again), the environment was missing a font I needed so the final PNG images were looking terribly broken. In the end I ended up just writing a fastify app to serve the images.
What did we learn from this?
SVGs ❤️, Serverless 💩
Final words
Alright folks, that's it. If you made it this far, I'd just like to thank you for reading this post, hopefully you enjoyed it. Have a nice rest of your day 😄