Home

Overview

This product is a personal website that serves as a space on the web for the user. It features blog posts and personal highlights. The website is built using the Jamstack architecture and can be easily deployed to any web server with minimal server configuration. The core of the architecture is Astro, a component-based static site generator that prioritizes extensibility and performance. The website follows good SEO practices, has an automatic RSS feed generation, implements a database-less comments system, and has a custom color scheme. The project is written in TypeScript and has a strict CI workflow to ensure code quality and website performance.

Features

• Jamstack Architecture: The website follows the Jamstack architecture, making it efficient and easy to deploy.
• Astro: Built with Astro, a modern, component-based static site generator that runs entirely at build-time and does not send any runtime JavaScript to web browsers by default.
• Continuous Integration and Deployment: Each commit triggers a continuous integration and deployment process powered by GitHub Actions workflows, ensuring code quality and deploying the site to Cloudflare Pages edge servers.
• Database-less Comments: The website uses Giscus as a database-less comments system, backed up by the GitHub Discussions of the repository.
• Automatic RSS Feed Generation: The website automatically generates an RSS feed on buildtime, allowing people and computers to consume blog posts from news reader applications.
• TypeScript: The project is written entirely in TypeScript, improving developer experience and code safety.
• Strict CI Workflow: The project has a strict CI workflow that ensures code quality and end-user website performance, using tools like Prettier, ESLint with additional accessibility lints, and Lighthouse CI.
• SEO Practices: The website follows good SEO practices, generating a robots.txt file, sitemap, and web manifest. Each page contains <meta> tags that describe it in a machine-parsable way.
• Open Graph Protocol: The website observes the Open Graph protocol, enabling beautiful link previews with custom images. Each blog post is associated with an Open Graph image that is procedurally generated from its title and description.
• Image Optimization: Images on the website are encoded in multiple formats and resized to fit different client viewport sizes, minimizing bandwidth while allowing fallbacks to less efficient arrangements.
• Critical CSS Inlining: Critical CSS styles are automatically inlined for better loading times using Critters.
• Custom Color Scheme: The website has a custom, refreshing analogous color scheme that defies the usual light-dark dichotomy, implemented with Tailwind CSS.
• Client-side Search: The website has a client-side blog post search powered by Pagefind.

Summary

The personal website is built following the Jamstack architecture using Astro as the static site generator. It has various features such as database-less comments, automatic RSS feed generation, and strict CI workflow to ensure code quality and website performance. The website also follows good SEO practices, implements the Open Graph protocol for link previews, optimizes images for different client viewport sizes, and has a custom color scheme. The development workflow is straightforward using npm, and the project is written in TypeScript for improved developer experience and code safety.