🖥️react-blog:用React写的一款个人博客系统,有博客展示页面和后台管理页面,可以管理文章、分类、标签、相册、说说、时间轴、留言、友链等信息。

Related tags

React react redux antd
Overview

这是个人博客系统的博客展示页面后台管理页面仓库见「react-blog-admin」

0. 看这里 ✔️

这是我自己用 React 写的个人博客系统,起初的目的就是作为个人使用,所以代码有很大的局限性(根本原因是因为自己太菜 🤣 🤣 🤣 )。

欢迎大家starfork,互相交流学习! 💪 💪

1. 前言

之前我使用hexo搭建过个人博客。hexo很强大,渲染页面速度快,支持markdown语法,可以一键部署,还可以扩展各种插件。

hexo搭建的是静态页面,每次更新文章,都要重新生成静态页面,再部署页面。hexo也没有后台管理,想要修改发布的文章,只能修改源代码,再重新生成页面。所以很早之前就想写一个自己的博客系统,由博客展示页面后台管理页面构成,通过后台管理页面,可以实时更新、发布文章,非常方便。但在当时还没有能力写出这样一个系统,就一直没有去做。

后来学习了React之后,想尝试下写自己的博客,就每天课余时间写一点,最后写出来了 😅 😅 😅

由于之前有搭建过hexo博客,所以就按照之前自己hexo博客的功能来写,基本的功能有文章管理、文章搜索、分类/标签、图库、说说、留言板/评论、友链、小作品页面、建站日志时间轴、关于页面等。但是很多功能还不完善,不具有通用性,只适用于本博客,以后会慢慢改进 🧐 🧐 🧐

2. 仓库地址

1. 博客展示页面

演示地址:「飞鸟小站」

仓库地址:「GitHub」

2. 后台管理页面

演示地址:「飞鸟小站后台」

点击游客按钮即可使用游客身份浏览!

仓库地址:「GitHub」

3. 用到的技术/工具

🔖 博客主要使用到的技术如下:

前端(博客页面+后台管理):

  • React脚手架Create-React-App
  • 状态集中管理工具Redux
  • 前端路由React-Router
  • AntD组件库
  • 今日诗词提供首页的诗句
  • 时间格式化工具moment
  • markdown格式渲染工具marked
  • 代码高亮渲染工具highlight.js
  • 其他第三方包

后端

后端使用腾讯云CloudBase云端一体化后端云服务,包括:

  • 用户管理:管理员登录、访客匿名用户登录
  • 数据库:存放管理员的博客数据
  • 网站托管:托管后台管理页面

其他

  • 评论回复的邮箱提醒API,使用Node.js编写,运行在自己的阿里云服务器
  • 已配置SSL 证书,开启HTTPS访问
  • 博客展示页面托管于腾讯云开发静态文件托管
  • 图床使用阿里云OSS
  • Webify:应用托管,自动部署后台管理页面

4. 主要功能

1. 博客展示页面

  • 首页预览所有文章
  • 查看文章评论、发布评论、评论回复
  • 搜索文章:根据关键字搜索、分类搜索、标签搜索
  • 查看相册
  • 查看说说
  • 查看留言板留言、发布留言、留言回复
  • 查看友链、访问友链
  • 查看小作品
  • 查看建站日志时间轴
  • 查看关于本站/关于我
  • 进入后台管理页面

2. 后台管理页面

管理是指:对数据的

  • 首页预览博客基本数据(文章数、草稿数、友链数等),管理分类、标签
  • 文章管理、草稿管理
  • 相册管理
  • 说说管理
  • 查看留言、评论,删除留言、评论
  • 友链管理
  • 小作品管理
  • 关于页面文字管理
  • 建站日志管理

5. 不断改进

由于时间有限、本人能力有限,博客系统还有很多不足之处,会在学习新知识的同时不断改进博客。

也请各路大佬多多指点 😆 😆 😆

You might also like...

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Dec 30, 2022

📋 React Hooks for forms validation (Web + React Native)

📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

Dec 29, 2022

:black_medium_small_square:React Move | Beautiful, data-driven animations for React

:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Jan 1, 2023

React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Jan 3, 2023

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native 🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Oct 11, 2022

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Dec 28, 2022

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Jun 5, 2022

Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Oct 11, 2021

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Jun 5, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
My JAMStack website/blog [Next / MDX / ChakraUI]

carlosazaustre.es Personal website/blog Technologies used Next.js React.js @emotion/styled ChakraUI MarkdownX Vercel Support If you like my work, you

Carlos Azaustre 80 Dec 25, 2022
My website. Portfolio and blog in one.

Infi.sh The code that's running infi.sh. License This project is licensed under the MIT license. This excludes all of the content in the public/ and _

null 5 Sep 18, 2022
Kişisel blog sitesi

Tailwind Nextjs Başlangıç Blogu => projeyi kolayca deploy edebilirsiniz. Benim sitem- projenin yayınlanmış hali. Klonlamış Olduğum Repo Bu proje Next.

Orhan 0 Jan 4, 2022
Personal website and blog made using NextJS, TailwindCSS, GraphCMS, and MDX bundler

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

null 12 Aug 21, 2022
Next.js + Prisma + Supabase simple Blog example

Next.js + Prisma + Supabase Blog Project About the Project Prisma connects the PostgreSQL Database provided by Supabase by using postgres connection s

Soham Shah 4 Nov 19, 2022
A beautiful and easy in hand blog made by Next.js Material-ui

Material-blog A beautiful and easy in hand blog made by Next.js Material-ui! Deploy your own Deploy the example using Vercel: Usage Install node_modul

Willie Xu 1 Mar 3, 2022
Next.js Blog Template

A simple blog template to quickly get started with writing. It has a clean design and provides a lot of flexibility.

wweb.dev 8 Sep 5, 2022
Read Blog. This is also a practical project. Working with APIs more and Routing and many new things.

React blog This is a React blog that created with a custom API. We serve the API in our system and run blog with it. Goals of this project In this pro

AmirHossein Mohammadi 7 Jul 25, 2022
Hello, world! :) Welcome to this project. This is a free web repository that you can use as a blog for your website. This project is dedicated to "Sina Sattari" as an honorary title.

QURNO News/Technology Web Application Greetings and courtesy to all of you dear colleagues and friends of the DarkDragons team. We came back with anot

DarkDragons Team 12 Sep 8, 2022