A: hi! Hello everyone, I am technology fat.

My blog uses the program in the tutorial, you can preview it first, preview the page.

The text version is on my blog at the following address: 30,000-word text tutorial

My original blog is the use of Vuepress, pure static web page, there are a lot of inconvenient places, so I made this blog program.

If you want to make a website using React technology, I think you can make it with this tutorial, and you can change it as you like.

This tutorial is only suitable for beginners and intermediate React developers. (Don’t worry, my blog has free basic tutorials.)

If you find this tutorial helpful, please give it a thumbs up so that more people can see this article

Blogs use technology stacks

React Hooks + Next. Js + marked + highlight + Ant Design

Data interface: egg.js + Mysql

Background: React Hooks + Ant Design

The code in the video is open source: open source library Github address

Blog preview images

Video directory

  • 01, blog practical course introduction :jspang.com/detailed?id…
  • 02. Construction of front-end basic development environment :jspang.com/detailed?id…
  • Create a common header for your blog and form a component :jspang.com/detailed?id…
  • 04. Complete the two-column layout of the main body of the home page :jspang.com/detailed?id…
  • 05, use the List component to create a List of blogs :jspang.com/detailed?id…
  • 06, write “blogger introduction” component :jspang.com/detailed?id…
  • 07, write a “generic advertising” component :jspang.com/detailed?id…
  • 08, blog list page quick production :jspang.com/detailed?id…
  • 09, blog detailed page production 1- write the basic page structure :jspang.com/detailed?id…
  • 2- Parsing Markdown syntax :jspang.com/detailed?id…
  • 3-Markdown navigation :jspang.com/detailed?id…
  • 1- Install egg.js development environment :jspang.com/detailed?id…
  • 13. Build 2-egg.js directory structure and convention specification in the middle platform :jspang.com/detailed?id…
  • 14. Introduction to 3-restful API design and route configuration :jspang.com/detailed?id…
  • 4. Connect to mysql database in 4-egg.js :jspang.com/detailed?id…
  • 5- Database design and home page interface production :jspang.com/detailed?id…
  • 17, the front center combined with 1- front read home page article list interface :jspang.com/detailed?id…
  • 18, the front center combined with 2- article detailed page interface production display :jspang.com/detailed?id…
  • 19, solve the cross-domain problem of egg.js :jspang.com/detailed?id…
  • 20, refactoring blog foreground detail page 1- marked+highlight:jspang.com/detailed?id…
  • 21, refactoring the foreground blog detail page 2- to achieve the article navigation :jspang.com/detailed?id…
  • 22, the production of the front article list page 1- interface modular and read the article classification :jspang.com/detailed?id…
  • 23, the production of the front article list page 2- read the article list according to the category :jspang.com/detailed?id…
  • 24, let all front page support Markdown parsing :jspang.com/detailed?id…
  • 25, background development 01- development environment construction :jspang.com/detailed?id…
  • 26, background development 02- Page routing configuration :jspang.com/detailed?id…
  • 27, background development 03- write login interface :jspang.com/detailed?id…
  • 28, background development 04-UI framework building :jspang.com/detailed?id…
  • 29, background development 05- add article page production 1:jspang.com/detailed?id…
  • 30, background development 06- Add article page production 2:jspang.com/detailed?id…
  • Background development 07-Markdown editor production :jspang.com/detailed?id…
  • 32, background development 08- Write service login interface :jspang.com/detailed?id…
  • Background development 09- to achieve the foreground login operation :jspang.com/detailed?id…
  • Background development 10- Middle station route guard production :jspang.com/detailed?id…
  • 35, background development 11- read add article page category information :jspang.com/detailed?id…
  • 36, background development 12- methods to add articles (above):jspang.com/detailed?id…
  • Background development 13- Method of adding articles (in):jspang.com/detailed?id…
  • 38, background development 14- the method of adding articles (second):jspang.com/detailed?id…
  • Background development 15- article list production (on):jspang.com/detailed?id…
  • Background development 16- article list production (in):jspang.com/detailed?id…
  • 41, background development 17- Delete article :jspang.com/detailed?id…
  • Background development 18- modify the article (above) :jspang.com/detailed?id…
  • 43, background development 19- modify the article (next) :jspang.com/detailed?id…
  • 44, Blog deployment introduction and demonstration :jspang.com/detailed?id…