npm create astro@latest -- --template larry-xue/astro-start-kitThis project demonstrates the integration of Astro with Tailwind CSS, Alpine.js, and MDX.
- Astro: Fast, modern static site generator
- Tailwind CSS: Utility-first CSS framework
- Alpine.js: Lightweight JavaScript framework for adding interactivity
- MDX: Markdown for the component era
- Content Collections: Type-safe content management
- Responsive Design: Mobile-friendly layout with proper typography
- Clone this repository
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:4321
src/blog/: MDX blog postssrc/components/: Reusable componentsAlpineCounter.astro: Demo Alpine.js counter componentBlogPostList.astro: Component to list blog postsProse.astro: Typography component for styling Markdown content
src/pages/: Page components and routesblog/[...slug].astro: Dynamic route for blog posts
src/styles/: Global stylessrc/layouts/: Layout componentsmain.astro: Base layout with HTML structure and metadata
src/content.config.ts: Content collection configuration
This project includes Alpine.js, a lightweight JavaScript framework for adding interactivity to your HTML.
- AlpineCounter: A simple counter component demonstrating basic Alpine.js usage
- Location:
src/components/AlpineCounter.astro - Features: Increase, decrease, and reset counter
- Location:
This project uses Astro's Content Collections API to manage MDX content in a type-safe way. The project implements the latest Astro v5 Content Collections API.
- Location:
src/blog/ - Schema: Defined in
src/content.config.ts - Required Fields:
title: Stringdescription: StringpubDate: Date
- Create a new
.mdxfile in thesrc/blog/directory - Add the required frontmatter:
--- title: "Your Blog Post Title" description: "A brief description of your blog post" pubDate: 2023-11-10 --- Your content here...
- Write your content using Markdown and JSX
The project includes a base layout component that provides the HTML structure for pages:
- Location:
src/layouts/main.astro - Features:
- Basic HTML structure
- Meta tags
- Global CSS imports
---
import '../styles/global.css';
const { content } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{content.title}</title>
</head>
<body>
<slot />
</body>
</html>The project uses a custom Prose component that applies Tailwind's typography plugin styles to Markdown content. This ensures consistent and beautiful typography across all blog posts.
<Prose>
<Content />
</Prose>The Prose component includes responsive styling and dark mode support.
import AlpineCounter from '../components/AlpineCounter.astro';
<AlpineCounter />import { getCollection, render } from 'astro:content';
// Get all blog posts
const blogPosts = await getCollection('blog');
// Render a specific blog post
const { Content } = await render(entry);