About this website

What's this website about?

This site isn't about showing off impressive projects or boasting about skills. It's about foxes. A quiet, cozy fox den where a fox can shyly leave useful guides, experiences, and curious thoughts. The goal is to create a place where others can wander in, find something helpful, and maybe discover something useful rather than stare at a list of achievements. While you won't find much about me here, curious foxes may still discover a hidden little Capture The Flag while exploring.

The weird little creatures you see throughout the website are all illustrations of the author's original character.

What technologies did you use?

Nuxt.js

This website is built with Nuxt3 Nuxt4, a framework based on Vue.js.

It's generated as a static site using Static Site Generation, while requiring fewer resources than SSR and providing much better SEO than a SPA. Static generation also ensures that every page has proper metadata, making search engines and social media previews work as expected.

It also makes it easy to automatically generate files such as sitemap.xml or RSS Feed.

Nuxt Content

Nuxt Content lets blog posts be written in Markdown without the need for a traditional CMS. Every article lives alongside the website's source code, making everything easy to manage and version using Git.

During the build process, the content is converted into static pages that can be served efficiently from a CDN. The result is a lightweight blog with fast loading times and SEO-friendly pages.

Comment system

The blog includes a custom comment system built with Fastify.

Key features:

• GitHub OAuth login
• Comment threads and replies
• Rate limiting
• Email notifications for new comments

It uses session-based authentication with cookies, stores comments in a SQLite database using Prisma, and sends email notifications via SMTP. The entire system was built specifically for this blog instead of relying on a popular third-party service.

The backend source code is available on GitHub.

Tailwind CSS

This website uses Tailwind CSS with Flowbite.

Tailwind makes styling the website fast and keeps the design consistent without writing much custom CSS. It also removes unused styles during the build process, helping keep the final CSS bundle small.

Flowbite provides a solid set of components that fit naturally into the project and save time when building common interface elements. Since everything is still based on Tailwind utilities, every component can be tweaked to match the look of this fox den without much effort.

Web hosting

Except for the comment system API, this website is hosted on Cloudflare Pages.

Since the website is generated as a static site, Cloudflare Pages turned out to be a perfect fit. It offers free hosting, automatic deployments, a global CDN, DNS services and Cloudflare's protection with almost no configuration required.

I chose Cloudflare Pages over hosting the website on my server for two reasons:

• Automatic deployments - Every push to GitHub automatically starts a new deployment, and within a minute or two the updated website is live.
• Reliability - Keeping the website separate from the rest of my infrastructure means it stays online even if my server decides to have a bad day. Since it's just a static website, there isn't much reason to host it myself. There's a good chance it will outlive the server it's managed from.

And it just works ¯\_(ツ)_/¯

Credits

• Nuxt documentation
• Tailwind CSS documentation
• Unresolved GitHub issues
• Stack Overflow
• ChatGPT and Claude (proofreading, brainstorming, no vibe coding)

Remember the CTF? Here is your flag - FLAG-FIRSTBLOGPOST.