Conversion from static to dynamic site with Sanity

In this version I changed my site from being static to dynamic. Dont get me wrong, it's still static but with the ability to change the content with Sanity Studio.

I added a middleware for the data storage, that will read the JSON (API) from Sanity and parse it into my modules, pages, etc. The conversion was easy, but I needed to make o lot of changes like the output of html.

Content Blocks
The html is now produced by a serializer (BlockContent) or as Sanity prefer to pronounce it, PortableText. Below you'll see the serializer for my content module.

const urlFor = (source) => {
    return imageUrlBuilder(client).image(source);

const serializer = {
    types: {
        block(props) {
            switch ( {
                case 'h1':
                    return <h1>{props.children}</h1>
                case 'h2':
                    return <h2>{props.children}</h2>
                case 'h3':
                    return <h3>{props.children}</h3>
                case 'span':
                    return <p>{props.children}</p>
                case 'code':
                    return <pre>{props.children}</pre>
                case 'link':
                    return <a>{props.children}</a>
                    return <p>{props.children}</p>
        image: props => <img src={urlFor(props.node.asset)} className="contentimg" alt="" />,
        imagetext: props => <h2><img src={urlFor(props.node.image.asset)} alt="" /> {props.node.header}</h2>,
        code: props => <SyntaxHighlighter language={props.node.language}>{props.node.code}</SyntaxHighlighter>,
        biglink: props => <div><br /><a class="biglink" href={props.node.url} target="_blank">{props.node.linktext}</a><br /><br /></div>

export { serializer, urlFor };

To use the above serializer, use the BlockContent module in your react js file:

 <BlockContent blocks={contentBlocks} serializers={serializer} />


Since the Redux JS does not have any support for ASYNC functions, I removed the Redux from the project. Instead I made a storage fetcher, that fetches all data from the api and put it into objects. Below is an example of the fetch from the GROQ.

    await client
        .then(pages =>
   => {
                var r = {
                    id: p._id, 
                    path: p.slug.current,
                    layout: p.layout[0],
                    pathId: null,
                    icon: p.icon,
                    title: p.title,
                    hidden: p.hidden,
                    meta_title: p.meta_title,
                    meta_description: p.meta_description,
                    zones: => {
                        return { name:[0], modules: => { return m; }) };


I'm very pleased that I decided to switch and use the Sanity Studio. It's easy to deploy, use and extend. Head over to Sanity to check it out

Created by Bootproject editor on 2020-01-09

  • multi


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

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

  • Logo Contact


(©) Copyright 2020