aifuxi / fuxiaochen

🌈 一个简单的个人站，使用 Next.js 构建

fuxiaochen

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

简介

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

特性

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

• 使用 Meilisearch 支持博客和片段的全文搜索

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

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

• 使用 Redis + ioredis 统计网站浏览量、博客和片段浏览量

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

• 使用 iconify 支持各种 svg 图标

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

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

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

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

• 使用 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 文件

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.yaml 和 Makefile 文件

准备 env 文件和配置

配置 .env 文件

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

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

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

# 根据实际情况进行修改
REDIS_HOST="127.0.0.1"
REDIS_PORT="6379"

配置 .env.development 文件

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

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

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

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

必须配置

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

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

• NEXT_PUBLIC_MEILISEARCH_HOST：Meilisearch 服务地址

• NEXT_PUBLIC_MEILISEARCH_KEY：Meilisearch 服务 Master key

Meilisearch 是一个类似 Elasticsearch 的搜索引擎，更轻量，对机器要求比于 Elasticsearch 低很多，点这里 Meilisearch 查看更多 Meilisearch 的信息

启动开发服务器

1. 创建表

pnpm db:push

2. 生成 Prisma 类型文件

pnpm db:gen

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

3. 启动开发服务器

pnpm dev

4. 预览

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

5. 查看数据库

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

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

pnpm db:studio

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

自定义页面的信息

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

部署

• 视频演示：手摸手教你如何部署fuxiaochen博客网站

• 部署文档：手摸手教你如何部署fuxiaochen博客网站

反馈

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

Star History

感谢

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

• shadcn/ui

• 薇尔薇

• 小植同学

• 掘金

• Orbstack · Blog

• Shiro

• LobeHub

LICENCE

MIT

fuxiaochen's Issues

xiaochen你的博客很不错，可以再增加评论功能，增加互动性

如题，xiaochen你的博客很不错，可以再增加评论功能，增加互动性

项目很棒，但是我不知道该怎么部署到我的服务器上

如果可以的话，可以编写一下readme，给出详细的服务器部署教程吗。感谢

export const ERROR_NO_PERMISSION = new Error('无权限');

登录后台创建标签的时候，提示export const ERROR_NO_PERMISSION = new Error('无权限');

换友链嘛 blogweb.cn

https://github.com/Lrunlin/blog

可以增加一个使用账号密码登录吗

如果可以，建议增加一个账号密码登录，避免与第三方强耦合。

一个小建议小请求

有打包成静态网页html的计划吗？

感谢您提供的部署方案，但是我遇到一些问题

我在配置github登录的时候好像有点问题。点击github登录后条跳转到undefined页面，显示页面未找到。
因为一些端口占用的原因，我部署在服务器6121端口下,
因此主页地址是http://aa.sss.xxx.ss:6121，env配置如下：

如果是线上，AUTH_SECRET必须设置

必填（线上）

AUTH_SECRET="http://aa.sss.xxx.ss:6121"

设置的值为你网站的域名+/api/auth，eg: https://fuxiaochen.com/api/auth

必填（线上）本地可忽略

AUTH_URL="http://aa.sss.xxx.ss:6121/api/auth"

github设置
Homepage URL：http://aa.sss.xxx.ss:6121
Authorization callback URL：http://aa.sss.xxx.ss:6121/api/auth
在这个配置下，主页可以正常打开，/admin也可以访问，但是点击github登陆就会跳转到undefined页面，在教程中也没有特别的说明，因此我有些疑惑希望您可以解答一下具体应该如何指定地址
更为详尽的ip信息我发送在您的b站私信里

网站好像很卡···

博主，为何访问的时候，感觉很卡，点了按钮之后，半天没反应

我的域名是 www.com,github中的 Authorization callback URL我应该填写什么，

我的域名是 www.com,github中的 Authorization callback URL我应该填写什么，我填了http://www.com/admin不行，不是很理解，非常感谢老师能够解答下的

请如何在windows 环境下 使用make 命令

如题 ，我主要是在windows 开发， 然后在linux 环境部署上线，请问要如何使用 项目中定义的make文件来提高效率