独立开发自己的个人博客，拥抱技术的无限可能

2024-01-15 02:22:06

### 前言

技术的世界里，总有新的工具和框架不断涌现。对于前端开发人员来说，React和Next.js无疑是两颗冉冉升起的明星。在本篇文章中，我们将使用这两项技术，带领你打造属于你自己的个人博客。

### 技术栈与概述

在正式开始之前，让我们先来熟悉一下所要使用到的技术栈：

- React：一个强大的前端JavaScript库，可用于构建交互式用户界面。
- Next.js：一个基于React的开源框架，集成了路由、代码分割、静态站点生成等多种功能。
- Markdown：一种轻量级的标记语言，常用于撰写博客文章、技术文档等。
- Vercel：一个云平台，可帮助你快速部署静态站点。

### 一、开发博客

1. **项目初始化与文件结构搭建** 

```bash
npx create-next-app my-blog
cd my-blog

安装Markdown解析器

npm install remark

创建Markdown文件

mkdir posts
touch posts/first-post.md

编写第一篇博客文章

正文...

修改配置文件

在next.config.js文件中，添加以下代码：

const withMDX = require('@next/mdx')();
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
});

编写页面组件

import { MDXRemote } from 'next-mdx-remote';

export default function PostPage({ source }) {
  return <MDXRemote {...source} />;
}

export async function getStaticProps({ params }) {
  const { source } = await import(`../posts/${params.slug}.mdx`);
  return { props: { source } };
}

export async function getStaticPaths() {
  const posts = fs.readdirSync('posts');
  const paths = posts.map((post) => ({ params: { slug: post.replace('.mdx', '') } }));
  return { paths, fallback: false };
}