#01 – React Blog Website with Gatsby.js & Sanity.io
Sanity Setup
If you want to build a blog website using React, Gatsby.js, and Sanity.io, this article will guide you on how to set up the Sanity.io CMS for your project.
Step 1: Create a new Sanity.io project
First, head over to the Sanity.io website and create a new account if you don’t have one already. Once you’re logged in, create a new project and give it a meaningful name.
Step 2: Install the Sanity CLI
Next, install the Sanity CLI by running the following command in your terminal:
$ npm install -g @sanity/cliStep 3: Initialize Sanity.io
In your project directory, run the following command:
$ sanity initThis will initialize a new Sanity.io project in your current directory.
Step 4: Connect Sanity to your project
Run the following command to connect your project to the Sanity.io backend:
$ sanity loginFollow the prompts and provide your Sanity.io login credentials.
Step 5: Set up a Sanity.io dataset
Once connected, create a new dataset for your project by running:
$ sanity dataset createStep 6: Install Sanity plugins
Finally, install the necessary Sanity plugins for Gatsby.js integration:
$ sanity install gatsby-plugin-sanityStep 7: Configure Gatsby to use Sanity as a data source
Edit your Gatsby configuration file (gatsby-config.js) by adding the following:
module.exports = {
plugins: [
{
resolve: 'gatsby-source-sanity',
options: {
projectId: 'YOUR_PROJECT_ID',
dataset: 'YOUR_DATASET',
},
},
],
}Replace ‘YOUR_PROJECT_ID’ with your Sanity.io project’s ID, and ‘YOUR_DATASET’ with the dataset name you created in Step 5.
Step 8: Start your Gatsby development server
Run the following command to start your Gatsby development server:
$ gatsby developYour blog website with Gatsby.js and Sanity.io is now set up!
Nice bro, go ahead.
Getting an error when trying to install dependencies on the web folder, can you help? Please!
Thank you so much for doing these videos, they are great and I learned a lot from those.
Hello, the course is very good. I wanted to ask you if you know why I get an error when doing npm install in the web folder. Please
npm ERR! code 1
npm ERR! path /home/drina/sanity-gatsby/techHub-blog/web/node_modules/lmdb-store
npm ERR! command failed
npm ERR! command sh
c –node-gyp-buildnpm ERR! make: se entra en el directorio '/home/drina/sanity-gatsby/techHub-blog/web/node_modules/lmdb-store/build'
npm ERR! CXX(target) Release/obj.target/lmdb/src/node-lmdb.o
npm ERR! CC(target) Release/obj.target/lmdb/dependencies/lmdb/libraries/liblmdb/midl.o
npm ERR! CC(target) Release/obj.target/lmdb/dependencies/lmdb/libraries/liblmdb/chacha8.o
npm ERR! CC(target) Release/obj.target/lmdb/dependencies/lz4/lib/lz4.o
npm ERR! CXX(target) Release/obj.target/lmdb/src/env.o
npm ERR! CXX(target) Release/obj.target/lmdb/src/compression.o
npm ERR! CXX(target) Release/obj.target/lmdb/src/ordered-binary.o
npm ERR! make: se sale del directorio '/home/drina/sanity-gatsby/techHub-blog/web/node_modules/lmdb-store/build'
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.1.0
npm ERR! gyp info using node@18.9.0 | linux | x64
npm ERR! gyp info find Python using Python version 3.10.6 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/home/drina/.nvm/versions/node/v18.9.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/home/drina/sanity-gatsby/techHub-blog/web/node_modules/lmdb-store/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/home/drina/.nvm/versions/node/v18.9.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/home/drina/.cache/node-gyp/18.9.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/home/drina/.cache/node-gyp/18.9.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/home/drina/.nvm/versions/node/v18.9.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/home/drina/.cache/node-gyp/18.9.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/home/drina/sanity-gatsby/techHub-blog/web/node_modules/lmdb-store',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '–depth=.',
npm ERR! gyp info spawn args '–no-parallel',
npm ERR! gyp info spawn args '–generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/node-lmdb.h:32,
Nice
14:17 What is the Terminal Brother ??
Great work🥰
You are a clown!
Search bar cannot work with others languages. How to solve the problems this.
দয়াকরে ভাই, বাংলা টিউটোরিয়াল দিলে ভালো হয়।
great work brother
💜💛💟❣️💕💗💖💓🧡💞❤️💚💙💝🖤🥰😍🤩
Great work. I appreciate.
Everything works well in this part.
I'm off to part 2
This is a great project. Many thanks bro. But I have a problem. I can't 'npm install' for the studio part. It's having npm err! It doesn't support Valid OS, Arch etc. I need help
Great work man!!
bro , how to contact with you
Awesome project