Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.
Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:
npx vercel linkDownload the environment variables needed to connect Next.js and the Studio to your Sanity project:
npx vercel env pullThis will create a git-ignored .env file with environment variables that will be used for local development.
npm install && npm run devWhen you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.
Your blog should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.
- Import the provided demo data to save time. Execute this command in your terminal:
sanity dataset import production.tar.gz
To deploy your changes to production you use git:
git add .
git commit
git pushAlternatively, you can deploy without a git hosting provider using the Vercel CLI:
npx vercel --prodgit clone https://github.com/SyedaMahamFahim/syedamaham.dev.gitcd syedamahamnpm installnpm run devTo set up Sanity for your project and get it working with demo data, there is a slightly lengthy process that needs to be followed. Unfortunately, Sanity does not provide the facility to create a project through their website. Please follow the steps below:
- Firstly, rename the existing Sanity folder to sanity2.
mv sanity sanity2- Install the Sanity CLI globally.
npm install -g @sanity/cli- After installing the Sanity CLI, create a new Sanity project in the same folder as your project (syedamaham.dev).
sanity init- Configure your new Sanity project. When prompted, select the options as shown in the screenshot below:
- After completing the setup, you will now have two Sanity projects: sanity and sanity2.
- Visit your Sanity account at https://www.sanity.io/manage/personal/projects, and you will see your new project listed.
- Click on the project to view its details and copy the project ID.
- In your code editor, delete the sanity project folder that you recently created. Be sure to only delete the sanity folder and keep the sanity2 folder intact.
- Rename sanity2 back to sanity to avoid copying schemas manually.
- Create an
env.localfile in your project's root directory to store environment variables or rename the existingenv.exampletoenv.local.
- Add the required environment variables to your
env.localfile. You don't need to search for all of them; you can simply paste the copied project ID. Ignore the other one if you are not planning to use it in a producation
- Visit the Sanity dashboard at https://www.sanity.io/manage/personal/projects, select your project, and navigate to the API section to create a new token.
- Name your token and ensure it is set to read-only access.
- Import the provided demo data to save time. Execute this command in your terminal:
sanity dataset import production.tar.gz
- After importing the data, run your website locally and access the Sanity Studio at
localhost/studio. Follow any prompts to log in and grant access to localhost.
- Now, you can see data is imported successfully
- Now you will see that the website is now functioning successfully on the local system.
Following these steps should help you set up your project with Sanity, import demo data, and access it seamlessly. If you have any questions or encounter any issues, please feel free to ask for assistance.