Gatsby + Cosmic

This repo contains an example blog website that is built with Gatsby, and Cosmic.

See live demo hosted on Netlify

Uses the Cosmic Gatsby Source Plugin

Prerequisites

• Node (I recommend using v8.2.0 or higher)
• Gatsby CLI

Install

# Make sure that you have the Gatsby CLI program installed
npm install --global gatsby-cli

# run from your CLI
gatsby new gatsby-example-blog https://github.com/cosmicjs/gatsby-blog-cosmicjs

In gatsby-config.js you need to add configuration for your Cosmic Bucket

{
  resolve: 'gatsby-source-cosmicjs',
  options: {
    bucketSlug: '', /* Find this in Your Bucket > Settings > Basic Settings after logging in at https://app.cosmicjs.com/login */
    objectTypes: ['posts', 'settings'], /* Object types to fetch */
    apiAccess: {
      read_key: '', /* Find this in Your Bucket > Settings > API Access after logging in at https://app.cosmicjs.com/login */
    },
    localMedia: true /* Optional. If you want to enable local image for Gatsby Image */
  }
},

Then

# Then you can run it by
cd gatsby-example-blog
npm run develop

Enable content auto refresh

To enable content auto refresh, open another terminal window and run the following command:

npm run poll-content

This will poll the content in your Bucket for any updates and automatically refresh it in your blog during development. Learn more about refreshing content in the Gatsby docs.

Deploy to Netlify

You can deploy to Netlify in a few steps using their CLI. Run the following commands from the root folder.

npm i -g netlify-cli
netlify deploy

Set your Environment Variables in Netlify

In the Netlify dashboard, set your environment variables located in Site Settings > Build and Deploy > Environment. Find your Cosmic Bucket keys located in Bucket > Basic Settings after logging in.

COSMIC_BUCKET=<your-bucket-slug>
COSMIC_READ_KEY=<your-bucket-read-key>