以下是使用现代技术栈（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 --typescriptcd my-blog# 2. 安装依赖npm install gray-matter remark remark-html @types/remark @types/remark-htmlnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p# 3. 初始化Gitgit 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
- 推送代码到GitHub仓库登录 Vercel点击 "Import Project" 选择仓库保持默认配置，点击 "Deploy"完成！获得生产环境URL（如：
https://my-blog.vercel.app）六、扩展功能建议
- SEO优化：添加
next-seo包管理元数据评论系统：集成Utterances（GitHub Issues方案）搜索功能：使用Algolia实现即时搜索暗黑模式：添加Tailwind暗黑主题切换访问统计：集成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启动本地开发服务器实时预览。
