ic-sanity

This template enables you to deploy an Astro + Sanity website on the Internet Computer. The deployment is done through Juno.

🌟 New to Juno? Check it out at juno.build

🚀 New to Astro? Check it out at astro.build

🎯 New to Sanity? Check it out at sanity.io

Usage

Requirements

Make sure you have the following installed:

• Node.js
• pnpm
• Juno CLI

Local development

1. Clone this repository (or use it as a template for your own project) and install dependencies:

   git clone https://github.com/ICP-HUB-Italy-Ticino/ic-sanity.git
   cd ic-sanity
   pnpm install

2. Create a satellite on Juno (guide). Copy the satellite ID once done.

3. Login to the Juno console and link the new satellite once asked:

   juno login

4. Update the <your-satellite-id> in the juno.config.ts file with the new satellite ID.

5. Create a new project with a dataset on Sanity (guide). Copy the project ID and the dataset name once done.

6. Set the environment variables in the .env file, following the .env.example template.

7. Deploy your project on Juno:

   pnpm run deploy

You can now access your website at https://<your-satellite-id>.icp0.io and the Sanity Studio at https://<your-satellite-id>.icp0.io/studio.

Every time you make a change, you have to deploy your project again with the Juno CLI:

pnpm run deploy

Have a look at the Set up the GitHub Action and/or Set up Sanity deployments to configure automatic deployments.

You can run the local preview with:

pnpm dev

Set up the GitHub Action

In order to deploy your website to production every time you push to the main branch, you need to set up a GitHub Action. There's already a GitHub Action set up for this repository, check it out at deploy.yaml.

You need to configure the same environment variables of your .env file as GitHub Action variables (guide):

• JUNO_TOKEN (guide)
• SANITY_STUDIO_PROJECT_ID
• SANITY_STUDIO_DATASET

We recommend you to set up GitHub variables instead of secrets for the SANITY_STUDIO_* variables, so that you can always lookup the values of these variables at any time. If you choose to set up secrets instead, make sure you update the deploy.yaml action to read the values from the secrets.

The deploy.yaml action is configured to run:

• when commits are pushed to the main branch
• when dispatched manually
• when triggered from a webhook, see Set up Sanity deployments and the GitHub docs

Set up Sanity deployments

In order to update the content of the website every time you save a document on Sanity, you need to set up Sanity to trigger a deployment on GitHub.

Before configuring the Sanity webhook, you need to obtain a GitHub token. See Authenticating with a personal access token and make sure you give Read and Write permissions for Contents.

1. Go to the API settings of your Sanity project and click on + Create webhook

2. Configure the webhook with the following settings:

   • Name: a custom name like "Deploy Website on Juno" or so

   • URL: https://api.github.com/repos/<your-github-username>/<your-repo>/dispatches

   • Dataset: choose on which datasets you want to trigger the deployment

   • Trigger on: Select all the available options: Create, Update, Delete

   • Projection:

     {
       "event_type": "website-deploy: sanity update"
     }

     The content of the event_type field is arbitrary and can be whatever you want. It will appear as the workflow run name in the GitHub Actions section of the repository.

   • HTTP method: POST

   • HTTP headers:

     Name	Value
     Content-Type	application/vnd.github+json
     Authorization	Bearer <your-github-token>
     X-GitHub-Api-Version	2022-11-28 (change this if needed)

   Leave all the other fields empty/with default values.

   The configuration should look like this:

3. Save the webhook

After saving the webhook, you should see the workflow run in the GitHub Actions section of the repository every time you publish some content on Sanity.