Skip to content

Latest commit

 

History

History
194 lines (116 loc) · 5.36 KB

README.md

File metadata and controls

194 lines (116 loc) · 5.36 KB
Raw

fuxiaochen

本项目是一个个人学习技术和探索的项目，随时可能有 breaking change。不建议！！！不建议 ！！！不建议 ！！！用于生产环境，欢迎一起互相交流学习～

简介

Next.js React TypeScript Tailwind CSS Prisma Blog

一个简单的个人博客网站，使用 Next.js + React 19 + TypeScript + Shadcn/ui + Tailwind CSS 开发

特性

  • 使用 Next.js v15 + React 19 hooks 进行构建，完美支持 SSR

  • 使用 TypeScript 编写，提供类型安全性和更好的开发体验

  • 使用 Prisma 简化数据库 CRUD 操作

  • 使用 Tailwind CSS + shadcn/ui 编写样式和组件

  • 使用 iconify 支持各种 svg 图标

  • 使用 Bytemd 实现 Markdown 的编写和预览，自己编写 Bytemd 插件优化 Markdown 的预览

  • 使用 next-theme 支持明暗主题切换

  • 使用 next-sitemap 生成全站 sitemap ，SEO 友好

  • 使用最新的 next-auth v5 支持 Github登录后台管理

  • 使用 ahooks 提升开发效率

  • 图片上传后使用 sharp 压缩图片成 webp 格式，减小图片体积

  • 图片上传到阿里云 OSS，加快访问图片访问速度

  • 响应式设计，对部分屏幕尺寸和设备进行适配

  • 集成后台管理功能，如博客、片段、标签、笔记管理等

快速开始

环境准备

确保你已安装

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

获取项目代码

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

安装依赖

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

pnpm install

准备数据库

开发环境，推荐使用 Docker Compose 启动一个 MySQL，项目已经准备好了一个 docker-compose.yaml 文件

在项目根目录下运行

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

# 或者
# Docker Compose 启动全部服务（MySQL 和 Umami）
docker-compose up -d

更多

更多信息可查看项目内的 docker-compose.yaml 和 Makefile 文件

准备 env 文件和配置

配置 .env 文件

.env 文件用来配置各种项目中需要的配置

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

  • DATABASE_URL
# DATABASE_URL 格式为 mysql://用户名:用户密码@数据库IP:数据库端口/需要连接的数据库名
# 根据实际情况进行修改
DATABASE_URL="mysql://root:123456@127.0.0.1:3306/fuxiaochen"

Github 登录用

  • AUTH_GITHUB_ID：Github 授权应用 ID
  • AUTH_GITHUB_SECRET：Github 授权应用 secret

必须配置

  • NEXT_PUBLIC_ADMIN_EMAILS：ADMIN 邮箱列表，只有配置在这里的邮箱，才允许在后台管理进行新增、修改、删除操作

如何获取授权应用的 ID 和 secret，可以跟着小付哥（不是我）这篇文章来：基于Next14+Auth5实现Github、Google、Gitee平台授权登录和邮箱密码登录

启动开发服务器

  1. 创建表
pnpm db:push
  1. 生成 Prisma 类型文件
pnpm db:gen

做了这一步后，重启一下 VS Code（Ctrl/Cmd + Shift + P，然后选 【Developer: Reload Window】），重新加载 VS Code

  1. 启动开发服务器
pnpm dev
  1. 预览
  1. 查看数据库

这里推荐使用 Prisma Studio 查看数据，你也可以使用数据库连接软件连接我们的数据库查看数据

新开一个终端，在项目根目录下运行

pnpm db:studio

启动完后会自动打开浏览器，可以在线查看数据库内的数据

自定义页面的信息

你可能想修改页面中的信息，请修改 constants/info.ts 文件

反馈

遇到任何问题，欢迎给我发邮件反馈，欢迎提 Issue

Star History

Star History Chart

感谢

本站开发时，借鉴了以下这些优秀网站（排名不分先后）的很多设计

LICENCE

MIT