aifuxi / fuxiaochen

🌈 一个简单的个人站,使用 Next.js 构建
https://fuxiaochen.com
MIT License
313 stars 44 forks source link
bytemd next-auth-v5 nextjs14 prisma react shadui tailwindcss typescript

fuxiaochen

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

简介

Next.js React TypeScript Tailwind CSS Prisma Blog

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

特性

快速开始

环境准备

确保你已安装

获取项目代码

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

安装依赖

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

pnpm install

准备数据库

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

Mac 或者 Linux

项目已经准备好了一个 Makefile 文件

在项目根目录下运行

# 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

更多

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

准备 env 文件和配置

配置 .env 文件

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

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

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

配置 .env.development 文件

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

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

Github 登录用,如果不用 Github 登录,可不配置

必须配置

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

启动开发服务器

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

做了这一步后,重启一下 VS Code(Ctrl/Cmd + Shift + P,然后选 Reload Window),重新加载TypeScript类型文件

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

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

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

pnpm db:studio

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

自定义页面的信息

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

部署

反馈

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

Star History

Star History Chart

感谢

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

LICENCE

MIT