React-Blog：5分钟快速部署个人博客的终极教程-开发者社区

React-Blog：5分钟快速部署个人博客的终极教程

【免费下载链接】react-blogreact hooks + koa2 + sequelize + mysql 构建的个人博客。具备评论、通知、上传文章等等功能项目地址: https://gitcode.com/gh_mirrors/rea/react-blog

React-Blog是一个基于react hooks + koa2 + sequelize + mysql构建的个人博客系统，具备评论、通知、上传文章等功能，特别适合新手快速搭建属于自己的博客平台。

🚀 为什么选择React-Blog？

React-Blog是一个极其简洁的个人博客系统，实现了前后台分离式开发，包含完整的博客后台管理系统。它主打简约风格，借助antd UI框架设计，具备代码高亮、权限管理、第三方github登录、评论与通知以及邮件通知等功能，还支持md文件导入导出，方便从hexo等其他博客平台迁移文章。

✨ 核心功能亮点

完整的前后台功能：前台包含主页、列表页、搜索页、分类页和标签页；后台支持文章管理和用户管理
丰富的用户交互：响应式设计、文章锚点导航、回到顶部按钮、markdown代码高亮
灵活的用户系统：支持站内用户和github第三方授权登录
互动与通知：用户可以评论与回复，并有邮件通知回复状态
便捷的内容管理：支持md文件导入导出，轻松迁移文章

📋 准备工作

在开始部署前，请确保你的系统已经安装了以下环境：

Node.js (建议v12及以上版本)
MySQL数据库
Git

🔧 快速安装步骤

1. 克隆项目代码

首先，使用Git克隆项目到本地：

git clone https://gitcode.com/gh_mirrors/rea/react-blog

2. 安装依赖

进入项目目录，安装前端和后端依赖：

# 安装前端依赖 cd react-blog yarn # 安装后端依赖 cd server yarn

3. 配置项目

React-Blog的配置文件主要有两个，分别位于前端和后端目录：

前端配置：src/config.js 在这里你可以设置博客名称、个人信息、头像等
后端配置：server/config/index.js 主要配置数据库连接、github授权、邮件通知等关键信息

4. 初始化数据库

确保MySQL数据库已启动，并在server/config/index.js中正确配置了数据库连接信息。然后运行初始化脚本：

cd server node initData.js

5. 启动开发模式

分别启动前端和后端开发服务器：

# 启动前端开发服务器 cd react-blog yarn dev # 启动后端开发服务器 cd server yarn dev

6. 访问博客

在浏览器中访问以下地址即可看到你的博客：

前台：http://localhost:3000
后台管理：http://localhost:3000/admin

⚙️ 生产环境部署

1. 打包前端代码

cd react-blog yarn build

2. 部署后端服务

推荐使用pm2来管理后端服务：

cd server pm2 start app.js

📝 自定义配置指南

个人信息配置

编辑src/config.js文件，修改以下内容：

export const SIDEBAR = { avatar: require('@/assets/images/avatar.jpeg'), // 侧边栏头像 title: '你的名字', // 标题 subTitle: '你的简介', // 子标题 homepages: { github: '你的github地址', juejin: '你的掘金地址', }, }

数据库配置

编辑server/config/index.js文件，配置数据库信息：

DATABASE: { database: '数据库名', user: '数据库用户名', password: '数据库密码', options: { host: '数据库地址', dialect: 'mysql', // 其他配置... }, }

第三方登录配置

配置GitHub第三方登录，需要在server/config/index.js中填写client_id和client_secret：

GITHUB: { client_id: '你的client_id', client_secret: '你的client_secret', // 其他配置... }

🖼️ 博客预览

React-Blog采用响应式设计，完美支持PC端和移动端：

PC端界面

PC端提供了丰富的功能和舒适的阅读体验，包括侧边栏导航、文章列表、标签云等元素，让用户可以轻松浏览和搜索内容。

移动端界面

移动端针对小屏幕进行了优化，提供了简洁直观的导航和阅读体验，确保在手机上也能舒适地浏览博客内容。

🛠️ 项目结构说明

React-Blog的项目结构清晰，便于维护和扩展：

. ├─config // 构建配置 ├─public // html入口 ├─scripts // 项目脚本 └─server // 后端 ├─config // 项目配置 ├─controllers // 业务控制层 ├─middlewares // 中间件 ├─models // 数据库模型 ├─router // 路由 ├─utils // 工具包 └─... └─src // 前端项目源码 ├─assets // 静态文件 ├─components // 公用组件 ├─layout // 布局组件 ├─redux // redux目录 ├─routes // 路由 ├─styles // 样式 ├─utils // 工具包 ├─views // 视图层 └─...

❓ 常见问题解决

数据库连接失败

确保MySQL服务已启动，并且server/config/index.js中的数据库配置信息正确。如果使用远程数据库，需要确保数据库允许远程连接。

第三方登录不工作

检查GitHub OAuth应用的配置是否正确，确保client_id和client_secret无误，并且回调地址与配置中的一致。

邮件通知功能

如果需要启用邮件通知功能，需要在server/config/index.js中正确配置邮件服务器信息，包括SMTP地址、端口、用户名和密码（授权码）。

🎉 开始使用你的博客

完成以上步骤后，你就拥有了一个功能完善的个人博客系统。你可以登录后台管理界面，开始发布文章、管理评论和用户。React-Blog的简洁设计和丰富功能，将帮助你轻松搭建和维护个人博客，展示你的想法和作品。

希望这个快速部署教程能帮助你顺利搭建自己的博客！如果有任何问题或建议，可以查看项目的详细文档或提交issue。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

React-Blog：5分钟快速部署个人博客的终极教程