DEV Community

Quoc Huynh Website
Quoc Huynh Website

Posted on • Edited on

Build a blog for beginners with React in 3 minutes

Strapi will be used in this project. It saves our data in a JSON file and return data with JSON throught API. Strapi is a popular open-source used by a lot of developers in 2021. You don't know how to use? Don't anxious, just follow me.
Link : https://strapi.io/

1. Set up Strapi

Open termial and paste it:

npx create-strapi-starter@latest my-strapi-gatsby gatsby-blog

But but, remember to enter "Quickstart (recommended)" after that 😲

Image description

To download, it takes about 1 minute to download. So, you can watch some pornhubs πŸ˜‚.

2. Look through the blog

There are two tabs will be opened by the broswer after downloaded. The first tab for back-end where create some posts and the second tab for front-end where display your posts.

Image description

And Strapi creates some files that consists of two folders like back-end and front-end on Visual Studio Code:
Image description

3. Admin's Database on Strapi

After register, we go to Articles and click on Add new Articles to write our post. Remarkable of the post is Category and Author's name on the right of the page.
Image description
You can add some photos and the slug will be created by Strapi at the bottom of page.
Image description
Go to http://localhost:8000/articles and check on API
Image description

Click on Publish.

4. Read our post

Remember to type npm start on front-end folder, you will see your posts there.
Image description

5. Deploy

You can deploy our project on any service. I recommend to deploy on Heroku

Thanks for reading this post! Follow me to know more about React's tutorial

Top comments (5)

Collapse
 
traleeee profile image
Tra Le

Rick Rolled 😭

Collapse
 
quocbahuynh profile image
Quoc Huynh Website

You can search Strapi on Google πŸ€“

Collapse
 
lucavalente93 profile image
lucavalente93 • Edited

...Did you have just rickrolled me when I clicked the hyperlink at "Set Up <(Strapi)>" ? πŸ€” LOL

Collapse
 
quocbahuynh profile image
Quoc Huynh Website

πŸ˜‚πŸ˜‚ hahaaaaa, have a good dayyyyyyy

Collapse
 
heberbr profile image
heberbr

Thanks a lot!!