Skip to content

Commit

Permalink
Update sourcing-from-buttercms.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Bamblehorse committed Oct 9, 2019
1 parent 53473cc commit 1215ac6
Showing 1 changed file with 24 additions and 24 deletions.
48 changes: 24 additions & 24 deletions docs/docs/sourcing-from-buttercms.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: Sourcing from ButterCMS

## Overview

In this guide we'll be setting up a CMS powered Gatsby site that uses [ButterCMS](https://buttercms.com/) as its content management system.
In this guide you'll be setting up a CMS powered Gatsby site that uses [ButterCMS](https://buttercms.com/) as its content management system.

To complete this tutorial, you'll need your own ButterCMS auth token which you can [get yours free here](https://buttercms.com/#signup).

ButterCMS is a headless CMS that lets you manage content using their dashboard and integrate it into your tech stack of choice with their content APIs. You can use ButterCMS for new projects as well as add it to existing codebases.

ButterCMS provides a user-friendly UI for managing marketing sites, blogging, and custom content scenarios. We can be used for SEO landing pages, customer case studies, company news & updates, events + webinar pages, education center, location pages, knowledgebases, and more.
ButterCMS provides a user-friendly UI for managing marketing sites, blogging, and custom content scenarios. It can be used for SEO landing pages, customer case studies, company news & updates, events + webinar pages, education center, location pages, knowledgebases, and more.

ButterCMS is different from a traditional CMS like Drupal or WordPress in that they're not a large piece of software you need to download, host, customize, and maintain. Instead they provide easy to consume, performant content API's that you add to your application.

Expand Down Expand Up @@ -42,10 +42,10 @@ Run this in your terminal:

`npm install gatsby-source-buttercms`

## Adding Configuration
## Adding configuration

Here you'll specify the config that will be needed to pull down data from butter.
make sure to add your **API_TOKEN** from your dashboard, in this guide we would be creating `faq_items`, `faq_headline`, `homepage` , `customer_case_study` as stated in the config below. Do well to change it if you named it something differently.
Make sure to add your **API_TOKEN** from your dashboard. In this guide you will be creating `faq_items`, `faq_headline`, `homepage` , `customer_case_study` as stated in the config below. Do well to change it if you named it something differently.

```javascript:title=gatsby-config.js
module.exports = {
Expand All @@ -70,7 +70,7 @@ module.exports = {

More details [here](https://github.com/buttercms/gatsby-source-buttercms)

## ButterCMS Starter Template
## ButterCMS starter template

To see a fully complete Gatsby+ButterCMS project check out this [Gatsby ButterCMS Starter Project](https://github.com/ButterCMS/gatsby-starter-buttercms). It contains real world examples of how to use Pages, Posts, and ContentFields.

Expand All @@ -79,11 +79,11 @@ To see a fully complete Gatsby+ButterCMS project check out this [Gatsby ButterCM
## Webhooks

Webhooks are a powerful feature that allow you to notify your internal systems whenever content in ButterCMS has changed.
Your host platform need to be notified so that gatsby can create fresh pages from the new data. You can learn more about Webhooks in this [blog post](https://buttercms.com/blog/webhook-vs-api-whats-the-difference). Checkout your host platform form incoming webhooks so we can hit it anytime your content changes. Netlify lets you generate a build hook that will be triggered by butter on certain event e.g. when we create or update a blog post more details [here](https://buttercms.com/docs/api/#webhooks)
Your host platform need to be notified so that gatsby can create fresh pages from the new data. You can learn more about Webhooks in this [blog post](https://buttercms.com/blog/webhook-vs-api-whats-the-difference). Checkout your host platform form incoming webhooks so you can hit it anytime your content changes. Netlify lets you generate a build hook that will be triggered by butter on certain event e.g. when you create or update a blog post more details [here](https://buttercms.com/docs/api/#webhooks)

![Webhook](https://buttercms.com/static/images/docs/guides/OverviewWebhooks.png "Webhook")

## Image Transformation
## Image transformation

ButterCMS has integrated with a rich image transformation API called Filestack. This allows you to modify your uploaded images in dozens of ways. Everything from resizing, cropping, effects, filters, applying watermarks and more. Check out Filestack full documentation for more detail.

Expand All @@ -107,13 +107,13 @@ ButterCMS has full support for localization of your content. Locale names and ke

Quickly launch a new marketing site or add CMS-powered pages to your existing site using our Pages.

## Creating a Single page(Home Page)
## Creating a single page(home page)

### Introduction

Quickly launch a new marketing site or add [CMS-powered pages](https://buttercms.com/gatsbyjs-cms/) to your existing site using our Pages.

### Create a Single Page
### Create a single Page

Adding a CMS-powered page to your app involves three easy steps:

Expand All @@ -123,15 +123,15 @@ Adding a CMS-powered page to your app involves three easy steps:

If you need help after reading this, contact us via email or livechat.

#### Create the Page structure
#### Create the page structure

Create a new Page and define it's structure using our Page Builder. Let's create an example homepage.

![image](https://buttercms.com/static/images/docs/guides/PagesNewSinglePage.png)

#### Populate the Content
#### Populate the content

Then populate our new page with content. In the next step, we'll call the ButterCMS API to retrieve this content from our app.
Then populate our new page with content. In the next step, you'll call the ButterCMS API to retrieve this content from our app.

![image](https://buttercms.com/static/images/docs/guides/PagesNewSinglePageContent.png)

Expand Down Expand Up @@ -289,7 +289,7 @@ Then click on Create Page Type and name it "Customer Case Study". This will allo

![saving](https://buttercms.com/static/images/docs/guides/PagesNewPageType3.png)

## Populate the Content
## Populate the content

Then populate our new page with content. In the next step, we'll call the ButterCMS API to retrieve this content from our app.

Expand Down Expand Up @@ -445,7 +445,7 @@ export const query = graphql`
export default IndexPage
```

Next we'll refactor `gatsby-node-js` to programmatically create customer case study pages with gatsby create pages API. First we need to define a customer case study template
Next you'll refactor `gatsby-node-js` to programmatically create customer case study pages with gatsby create pages API. First you need to define a customer case study template

```jsx:title=src/templates/customer-case-study.js
import React from "react"
Expand Down Expand Up @@ -490,7 +490,7 @@ export const pageQuery = graphql`
export default CustomerCaseStudy
```

