1. Introduction

I’ve used Hexo to build my own blog. Hexo is powerful, renders pages fast, supports Markdown syntax, can be deployed with one click, and can extend various plug-ins.

But Hexo builds static pages, which are regenerated and redeployed each time a post is updated. Hexo also has no back office, so to modify published articles, you can only modify the source code and then regenerate the page. So long ago I wanted to write a blog system of my own, composed of blog display page and background management page, through the background management page, can update in real time, publish articles, very convenient. But I didn’t have the ability to write such a system at that time, so I didn’t do it.

Later, after learning React, I wanted to try to write my own blog, so I wrote a little bit every day in my spare time. Finally, I wrote 😅😅😅.

Since I had built hexo blog before, I wrote it according to the functions of my previous Hexo blog, including article management, article search, categorization/tagging, gallery, talk, message board/comment, friend chain, small works page, timeline of site log, about page, etc. But many functions are not perfect, not universal, only applicable to this blog, will slowly improve later 🧐🧐🧐!

2. Warehouse address

1. Blog display page

Demo address: “Stray Birds”

Warehouse Address: “GitHub”

2. Background management page

Demo address: “Flying Bird Station backstage”

Tourist Account:

Warehouse Address: “GitHub”

3. Technology/tools used

🔖 blog mainly uses the following technologies:

Front end (blog page + background management) :

  • ReactThe scaffoldCreate-React-App
  • State centralized management toolRedux
  • The front-end routingReact-Router
  • AntDComponent library
  • Poetry today provides the first page of poetry
  • The time formatting tool Moment
  • markdownFormat rendering toolmarked
  • Code highlighting tool highlight.js
  • Other Third-party packages

The backend:

The backend uses Tencent Cloud CloudBase cloud integrated back-end cloud services, including:

  • User management: administrator login, anonymous user login visitors
  • Database: Store the administrator’s blog data
  • Web hosting: hosting background management page

Other:

  • Email alerts for comment repliesAPI, the use ofNode.jsWrite, run in your ownAli Cloud Serveron
  • The SSL certificate has been configured and HTTPS access has been enabled
  • The blog display page is deployed on Ali Cloud server
  • Map bed using Ali Cloud OSS
  • Webify: Application hosting, automatic deploymentBackground Management Page

4. Main functions

1. Blog display page

  • Home page preview all articles
  • View comments, post comments, and reply to comments
  • Search articles: search by keyword, category, tag
  • View the photo album
  • To see about
  • Check message board message, release message, message reply
  • View friend chain, visit friend chain
  • View small works
  • View the timeline of site construction logs
  • View about this site/About me
  • The background management page is displayed

2. Background management page

Management refers to adding, deleting, modifying and searching data.

  • Homepage preview blog basic data (number of articles, drafts, friends, etc.), management classification, labels, update announcements
  • Article management, draft management
  • Photo album management
  • Tell me something about the management
  • View and delete messages and comments
  • Friends of chain management
  • Small works Management
  • About page text management
  • Site log management

5. Keep improving

Due to the limited time, my ability is limited, the blog system still has many shortcomings, I will learn new knowledge while constantly improving the blog.

Please also give directions 😆😆😆!