Prismic

Kickstart has preconfigured prismic as the cms provider.

Setup prismic as cms provider

Head over to Prismic for setup your prismic account.

Create repository

Create a new repository

Repository name: kickstartFirebaseDemo
Display name (optional): Kickstart Firebase Demo

Click inside repository, it will pop up modal for you to choose the language

Author custom type

Create new custom type

Choose Type: Repeatable TYpe
Type name: author

Click JSON editor

and paste the following json setting

{
  "Main" : {
    "name" : {
      "type" : "Text",
      "config" : {
        "label" : "name"
      }
    },
    "picture" : {
      "type" : "Image",
      "config" : {
        "constraint" : { },
        "thumbnails" : [ ],
        "label" : "picture"
      }
    }
  }
}

Post custom type

Create new custom type

Choose Type: Repeatable Type
Type name: post

Click JSON editor

image

and paste the following json setting

{
  "Main" : {
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1, heading2, heading3, heading4, heading5, heading6",
        "label" : "title"
      }
    },
    "content" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "preformatted",
        "label" : "content"
      }
    },
    "excerpt" : {
      "type" : "Text",
      "config" : {
        "label" : "excerpt"
      }
    },
    "coverimage" : {
      "type" : "Image",
      "config" : {
        "constraint" : { },
        "thumbnails" : [ ],
        "label" : "coverimage"
      }
    },
    "date" : {
      "type" : "Date",
      "config" : {
        "label" : "date"
      }
    },
    "author" : {
      "type" : "Link",
      "config" : {
        "select" : "document",
        "customtypes" : [ "author" ],
        "label" : "author"
      }
    },
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "slug"
      }
    }
  }
}

Author Document

Create author

name: John Doe
picture: you can download one from Unsplash.

Post Document

Create Post

title: Demo title
content: dummy markdown data
excerpt: Demo excerpt
coverimage: you can download one from Unsplash.
date: pick a day
author: choose author you just created before

Local Environment Variables

Head cover to Prismic Doc to generate a new access token

Record down your prismic api token

Configure prismic api token, prismic repository name, and prismic repository locale into the web/.env.local

PRISMIC_API_TOKEN should be the Permanent access token you just created
PRISMIC_REPOSITORY_NAME is the name of your repository (the one in the URL)
PRISMIC_REPOSITORY_LOCALE is the locale of your repository. Defaults to en-us

The locale should match your Prismic repo settings.

Run kickstart in development mode

npm install
npm run dev
# or
yarn install
yarn dev

Your blog should be up and running on http://localhost:3000/blog

Setup preview mode

In Prismic dashboard, go to settings / previews, under create a new preview for development, fill the form as following:

Site Name: development
Domain of Your Application: http://localhost:3000
Link Resolver: /api/preview

Once saved, go to one of the posts you've created and:

Update the title. For example, you can add [Draft] in front of the title.
Click Save, but DO NOT click Publish. By doing this, the post will be in draft state.
Right next to the Publish button you should see the Preview button, displayed with an eye icon. Click on it!

You should now be able to see the updated title. To exit preview mode, you can click on Click here to exit preview mode at the top of the page.