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

• React.js
• Gatsby.js
  • Gatsby-plugin-image
  • Static Image & Gatsby Image
  • Gatsby Page
  • Normal Pages
  • how to create pages programmatically
  • Gatsby Pagination
  • Gatsby-plugin-local-search
  • GraphQL
  • Static Query & Page Query
• Sanity.io
  • Sanity Schema
  • Custom Blocks
  • Custom Rich-text Block to Write Blog
  • Custom Code Block
  • Studio Customization
• React-PortableText
• Axios
• Many More...

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! ✨🚀