Install Sanity CLI:
npm install -g @sanity/cli
Upon installation of the CLI, you will be prompted to complete a simple survey to set up your project:
Select a Project to Use:
Create new project
HTML CMS
Use the default dataset configuration?
Y // this creates a "Production" dataset
Project output path:
studio // or whatever directory you'd like this to live in
Select project template
Clean project with no predefined schemas
This step will create a new project and dataset in your Sanity account (which you need to have, by the way), create a local version of Studio, and tie the data and CMS together for you. By default, the studio directory will be created in the root of our project. This is how the project is initialized for Jackyll.
To edit content in your CMS, you will need to start the Sanity dev server by entering sanity start in your CLI. After the server has started, navigate to localhost:3333 in your browser of choice.
However, to build your own site, you'll probably want to reorganize the Sanity schema file so that the data structure in your CMS matches what you want to use for your project.
The schema file for Jackle is located in /studio/schemas/schema.js
The way the schema is currently organized is by page and by component. Only two components, the sidebar and footer, repeat across pages. So the content for those components is reused. However, content for each page is stored in a separate schema "document". Each field is located in the "fields" array as a separate object. You'll notice that the fields named "content" are of the "array" type; and that the array contains objects of the type "block". That's because Sanity stores content text as Portable Text.
Portable Text needs to be converted to HTML. Hence Jackle uses the @sanity/block-content-to-html package to convert the fetched data to HTML. You will need to install this package as well.
This happens in the getSanityData() function in index.js
But wait, how does the index.js script know what to query or how to get the data in the Sanity CMS?
Jackyll has a /utils folder that contains two files:
config.jsSanityClient.js
The config.js file contains all of the queries. See a break-down of GROQ syntax here.
The SanityClient.js file contains info relevant to your instance of Sanity IO. The client allows you to hook into your instance of Sanity CMS. Of particular interest should be the projectId field, which you will have to replace with your own ID for your project.