DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for React Blog Website Using JAMstack (Gatsby.js & Sanity.io)
Shaif Arfan
Shaif Arfan

Posted on

React Blog Website Using JAMstack (Gatsby.js & Sanity.io)

TechHub-Blog

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


Live Preview: http://techhub-blog.vercel.app/
Source Code:https://github.com/ShaifArfan/techHub-blog
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 Sanity.io for the headless CMS. And to source our content we will use graphql.

What we are going to learn/use

Requirements

  • 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

FAQ

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.

Feedback

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

Support

For support, join our Community Group.

License

MIT

Happy Coding! βœ¨πŸš€

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post