React搭建个人博客

个人博客搭建

前言

项目预览

登录页 (个人使用暂时未开发注册功能)
添加标签（方便后期条件查询）
添加博客内容以及标签选择（草稿/发布）
展示博客列表（编辑/删除/条件查询及分页）
博客展示首页（后台添加博客不对外开放）
博客详情页查看（目前已完成阅读量/评论功能开发中）
分类查询
后续功能更新中…

搭建个人博客方式

1. 使用第三方工具生成博客系统

优点搭建简单(可直接部署在github)静态访问、不用考虑服务器配置

hexo https://hexo.io/zh-cn/
hugo https://www.gohugo.org/

缺点需要自己编写Markdown 然后部署到github,不便于操作

2. 自己实现一个博客

博客搭建

尽量长话短说、git clone 项目有问题联系我（暂时支持PC-后期支持响应式）
- 开发环境
  - mac、window
  - node 8.x+
  - mysql 5.6.44(目前版本) 项目启动–>请安装mysql（可视化工具推荐navicat）
- 使用技术
  - 前端： React+Hooks+TypeScript
  - 后台：Egg+Mysql(实现增删改查)
  - 觉得项目ok 留下你的 star
项目地址： git clone https://github.com/aisagacious/blog.git
项目总体模块分为3部分
项目启动与运行（假设当前在blog目录下）

cd blog && npm i && npm run start 启动项目

启动eggBlog项目按照操作步骤来
1. 新建一个数据库（表创建好后）进入eggBlog/config/config.default.js 中配置数据库信息
1. 以上操作都完成后（执行下面命令->eggBlog项目即可启动）
  
  cd eggBlog && npm i && npm run dev 启动服务(默认端口 7001)
项目中有注释、项目跑起来看一遍就理解了

项目功能点

之前使用Koa2开发项目中、插件集成工作量太大了各种配置
此处使用Egg开发项目结构比较完善清晰、mysql也封装一层、简单逻辑更方便
谈谈此次功能点
- 登录使用session验证、设置了默认时间为半小时、可通过接口调用更新session过期时间
- 图片上传（由于没开通OSS）这里我把图片上传到服务器在blogFile下（这就是为什么我没把图片放在项目下、部署有可能会误删图片、图片上传生成水印）
- 其他的功能点都是增删改查
- 对于这个项目设计点比较多我就不一一讲解（项目搭建->开发完成->项目部署）、从中设计到React+Hooks+TypeScript+Egg（node封装的）+mysql 部署使用nginx配置代理（博客搭建比较简单勿喷）

完结

React搭建个人博客相关推荐

如何极速极速搭建个人博客？Copy攻城狮用的这一招很优秀！
摘要:在中国功夫中,"天下武功,无坚不摧,唯快不破",在编程的世界里,如何快速搭建一个属于自己的博客呢?那么 Pagic + Vercel 应该是个不错的选择!接下来,由Copy攻 ...
搭建个人博客详细教程
基于gitee+hexo搭建个人博客由于国外的github page访问总是非常慢的,本文选择国内开源代码托管平台码云,因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站.自己亲手勉强搭 ...
使用GitHub+Hexo+live2d搭建个人博客
使用GitHub+Hexo+live2d搭建个人博客博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 安装hexo sudo n ...
超简单！使用 Docusaurus 搭建个人博客（一）
目录历史迷茫博客有啥用? Docusaurus 简介安装运行环境安装 docusaurus 运行 docusaurus 项目结构配置为博客模式发表第一篇博客 B 站视频 - 点击传送历史 ...
使用Git搭建个人博客
为什么要搭建个人博客好记性不如烂笔头,方便日后整理回顾免费方便,不需要服务器不需要后台,不需要依赖除了git的外部服务可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的 ...
从零搭建个人博客(2)-博客UI搭建
code: https://github.com/MSChuan/Blog-UI, demo: https://mschuan.github.io/Blog-UI/dist_prod/index.ht ...
从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
无论是博主自己写文章还是读者发表评论,都需要一个方便的编辑框,html自带的textarea和editable div都过于简单,本文将记录在webpack环境中添加jquery和Simditor的过 ...
从零搭建个人博客(1)-webpack环境配置
本文作为搭建个人博客的开端,将会配置环境,以后做别的project也可以以此开始.代码托管在github. code: https://github.com/MSChuan/Blog-UI, demo ...
vuepress搭建个人博客并部署
想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本 ...

React搭建个人博客

个人博客搭建

前言

搭建个人博客方式

博客搭建

项目功能点

完结

React搭建个人博客相关推荐

最新文章

热门文章