fuxiaochen 个人博客项目教程

fuxiaochen 个人博客项目教程

fuxiaochen 🌈 一个简单的个人站，使用 Next.js 构建 项目地址: https://gitcode.com/gh_mirrors/fu/fuxiaochen

项目介绍

fuxiaochen 是一个使用 Next.js 构建的简单个人博客网站。该项目结合了 React 18、TypeScript、Shadcn/ui、Tailwind CSS 等现代前端技术，旨在提供一个高效、易用的个人博客平台。项目支持 SSR（服务器端渲染），并集成了多种功能，如 Markdown 编写和预览、明暗主题切换、SEO 优化等。

项目快速启动

环境准备

确保你已安装以下工具：

• Git
• Pnpm
• Node.js >= 20
• Docker、Docker Compose

获取项目代码

git clone https://github.com/aifuxi/fuxiaochen.git
cd fuxiaochen

安装依赖

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

pnpm install

准备数据库

开发环境

推荐使用 Docker Compose 启动一个 MySQL 数据库。项目已经准备好了一个 docker-compose.yaml 文件。

• Mac 或者 Linux

# Docker Compose 只启动 MySQL
make run_mysql8

# Docker Compose 只启动 Redis
make run_redis

# Docker Compose 启动全部服务
make run_all

• Windows

# Docker Compose 只启动 MySQL
docker-compose up -d mysql8

# Docker Compose 只启动 Redis
docker-compose up -d redis

# Docker Compose 启动全部服务
docker-compose up -d

准备 env 文件和配置

配置 .env 文件

.env 文件主要是给 Prisma 用的，Prisma 读取 DATABASE_URL 进行数据库连接。

新建一个 .env 文件，在 .env 文件新增以下内容：

DATABASE_URL="mysql://root:123456@127.0.0.1:3306/fuxiaochen"

配置 .env.development 文件

.env.development 文件是开发环境的配置文件，Next.js 在开发模式会自动加载 .env.development 的内容。

复制一份 .env.example，重命名为 .env.development，根据自己实际情况修改以下字段：

AUTH_GITHUB_ID=Github 授权应用 ID
AUTH_GITHUB_SECRET=Github 授权应用 secret
NEXT_PUBLIC_ADMIN_EMAILS=ADMIN 邮箱列表

启动开发服务器

创建表

pnpm db:push

生成 Prisma 类型文件

pnpm db:gen

重启 VS Code（Ctrl/Cmd + Shift + P，然后选 Reload Window），重新加载 TypeScript 类型文件。

启动开发服务器

pnpm dev

预览

• 访问前台: http://localhost:6121
• 访问后台管理: http://localhost:6121/admin

应用案例和最佳实践

应用案例

fuxiaochen 项目可以作为一个个人博客网站，用于记录技术学习、生活感悟等内容。通过 Next.js 的 SSR 特性，网站可以提供更好的 SEO 效果，同时 TypeScript 的使用也保证了代码的类型安全性。

最佳实践

1. 代码规范：使用 ESLint 和 Prettier 进行代码格式化和检查，确保代码风格一致。
2. 数据库管理：使用 Prisma 进行数据库操作，简化 CRUD 操作，并提供类型安全的数据库访问。
3. 主题切换：通过 next-theme 实现明暗主题切换，提升用户体验。
4. 图片优化：使用 sharp 压缩图片成 webp 格式，减小图片体积，加快访问速度。

典型生态项目

1. Next.js：用于构建服务器端渲染的 React 应用。
2. React 18：用于构建用户界面的 JavaScript 库。
3. TypeScript：提供类型安全性的 JavaScript 超集。
4. Tailwind CSS：用于快速构建样式的 CSS 框架。
5. Prisma：用于简化数据库操作的 ORM 工具。
6. next-auth：用于实现用户认证的 Next.js 插件。

通过这些生态项目的结合，fuxiaochen 项目能够提供一个高效、易用的个人博客平台。

fuxiaochen 🌈 一个简单的个人站，使用 Next.js 构建 项目地址: https://gitcode.com/gh_mirrors/fu/fuxiaochen