Now Let's programmatically Create customer case study pages based on the template we defined in `src/template/customer-case-study.js`
Now let's programmatically create customer case study pages based on the template you defined in `src/template/customer-case-study.js`

```javascript:title=gatsby-node.js
const path = require(`path`)
Expand Down Expand Up @@ -598,13 +598,13 @@ That's it! now stop the server and run:
gatsby develop
```

Now the home page should contain links to customer case study pages, Click around
you'll notice that the template we defined in `src/template/customer_case_study.js`
Now the home page should contain links to customer case study pages, click around
you'll notice that the template you defined in `src/template/customer_case_study.js`
was use by gatsby to create each case study page.

## Setup content fields

Let's suppose we want to add a CMS to a static FAQ page with a title and a list of questions with answers. Most websites have a FAQ(Frequently Asked Question) Page. ButterCMS make it dead easy to create such content with Collections . Now we'll create a collection named `FAQs`having a `question` and `answer` field.
Let's suppose you want to add a CMS to a static FAQ page with a title and a list of questions with answers. Most websites have a FAQ(Frequently Asked Question) page. ButterCMS make it dead easy to create such content with Collections . Now you'll create a collection named `FAQs`having a `question` and `answer` field.

Making your content dynamic with Butter is a two-step process:

Expand Down Expand Up @@ -715,9 +715,9 @@ export default Faq

Butter CMS is also a great feat if you want to spin up a blog, it's pretty easy as they provide a [blog engine](https://buttercms.com/gatsbyjs-blog-engine/) that helps you manage content in one place. Gatsby then pulls down the data at build time and create static pages off that data.

# Blog Home Page
# Blog home page

Now we would create a home page for our blog posts. It basically lists all blog posts.
Now you will create a home page for our blog posts. It basically lists all blog posts.

```jsx:title=src/pages/blog.js
import React from "react"
Expand Down Expand Up @@ -824,7 +824,7 @@ export const pageQuery = graphql`

## Creating a blog template

Now we've listed our blog posts in `src/pages/blog.js`, using gatsby [createpages](/docs/node-apis/#createPages) API we would generate blog post pages using a template:
Now you've listed our blog posts in `src/pages/blog.js`, using gatsby [createpages](/docs/node-apis/#createPages) API you would generate blog post pages using a template:

```jsx:title=src/pages/template/blog-post.js
import React from "react"
Expand Down Expand Up @@ -921,9 +921,9 @@ export const pageQuery = graphql`
`
```

## Generate Blog Pages
## Generate blog pages

Now we'll use the blog template defined in `src/templates/blog-post.js` to generate blog pages.
Now you'll use the blog template defined in `src/templates/blog-post.js` to generate blog pages.

```javascript:title=gatsby-node.js
const path = require(`path`)
Expand Down Expand Up @@ -972,7 +972,7 @@ exports.createPages = async ({ graphql, actions }) => {
}
```
## Categories, Tags, and Authors
## Categories, tags, and authors
Use Butter's APIs for categories, tags, and authors to feature and filter content on your blog.
See their [API reference](https://buttercms.com/docs/api/) for more information about these objects:
Expand Down

0 comments on commit 1215ac6

Please sign in to comment.