当前位置：首页 > React

react实现个人博客

2026-01-26 20:14:27React

使用React实现个人博客的步骤

初始化React项目

使用Create React App或Vite快速搭建项目基础结构。
npx create-react-app my-blog 或 npm create vite@latest my-blog --template react
安装完成后，清理默认模板文件，保留核心依赖。

配置路由

安装React Router实现页面导航：
npm install react-router-dom
在src/App.js中配置路由规则，例如：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Post from './pages/Post';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </BrowserRouter>
  );
}

设计数据层

选择Markdown作为内容格式，使用gray-matter解析Front Matter元数据：

react实现个人博客

import fs from 'fs';
import matter from 'gray-matter';

const getPosts = () => {
  const files = fs.readdirSync('posts');
  return files.map(fileName => {
    const slug = fileName.replace('.md', '');
    const fileContent = fs.readFileSync(`posts/${fileName}`, 'utf-8');
    const { data, content } = matter(fileContent);
    return { slug, data, content };
  });
};

构建UI组件

创建可复用的React组件：

// src/components/PostCard.js
export default function PostCard({ title, date, excerpt }) {
  return (
    <article>
      <h3>{title}</h3>
      <time>{date}</time>
      <p>{excerpt}</p>
    </article>
  );
}

实现样式方案

使用CSS Modules或Styled-components：

react实现个人博客

// PostCard.module.css
.card {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}

部署静态站点

通过Vercel或Netlify部署：

构建生产版本：npm run build
将生成的build文件夹上传至托管平台
配置自定义域名（可选）

扩展功能建议

添加评论系统（如utteranc.es）
实现标签分类功能
集成SEO优化工具（react-helmet）
添加暗黑模式切换
使用静态站点生成器（如Next.js）提升性能

关键依赖清单：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.2",
    "gray-matter": "^4.0.3",
    "react-markdown": "^8.0.7"
  }
}