DEV Community

Cover image for React Blog Website Using JAMstack (Gatsby.js &
Shaif Arfan
Shaif Arfan

Posted on

React Blog Website Using JAMstack (Gatsby.js &


A complete blog website created with JAMstack. (Gatsby.js &

Live Preview:
Source Code:
YouTube Tutorial: 🔗Playlist
Made with ❤️ by Shaif Arfan

Project Details

TechHub-blog is a complete tech blog website. Here we will see three post types: blogs, categories, and authors. We will create relations between these three post types. So that we can create a blog post with a category and an author. Also we will make a search feature where we can search against all these three post types.

To create this website we will use JAMstack. We will use Gatsby.js for the frontend and for the headless CMS. And to source our content we will use graphql.

What we are going to learn/use


  • Basic knowledge of HTML, CSS, and JavaScript
  • Experience with React.js

Starter files

You can find all the starter files in starter-files branch. You can to go to the starter-files branch and download zip the the starter files or You can clone the project and git checkout to starter-files branch.

Getting Started

You can follow our complete youtube tutorial Playlist
or You can clone the project and git checkout to starter-files branch to get started.

Tools Used

  • Images: Unsplash
  • UI Design: Figma
  • Code Editor: VS Code

Other projects

📚 All Web Cifar Projects


Q: How can i get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: Playlist.

Q: I can use this project for my website?

Yes you can. It absolutely free to use.


If you have any feedback, please reach out to us at @web_cifar


For support, join our Community Group.



Happy Coding! ✨🚀

Top comments (0)