Sanity CMS

From the previous article, I wrote some words about the challenge when it comes to build a static but dynamic site. Ultimate static site, continued. Read first part

Since I use Next JS to export or deploy as I prefeer to call it, it's a bit challenging when it comes to the part of creating content and run the deployment on API changes. I do think that I have a solution that will suit my need for this. I remember that I tested the Sanity Headless CMS in the past. This time I would actually get it a go. Sanity is a Norwegian based company and is very interresting and cool because of the services they provide. I use their Headless CMS. They was also the reason why I started to build applications with React and Next JS. When I noticed the performance, I got cuirous how it was made. Now I know! Visit Santity

Sanity platform

The only thing I need is to put content in Sanity (CMS), then load all data from the api into my application to rebuild my site with all modules, zones ect.

Middleware

By creating a middlware to load all API data from the Sanity API(GROQ) into my application, it automatically get's rebuilt on changes.

Install Sanity

This part is the best. In one line you are up and running, except for the scheme that you need to create to make your fields.

npm install -g @sanity/cli

Sanity is also very intelligent, just by adding a schema, to build up the content structure in Sanity, it directly becomes editable. It's so easy to learn and use. See the schema for my site below. It's not complete, it still need some tuning, like initialValues and some other fields. But I think you get the idea.

import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';

import page from "./documents/page";
import blockContent from "./modules/blockContent";
import introduction from "./modules/introduction";
import content from "./documents/content";
import timeline from "./documents/timeline";
import project from "./documents/project";
import timelineItem from "./objects/timelineItem";
import module from "./objects/module";
import search from "./modules/search";
import zone from "./objects/zone";
import settings from "./documents/settings";

export default createSchema({
    name: 'default',
    types: schemaTypes.concat([
        settings,
        page,
        content,
        module,
        zone,
        search,
        timeline,
        timelineItem,
        blockContent,
        introduction,
        project
    ])
});

Summary

By adding a Santity platform client API, I still have a static site, but in this way, it is also dynamic. I dont even have to use a database. The conslusion is that the whole site is very cheap to run, and it also run with minimal server resources.


Created by Bootproject editor on 2019-11-22


  • multi

    About

    The Swede(me), Rickard Magnusson a Senior Software Engineer, currently employeed as a freelance consultant in Norway.

  • Legal

    Bootproject.se and Footer.se is property of Bootproject and may be used under (MIT)licence . See project on Bitbucket

  • Logo Contact

    Email: bootproject@icloud.com

(©) Copyright www.bootproject.no 2020