技术栈（Next.js + TypeScript + Tailwind CSS + Markdown）从零开始搭建一个博客网站的完整指南

以下是使用现代技术栈（Next.js + TypeScript + Tailwind CSS + Markdown）从零开始搭建一个博客网站的完整指南，包含代码示例和详细步骤：

---

一、技术选型

技术栈	用途	优势
Next.js 14	React框架 + 服务端渲染	高性能、SEO友好、API路由集成
TypeScript	静态类型检查	代码健壮性提升
Tailwind CSS	原子化CSS框架	快速构建响应式界面
Markdown	内容管理	易写易维护，适合技术博客
Vercel	部署平台	免费、自动CI/CD、全球CDN

---

二、环境准备

# 1. 创建项目
npx create-next-app@latest my-blog --typescript
cd my-blog

# 2. 安装依赖
npm install gray-matter remark remark-html @types/remark @types/remark-html
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 3. 初始化Git
git init

---

三、项目结构

my-blog/
├── content/               # Markdown文章
│   └── posts/
│       ├── first-post.md
│       └── ...
├── components/            # 可复用组件
│   ├── Layout.tsx
│   └── MarkdownRenderer.tsx
├── pages/
│   ├── index.tsx          # 首页
│   ├── blog/
│   │   └── [slug].tsx     # 动态文章页
│   └── api/               # API路由（可选）
└── styles/
    └── globals.css        # 全局样式

---

四、核心代码实现

1. 配置Tailwind (tailwind.config.js)

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: 'none', // 解除Markdown内容宽度限制
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

2. Markdown解析工具 (lib/posts.ts)

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'content/posts')

export interface PostData {
  id: string
  title: string
  date: string
  contentHtml?: string
}

export function getSortedPostsData(): PostData[] {
  const fileNames = fs.readdirSync(postsDirectory)
  const allPostsData = fileNames.map(fileName => {
    const id = fileName.replace(/\.md$/, '')
    const fullPath = path.join(postsDirectory, fileName)
    const fileContents = fs.readFileSync(fullPath, 'utf8')
    const matterResult = matter(fileContents)

    return {
      id,
      ...(matterResult.data as { title: string; date: string })
    }
  })

  return allPostsData.sort((a, b) => a.date < b.date ? 1 : -1)
}

3. 首页实现 (pages/index.tsx)

import { GetStaticProps } from 'next'
import Link from 'next/link'
import Layout from '../components/Layout'
import { getSortedPostsData, PostData } from '../lib/posts'

export default function Home({ posts }: { posts: PostData[] }) {
  return (
    <Layout>
      <h1 className="text-4xl font-bold mb-8">最新文章</h1>
      <div className="space-y-6">
        {posts.map(({ id, title, date }) => (
          <article key={id} className="border-b pb-6">
            <Link href={`/blog/${id}`} className="hover:text-blue-600">
              <h2 className="text-2xl font-semibold">{title}</h2>
            </Link>
            <p className="text-gray-500 mt-2">{new Date(date).toLocaleDateString()}</p>
          </article>
        ))}
      </div>
    </Layout>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const posts = getSortedPostsData()
  return { props: { posts } }
}

---

五、部署到Vercel

1. 推送代码到GitHub仓库
2. 登录 Vercel
3. 点击 "Import Project" 选择仓库
4. 保持默认配置，点击 "Deploy"
5. 完成！获得生产环境URL（如：https://my-blog.vercel.app）

---

六、扩展功能建议

1. SEO优化 ：添加next-seo包管理元数据
2. 评论系统：集成Utterances（GitHub Issues方案）
3. 搜索功能：使用Algolia实现即时搜索
4. 暗黑模式：添加Tailwind暗黑主题切换
5. 访问统计：集成Google Analytics或Umami

---

七、完整项目模板

推荐使用官方模板快速启动：

npx create-next-app -e https://github.com/vercel/next-learn/tree/master/basics/typescript-final

这个方案具有以下优势：

• 零成本部署（Vercel免费套餐足够个人博客使用）
• 超快加载速度（静态生成 + CDN分发）
• 完美SEO支持（服务端渲染）
• 移动端优先（Tailwind响应式设计）
• 内容易维护（Markdown文件管理）

建议先从基础功能开始，逐步添加扩展功能。开发过程中可以使用npm run dev启动本地开发服务器实时预览。