使用 Astro、TailwindCSS 和 MDX 构建博客是一个强大的组合，能够帮助你快速创建一个高性能、现代化的静态博客。以下是实现步骤：

1. 初始化 Astro 项目

首先，确保你已经安装了 Node.js 和 npm/yarn/pnpm。然后，使用 Astro 提供的脚手架工具初始化项目：

# 使用 npm
npm create astro@latest

# 或者使用 yarn
yarn create astro

# 或者使用 pnpm
pnpm create astro@latest

按照提示选择模板（可以选择 minimal 或 blog 模板），并完成项目初始化。

2. 安装 TailwindCSS

在项目根目录下运行以下命令安装 TailwindCSS：

# 使用 npm
npm install -D tailwindcss postcss autoprefixer

# 或者使用 yarn
yarn add -D tailwindcss postcss autoprefixer

# 或者使用 pnpm
pnpm add -D tailwindcss postcss autoprefixer

然后初始化 TailwindCSS 配置文件：

npx tailwindcss init

在项目根目录下创建 tailwind.config.cjs 文件，并配置内容路径：

module.exports = {
  content: [
    './src/**/*.{astro,html,js,jsx,ts,tsx,vue,md,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

在 src/styles/ 目录下创建 global.css 文件，并添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

在 src/layouts/ 目录下的布局文件中引入 global.css：

---
import '../styles/global.css';
---

3. 安装 MDX 支持

Astro 默认支持 Markdown，但如果你需要使用 MDX（支持 JSX 的 Markdown），需要安装 @astrojs/mdx 插件：

# 使用 npm
npm install @astrojs/mdx

# 或者使用 yarn
yarn add @astrojs/mdx

# 或者使用 pnpm
pnpm add @astrojs/mdx

在 astro.config.mjs 中配置 MDX 插件：

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});

4. 创建博客结构

在 src/pages/ 目录下创建博客页面和文章。例如：

示例：博客列表页 (src/pages/blog/index.astro)

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

<BaseLayout>
  <h1 class="text-3xl font-bold mb-6">Blog</h1>
  <ul>
    {
      posts.map((post) => (
        <li class="mb-4">
          <a href={`/blog/${post.slug}`} class="text-blue-500 hover:underline">
            {post.data.title}
          </a>
          <p class="text-gray-600">{post.data.description}</p>
        </li>
      ))
    }
  </ul>
</BaseLayout>

示例：博客详情页 (src/pages/blog/[slug].astro)

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';
import { Markdown } from 'astro/components';

const { slug } = Astro.params;
const post = await getCollection('blog', ({ slug: postSlug }) => postSlug === slug);

if (!post) {
  return Astro.redirect('/404');
}

const { Content } = await post[0].render();
---

<BaseLayout>
  <h1 class="text-3xl font-bold mb-6">{post[0].data.title}</h1>
  <article class="prose">
    <Content />
  </article>
</BaseLayout>

示例：MDX 文件 (src/content/blog/my-first-post.mdx)

---
title: "My First Post"
description: "This is my first blog post using Astro, TailwindCSS, and MDX!"
date: "2025-03-24"
---

# Welcome to My Blog

This is a **MDX** post. You can use JSX here!

<div class="bg-blue-100 p-4 rounded-lg">
  <p>This is a styled box using TailwindCSS!</p>
</div>

5. 运行项目

在项目根目录下运行以下命令启动开发服务器：

npm run dev

打开浏览器访问 http://localhost:3000，即可查看你的博客。

6. 部署

你可以将博客部署到任何支持静态站点的平台，例如：

7. 扩展功能

通过以上步骤，你可以快速搭建一个基于 Astro + TailwindCSS + MDX 的现代化博客！

❤️ 文章随意转载❤️