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
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
Happy Coding! ✨🚀
Top comments (0)