Skip to content

Commit c011952

Browse files
committed
Merge branch 'master' into upgrade-format
2 parents e1f5c40 + cc43bd1 commit c011952

File tree

25 files changed

+315
-91
lines changed

25 files changed

+315
-91
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,8 @@ Websites built with Gatsby:
202202
* [Yuuniworks](https://www.yuuniworks.com/) ([source](https://github.com/junkboy0315/yuuni-web))
203203
* [Chin Loong Tan - Blog/Portfolio](https://chinloongtan.com/)
204204
* [F1 Vision](https://f1vision.com/)
205+
* [GraphQL College](https://graphql.college) ([source](https://github.com/GraphQLCollege/graphql-college))
206+
* [Hyunwoo Kim - Blog/Portfolio](https://devhalloween.com) ([source](https://github.com/khw1031/dev-blog))
205207

206208
## Docs
207209

dangerfile.js

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,2 @@
1-
import { message, danger } from "danger"
2-
3-
const messageText = `
4-
Gatsby requires contributors to sign each commit.
5-
6-
You can do this for your branch with \`git rebase --signoff\`, or for a single commit with \`git commit --amend -s\`.
7-
8-
Check out the [Developer Certificate of Origin docs](https://www.gatsbyjs.org/docs/how-to-contribute/#developer-certificate-of-origin) or comment here if you've any questions.
9-
`
10-
11-
const unsignedMessages = danger.github.commits
12-
.map(c => c.commit.message)
13-
.filter(msg => !msg.includes(`Signed-off-by:`))
14-
15-
if (unsignedMessages.length > 0) message(messageText)
1+
// http://danger.systems/js/
2+
// Danger JS rules go here...
146 KB
Loading
128 KB
Loading
926 KB
Loading
Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
title: Gatsby + Contentful Starter to Get a Website Up and Running in 5 Minutes
3+
date: 2018-04-04
4+
author: Robert Svensson
5+
canonicalLink: https://www.contentful.com/blog/2018/02/28/contentful-gatsby-video-tutorials/
6+
publishedAt: Contentful Knowledgebase
7+
excerpt: A five minute starter for Gatsby and Contentful
8+
---
9+
10+
![Gatsby+Contentful](gatsby_contentful.png)
11+
12+
_This blog post was originally posted on the [Contentful Docs](https://www.contentful.com/r/knowledgebase/gatsbyjs-and-contentful-in-five-minutes/)_
13+
14+
Working with React and having an emphasis on speedy performance, GatsbyJS is a promising static site generator that allows you to connect your projects to a variety of APIs and data sources; including Contentful’s content infrastructure.
15+
16+
This piece will walk you through getting your GatsbyJS website up and running with Contentful. Contentful makes it easy for you to focus on developing beautiful, well-performing websites while we deliver the content - this makes us a great companion to the full-fledged static content authoring experience offered by GatsbyJS.
17+
18+
Here’s an overview of what’s involved:
19+
20+
- Create a free Contentful account
21+
- Clone a sample repo
22+
- Create a space on Contentful to store content
23+
- Generate your Content Management and Content Delivery API access tokens
24+
- Import data into your space
25+
- Tweak your configuration file
26+
- Preview a production build
27+
- Publish and go live
28+
29+
###Getting started
30+
31+
This guide assumes that you have [GatsbyJS installed](/docs/) and, optionally, a [Github account](https://github.com/join). You will also need a free Contentful account - [creating one](https://www.contentful.com/sign-up/) only takes a moment.
32+
33+
Start by using this with the Gatsby CLI:
34+
35+
~~~bash
36+
gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter
37+
~~~
38+
39+
Alternatively, you can also clone a sample repo from Github:
40+
41+
~~~bash
42+
git clone git@github.com:contentful-userland/gatsby-contentful-starter.git
43+
~~~
44+
45+
And go into the directory and install the required dependencies with:
46+
47+
~~~bash
48+
npm install
49+
~~~
50+
51+
###Create a new space to store content
52+
53+
[A Space within Contentful](https://www.contentful.com/r/knowledgebase/spaces-and-organizations/) serves as a storage area for content that will be used in your website and can be configured to serve specific purposes. Content is described and stored using a data model which we call content types; these are entirely configurable.
54+
55+
Create a new empty space by opening the sidebar menu and adding a Space. Give the space an apt name and click "Create" to go ahead with making it.
56+
57+
![create a new space](new_space.png)
58+
59+
60+
61+
###Generate access tokens
62+
63+
Before getting to the exciting part of setting up your website, you first need to generate three access tokens to get your Contentful-powered website up and running by fetching data from the API.
64+
65+
- [Content Management API](https://www.contentful.com/developers/docs/references/content-management-api/)
66+
- [Content Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/)
67+
- [Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/)
68+
69+
Head over to your Space Settings dropdown menu and navigate to the APIs section. From there, navigate to the tab for the API token you would like to generate.
70+
71+
The Content Management API is used for write access to your space, so keep the generated token safe and private. Hit "Generate Personal Token", give it a name and click “Generate”. Copy the token value and keep it safe and private - this is the only time you’ll be able to view it in your dashboard.
72+
73+
![Generating a personal access token](access_token.png)
74+
75+
The Content Delivery API provides read-only access to your data and is one of the ways we deliver content to your website. Content is served via our Content Delivery Network (CDN). Click "Add API key" in the Content Delivery/Preview tab area. Grab the Space ID and personal Content Delivery API access token - you’ll need this in a bit.
76+
77+
The Content Preview API works much like the Content Delivery API, except it shows content internally for you to preview and hence does not use the CDN to serve content; since viewing is only limited to you, the previewing user. Creating an API key is the same here as you did with Content Delivery.
78+
79+
![Creating a new API key](api_key.png)
80+
81+
###Content model and configuration
82+
83+
Start setting things up with the npm run setup command, which first prompts you for the ID of the empty Space you just created along with the API access tokens for Content Management, Content Delivery, and Content Preview.
84+
85+
After that, it writes the credentials you provided into a file named .contentful.json into lines of code that look like so:
86+
87+
88+
~~~json
89+
{
90+
"development":{
91+
"host":"preview.contentful.com",
92+
"spaceId":"...",
93+
"accessToken":"..."
94+
},
95+
"production":{
96+
"spaceId":"...",
97+
"accessToken":"..."
98+
}
99+
}
100+
~~~
101+
102+
Using the credentials in the .contentful.json file, [content can now be imported](https://www.contentful.com/developers/docs/tutorials/general/import-and-export/) into your space to being displayed on your website via our API.
103+
104+
###It’s ready, let’s publish
105+
106+
Time to check out your new website - preview changes in a local environment by running your project using the npm run dev command. This uses the [Contentful Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/) to show unpublished content as if they were already published - perfect for a development or staging environment.
107+
108+
If you like what you see, use the npm run build command to start a static production build of your near-ready website and put it on a static host of your choice. After that, the npm run deploy command allows you to publish what you have on the production build onto GitHub pages.
109+
110+
###Deployment
111+
112+
Your static files can then be deployed on a variety of platforms of your choice, like [BitBalloon](https://www.bitballoon.com/) and [GitHub Pages](https://pages.github.com/). Take your pick. Contentful gives you infrastructure for the content in your stack, that matches your modular and agile way of working with platform independence and by serving as a layer in your stack.
113+
114+
Contentful ensures your website and its users can access your content quickly and reliably. Your content is just an API call away.
115+
116+
###Summary
117+
118+
###Summary
119+
120+
That’s a quick overview of how to get your website up and running from scratch using Contentful and GatsbyJS.
121+
122+
Contentful's platform offers speed, flexibility, and ease of integration with your code, supporting any stack you use with SDKs for common languages like [Javascript](https://www.contentful.com/developers/docs/javascript/sdks/), [Python](https://www.contentful.com/developers/docs/python/sdks/), and [PHP](https://www.contentful.com/developers/docs/php/sdks/). Unlike a CMS, Contentful provides you with separation between content and presentation, allowing you to focus on developing your website and leave content delivery to Contentful.
123+
124+
If you're curious to learn more about Contentful, you can check out the Contentful [Developer Center](https://www.contentful.com/developers/docs/) to learn more on how the technology works, or head over to the [Guides and tutorials](https://www.contentful.com/guides/) section.
55.1 KB
Loading
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Gatsby video tutorials a four part video series on Gatsby and Contentful by Khaled Garbaya
3+
date: 2018-04-05
4+
author: Carolyn Stransky
5+
canonicalLink: https://www.contentful.com/blog/2018/02/28/contentful-gatsby-video-tutorials/
6+
publishedAt: Contentful Blog
7+
excerpt: Video Tutorials for using Gatsby and Contentful
8+
tags: [contentful]
9+
---
10+
11+
_This blog post was originally posted on the [Contentful Blog](https://www.contentful.com/blog/2018/02/28/contentful-gatsby-video-tutorials/)_
12+
13+
Contentful developer and Gatsby contributor Khaled Garbaya has released a [4-part video series](https://www.youtube.com/watch?v=Ek4o40w1tH4&list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A) to help you build a “blazing fast” website with Gatsby and Contentful. The series begins by transforming the Gatsby’s getting started example to a Contentful-powered site. From there, each video walks you through a new aspect of production, from automating deployment with CircleCI to integrating the Contentful webhooks feature.
14+
15+
*-“I wanted these videos to act as documentation,”* says Khaled. *-“There were a lot of people asking around about how to do this. And I think it’s important to show not only how to do this thing with Gatsby or how to do that with Contentful, but from start to finish how you can actually deploy, use webhooks, and so on. These are hidden gems that not everyone will look for.”*
16+
17+
Those hidden gems Khaled is talking about are part of what he believes makes Gatsby and Contentful a compelling combination. Additionally, there are structural aspects of both platforms that add to this: *-“Gatsby works with React and React is component-based. And you can also think of Contentful in this way, if you think of your content as components”* he explains. *-“So that’s made a really perfect match because you can have this component that renders a specific content type and then this can be shared across your website.”*
18+
19+
Another unique distinction is the complementary ways Contentful and Gatsby process data. *-“Contentful has the sync endpoint, so this can actually improve the ability to process a lot,”* Khaled says. *-“Because the first time, you get all of the data. The next time, you only get the entries that changed so it takes less time to parse the JSON and so on. Also Gatsby is good because all of the data you have from Contentful would be in a GraphQL schema, so you can query your data that way.”*
20+
21+
Ready to dive in? [All four parts of Khaled’s video series are now available on YouTube](https://www.youtube.com/watch?v=Ek4o40w1tH4&list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A). You can also [find the source code on GitHub](https://github.com/Khaledgarbaya/gatsby-contentful-site).
22+
23+
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
24+
25+
Additionally, for a great Contentful + Gatsby blog starter, you can clone the [gatsby-contentful-starter](https://github.com/contentful-userland/gatsby-contentful-starter) repo and be up and running in no time.

docs/blog/author.yaml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,14 @@
105105
bio: Full-stack developer, clean code enthusiast, blogger at https://www.vojtechruzicka.com/
106106
avatar: avatars/vojtech-ruzicka.jpg
107107
twitter: "@vojtechruzicka"
108+
- id: Robert Svensson
109+
bio: Developer and web security enthusiast living in Berlin.
110+
avatar: avatars/robert-svensson.jpg
111+
twitter: "@RobertDMW"
112+
- id: Carolyn Stransky
113+
bio: Journalist and JavaScript developer based in Berlin, Germany.
114+
avatar: avatars/carolyn-stransky.jpg
115+
twitter: "@carolstran"
108116
- id: Sarah Mogin
109117
bio: Developer and Diet Coke enthusiast in Brooklyn, NY
110118
avatar: avatars/sarah-mogin.jpg
17.4 KB
Loading

0 commit comments

Comments
 (0)