This Astro Starter Kit provides a robust template for easily creating an engineering blog, designed for both single and multiple authors. It boasts a rich set of features including straightforward configuration, minimal yet customizable styling, and excellent Lighthouse performance (100/100). The template is highly SEO-friendly, incorporating canonical URLs and OpenGraph data, and leverages astro:assets for optimized image handling.
Key features include:
- Content Management: Supports Markdown & MDX, an author system with co-authoring capabilities, blog pagination, and draft management.
- Discovery: Integrated search functionality using Fuse.js, topic categorization, sitemap, and RSS Feed support.
- User Experience: Features a dark mode with system preference detection and a toggle button.
- Optional Backend Services: Includes an optional feature for post reactions and a blog post ranking page, utilizing Appwrite's free tier for backend services.
The template is built with modern web technologies:
- Astro: The core framework that ties all components together, enabling fast, content-focused websites.
- Solid.js: Used for interactive elements like search (all
.tsxfiles) and other JavaScript-driven features, providing a reactive and efficient UI layer. - Tailwind CSS: For utility-first styling, allowing for rapid and flexible design customization.
- Fuse.js: Powers the efficient client-side search logic.
- TypeScript: Ensures type safety and improves developer experience across the entire codebase.
Getting started is simple: npm create astro@latest -- --template eddyvinck/astro-engineering-blog. Configuration involves editing src/consts.ts for site-wide settings like BRAND, SITE_TITLE, SITE_URL, and SITE_DESCRIPTION, and customizing colors in tailwind.config.css. For advanced features like post reactions, Appwrite API keys can be added to a .env file. The project structure is standard for Astro, with src/pages/ for routes, src/components/ for UI components, src/content/ for Markdown/MDX collections, and public/ for static assets. CLI commands like npm run dev, npm run build, and npm run preview facilitate development and deployment.
