✨ Azimuth Nextjs Sanity Theme ✨

This Stackbit's "Azimuth" theme built with Next.js and powered by Sanity.

Click the button below to create a new website from this theme using Stackbit:

Live Site demo

The theme can be used to create a static website that is hosted by a serverless deployment platform such as Netlify. The contents of the website are stored in Sanity.io, a Headless CMS.

When deploying the website, Sourcebit fetches the site's contents from Sanity and provides it to Next.js. Once Next.js finishes generating the static website, Netlify pushes the static files to its CDN.

Sourcebit and its plugins, specifically sourcebit-source-sanity and sourcebit-target-next, are used to fetch website contents from Sanity, normalize it, and provide it to Next.js pages. It also sets up live updates in development mode allowing to update the content in CMS and instantly see them in the browser.

The Next.js SSG support has been leveraged to support client side rendering when navigating the internal links of the site.

Quick Start 🏎

Create a site from this theme using Stackbit.

Stackbit will execute following steps for you

• Create a new GitHub repository with the contents of this repository.
• Create a new Sanity project.
• Deploy the Sanity Studio.
• Create Netlify site connected to the GitHub repo
• Deploy the Netlify site.
• Create a Stackbit project that will allow you edit your website via on-page visual editing experience.

Additionally, Stackbit will connect all services together:

• Create a "commit" webhook in GitHub that will trigger Netlify deployment as soon as new commit is pushed to GitHub.
• Create a "publish" webhook in Sanity that will trigger Netlify deployment as soon as content is published in Sanity.

Editing Content 📝

Once Stackbit creates a site, you can start editing the content using the free on-page editing experience provided by the Stackbit Studio.

Here's a few resources to get you started:

• 📺   Editing Content
• 📺   Adding, Reordering and Deleting Items
• 📺   Collaboration
• 📺   Publishing
• 📚   Stackbit Documentation

If you need a hand, make sure to check the Stackbit support page.

Develop Locally 🛠

1. Create a site from this theme using Stackbit.

2. Once finished, you will be redirected to Stackbit Studio where you will be able to edit the content using the free on-page editing experience, and publish new versions of your site.

3. To further develop your site, clone the generated repository.

4. Install dependencies

   run npm install
   

5. Optionally, run Sanity Studio locally by installing sanity-cli, and then installing and running the studio from the /studio directory. You may be required to login with the Sanity CLI.

    npm install -g @sanity/cli
    cd studio
    sanity login
    sanity install
    sanity start
   

6. Set the following environment variables locally.

   • SANITY_PROJECT_ID - Sanity project ID (you can copy it from the api.projectId key in studio/sanity.json)
   • SANITY_DATASET - Sanity dataset name (optional, default is production)
   • SANITY_TOKEN - Sanity read-write token (you can copy it from the "environment" section in your Netlify site https://app.netlify.com/sites//settings/deploys#environment)

7. Start the Gatsby local development server (run from project root):

    npm run dev
   

8. Navigate to http://localhost:3000 to see the site. You can now edit the site contents in the local Sanity Studio, and the browser will live-update your changes. 🎉

Contributing 🙏

To contribute to this theme please follow the following steps:

1. Clone this repository locally

2. Install Sanity CLI

    npm install -g @sanity/cli
   

3. Login into Sanity

    sanity login
   

4. Install dependencies

    npm install
   

5. Create an empty Sanity project, and a "production" dataset (this just creates a project)

    node sanity-export/create-project.js
    
    > creating a project...
    > created a project, projectId: dgaiu42f
    > creating a dataset...
    > created a dataset
   

6. Copy paste the projectId from the output of the previous step and import the initial theme contents from sanity-export/export.tar.gz to the production dataset by running:

    node sanity-export/import.js <project_id>
   

7. Replace the SANITY_PROJECT_ID in studio/sanity.json with your Sanity project id

8. Install and start local Sanity Studio

    cd studio
    sanity install
    sanity start
   

   Sanity studio is now available at http://localhost:3333

9. Define following environment variables to allow Sourcebit to fetch the content from Sanity when developing or building the site. You will need to create a "read-write" token in your Sanity project settings page (https://manage.sanity.io/projects/__PROJECT_ID__/settings/api)

   export SANITY_PROJECT_ID=<project_id>
   export SANITY_DATASET=production
   export SANITY_TOKEN=<read_write_token>
   

10. Lastly, run the development server (from project folder):

     npm run dev
    

    Navigate to http://localhost:3000 to see the site. You can now edit the site contents in the local Sanity Studio, and the browser will live-update your changes.

11. Once you finish updating the code and contents, export the contents back to the sanity-export/export.tar.gz file by running:

     node sanity-export/export.js <project_id>
    

12. Set back the "projectId": "SANITY_PROJECT_ID" in studio/sanity.json

13. Commit, push and submit a pull-request 🎉

Building for production 🏗

To build a static site for production, run the following command

npm run build

The exported site will be written to out folder. The contents of this folder can be deployed by serverless deployment platform such as Netlify.

Learn More 📚

To learn more about Stackbit, take a look at the following resources:

• Stackbit Documentation
• Configure your theme using stackbit.yaml

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

To learn more about Sanity, take a look at the following resources:

• Sanity Docs
• Sanity Reference

To learn more about Netlify, take a look at the following resources:

• Netlify Docs