Skip to content

19.01.2019Development

Gatsby Blog, on Prismic

This post will describe how to set up a Gatsby blog using Prismic (a headless CMS), and deploy it on Netlify. Gatsby is a static site generator which uses next generation web technologies like GraphQL and React. It is fast and easy to get up and running with it, and they offer many starters to choose from (or you can start from scratch). In this tutorial we will use gatsby-starter-prismic as our starter, since it already is set up to work with Prismic.

Requirements

Get Started with Prismic

Create an account on Prismic and create a new repository. Once it is created, go to the dashboard and follow these steps to create an API key to use with Netlify/Gatsby:

  1. Go to settings (gear, bottom left)
  2. Find the API & Security section
  3. Click Generate Access Token, and give it a name

This key will be used when setting up Netlify.

Create the Gatsby Project

Install the Gatsby CLI:

npm install --global gatsby-cli

Once installed create a new Gatsby project using the gatsby-starter-prismic starter:

gatsby new project-name https://github.com/LekoArts/gatsby-starter-prismic
cd project-name

Edit the gatsby-config.js and under the plugins section change repositoryName to the name of your new Prismic repository.

Create a new repository on GitHub, and push the new Gatsby project to it.

Connect to Netlify

Create an account on Netlify (if you don't have one) and create a new site. Follow these steps:

  1. Select the GitHub repository that was created in the previous section.
  2. In the Build command field enter npm run build
  3. In the Publis directory field enter public
  4. Click Show advanced and then New variable
  5. Name the variable API_KEY and set the token from Prismic as the value
  6. Deploy the site

The first build will fail. This is because custom types have not yet been created in Prismic.

For more information on connection Prismic to Gatsby, refer to the Gatsby documentation.

Creating Content Types

Five custom content types need to be created within Prismic. Follow the steps below for each type:

  1. Go to your custom types tab
  2. Click the button "Create New" and choose "Repeatable Type" or "Single Type".
  3. On the right side you have a sidebar with Build mode and JSON editor. Open the JSON editor tab and insert the type data.
  4. Save your type

Post

Repeatable Type

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "slug",
        "placeholder" : "URL of the post"
      }
    },
    "date" : {
      "type" : "Date",
      "config" : {
        "label" : "date",
        "placeholder" : "Date"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "title",
        "placeholder" : "Title"
      }
    },
    "description" : {
      "type" : "Text",
      "config" : {
        "label" : "description",
        "placeholder" : "Description for SEO tags"
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "choices" : {
          "code_block" : {
            "type" : "Slice",
            "fieldset" : "Code Block",
            "description" : "Longer Code Block. Use labels inside it!",
            "icon" : "code",
            "display" : "list",
            "non-repeat" : {
              "code-block" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "preformatted",
                  "label" : "code-block",
                  "placeholder" : "Paste your code here with a label",
                  "labels" : [ "javascript", "css", "scss", "jsx", "bash", "json", "diff", "markdown", "graphql" ]
                }
              }
            },
            "repeat" : { }
          },
          "quote" : {
            "type" : "Slice",
            "fieldset" : "Quote",
            "description" : "Longer quote",
            "icon" : "format_quote",
            "display" : "list",
            "non-repeat" : {
              "quote" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, hyperlink, list-item, o-list-item, o-list-item",
                  "allowTargetBlank" : true,
                  "label" : "quote",
                  "placeholder" : "Quote"
                }
              }
            },
            "repeat" : { }
          },
          "text" : {
            "type" : "Slice",
            "fieldset" : "Text",
            "description" : "Rich Text",
            "icon" : "text_fields",
            "non-repeat" : {
              "text" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
                  "label" : "text",
                  "placeholder" : "Your content here",
                  "labels" : [ "text", "javascript", "css", "scss", "jsx", "bash", "json", "diff", "markdown", "graphql" ]
                }
              }
            },
            "repeat" : { },
            "display" : "list"
          },
          "image" : {
            "type" : "Slice",
            "fieldset" : "Image",
            "description" : "Gatsby-Image",
            "icon" : "camera_alt",
            "display" : "list",
            "non-repeat" : {
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 1200
                  },
                  "thumbnails" : [ ],
                  "label" : "image"
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  },
  "Meta" : {
    "categories" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "category" : {
            "type" : "Link",
            "config" : {
              "select" : "document",
              "customtypes" : [ "category" ],
              "label" : "category",
              "placeholder" : "Category"
            }
          }
        },
        "label" : "Categories"
      }
    }
  }
}

Category

Repeatable

{
  "Main" : {
    "name" : {
      "type" : "Text",
      "config" : {
        "label" : "name",
        "placeholder" : "Name of the category"
      }
    }
  }
}

Hero Links

Single Type

{
  "Main" : {
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "choices" : {
          "link_item" : {
            "type" : "Slice",
            "fieldset" : "Link Item",
            "description" : "Create a link for e.g. a navigation or link list",
            "icon" : "insert_link",
            "display" : "list",
            "non-repeat" : {
              "label" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, heading1, heading2, heading3, heading4, heading5, heading6, strong, em",
                  "label" : "Label",
                  "placeholder" : "Name of the link"
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "allowTargetBlank" : true,
                  "label" : "Link",
                  "placeholder" : "Link to the external project"
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  }
}

Homepage

Single Type

{
  "Main" : {
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "title",
        "placeholder" : "Title of the page"
      }
    },
    "content" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph, strong, em, hyperlink, image, embed, list-item, o-list-item",
        "label" : "content",
        "placeholder" : "Content under the title"
      }
    },
    "footer" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
        "allowTargetBlank" : true,
        "label" : "Footer",
        "placeholder" : "Footer"
      }
    }
  }
}

Projects

Single Type

{
  "Main" : {
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "choices" : {
          "link_item" : {
            "type" : "Slice",
            "fieldset" : "Link Item",
            "description" : "Create a link for e.g. a navigation or link list",
            "icon" : "insert_link",
            "display" : "list",
            "non-repeat" : {
              "label" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, heading1, heading2, heading3, heading4, heading5, heading6, strong, em",
                  "label" : "Label",
                  "placeholder" : "Name of the link"
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "allowTargetBlank" : true,
                  "label" : "Link",
                  "placeholder" : "Link to the external project"
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  }
}

Adding a Webhook

For new posts created on Prismic to automatically appear on your blog, a webhook must be created in Netlify and added to Prismic:

  1. Go to Settings in Netlify and click Build & deploy.
  2. Under Build hooks, select Add build hook
  3. Name the build hook, and save
  4. Back to Prismic, go to Settings and find the Webhooks section
  5. Copy the build hook URL from Netlify into the URL field (leave secret blank), and save

Now when a new post is made on Prismic, Netlify will automatically trigger a build so your new content will be visible.

blah blah

<p></p>

Recent posts

  • 19.01.2019Development

    Gatsby Blog, on Prismic