A journey through many services
Over my many years of being online, I’ve toyed with personal sites and blogs, but never stuck with one platform. From my early days with Tripod & Geocities, I eventually moved to shared hosting providers, phpBB forums, and various platforms like LiveJournal and Medium. With each transition, I gained technical knowledge and self-awareness. However, I never committed to a single platform due to:
- The absence of a regular habit and location for writing down my thoughts
- The intimidating prospect of allocating time to sit, think, and write
- Doubting the significance of my ideas and experiences
I eventually overcame these mental barriers by acknowledging the importance of self-reflection, writing, and sharing. I also aimed to create content that could be read and appreciated by my family, friends, children, and coworkers. Finally, I wanted my own space where I could own my data and have a playground to build and test out new ideas.
The building blocks
To build kebab-case, I leveraged Astro and modified one of the starter templates, AstroPaper. I chose Astro because I loved the developer experience and the focus on delivering zero default Javascript to the frontend. The framework’s balance between minimal tooling and flexibility allows me to concentrate on creating content while also enhancing the site and learning more over time. It’s important for frameworks to come with the right defaults and plugins, and I think Astro strikes the right balance. Furthermore, Astro’s core team demonstrated strong engagement with the community, signaling the framework’s potential longevity.
I also opted for Markdown given its versatility across various tools, including IDEs like VSCode, README files, and even Google Docs. I just need to remember the syntax for crafting links:
For simple, GDPR-compliant analytics, I chose Plausible based on Will Larson’s recommendation. Although a paid solution, it offers exactly what I need (visitor sources, duration, and pages visited) without requiring data sharing with large analytics and ad networks.
I’ve also leaned into using TailwindCSS for most styling. I’ve been pleasantly surprised with the level of flexibility and control it gives me over my CSS. It’s also made it much easier to create consistent and reusable styles across components.
One of the pieces of functionality I really enjoy from AstroPaper is the inclusion of satori, a library that helps generate SVG images from HTML. Satori is used to generate Open Graph-compatible images, so that if I share a URL on a social media service, it’ll show a relevant image (instead of a plaform default, or even less enticing, nothing at all). SVGs aren’t supported by all services, so I added sharp to convert the SVG into a PNG file. The code to generate and convert the image looks something like this:
async function generateOgImage(mytext = SITE.title, date?: string) {
const svgText = await satori(ogImage(mytext, date), options);
const svgToPng = await sharp(Buffer.from(svgText)).png().toBuffer();
return svgToPng;
}I’ll share more here as interesting bits and pieces come up, but don’t hesitate to reach out if you have any questions.