diff --git a/docs/docs/glamor.md b/docs/docs/glamor.md
new file mode 100644
index 0000000000000..9b6ccab374885
--- /dev/null
+++ b/docs/docs/glamor.md
@@ -0,0 +1,105 @@
+---
+title: Glamor
+---
+
+Let's create a page using
+[Glamor](https://github.com/threepointone/glamor). It might be useful for you to explore [CSS Modules](/tutorial/part-two/) and [Styled Components](/styled-components/) to see how Glamor compares as a styling method.
+
+Glamor lets you write _real_ CSS inline in your components using the same Object
+CSS syntax React supports for the `style` prop. Glamor is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS.
+
+One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes.
+
+With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used.
+
+First, install the Gatsby plugin for Glamor.
+
+```shell
+npm install --save gatsby-plugin-glamor
+```
+
+And then add it to your `gatsby-config.js`
+
+```javascript{9}
+module.exports = {
+ plugins: [
+ {
+ resolve: `gatsby-plugin-typography`,
+ options: {
+ pathToConfigModule: `src/utils/typography.js`,
+ },
+ },
+ `gatsby-plugin-glamor`,
+ ],
+}
+```
+
+Restart `gatsby develop` again to enable the Glamor plugin.
+
+Now create the Glamor page at `src/pages/about-glamor.js`
+
+```jsx
+import React from "react";
+
+import Container from "../components/container";
+
+export default () => (
+
+ About Glamor
+ Glamor is cool
+
+);
+```
+
+Let's add the same inline `User` component that you would use for CSS Modules, but this time using Glamor's `css`
+prop.
+
+```jsx{5-27,33-40}
+import React from "react"
+
+import Container from "../components/container"
+
+const User = props =>
+
+
+
+
+ {props.username}
+
+
+ {props.excerpt}
+
+
+
About Glamor
+ Glamor is cool
+
+
+
+```
+
+If you are using Glamor in Part Two of the tutorials, the final Glamor page should look identical to the CSS Modules page.
+
+
diff --git a/docs/docs/styled-components.md b/docs/docs/styled-components.md
new file mode 100644
index 0000000000000..1ca24d7c6fb21
--- /dev/null
+++ b/docs/docs/styled-components.md
@@ -0,0 +1,103 @@
+---
+title: Styled Components
+---
+
+[Styled Components](https://www.styled-components.com/) is an example of using CSS-in-JS. It might be useful for you to explore [CSS Modules](/tutorial/part-two/) and [Glamor](/glamor/) to see how Styled Components compares as a styling method.
+
+Styled Components lets you use actual CSS syntax inside your components. Like Glamor, Styled Components is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS.
+
+One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes.
+
+With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used.
+
+First, we'll install the Gatsby plugin for Styled Components.
+
+```sh
+npm install --save gatsby-plugin-styled-components styled-components
+```
+
+Then modify the `gatsby-config.js`. If you've previously used the Glamor plugin in this site,
+you'll need to remove the Glamor plugin and delete the Glamor component page we
+created. The two plugins conflict with each other as both want to take control
+during server rendering.
+
+```javascript{9}
+module.exports = {
+ plugins: [
+ {
+ resolve: `gatsby-plugin-typography`,
+ options: {
+ pathToConfigModule: `src/utils/typography.js`,
+ },
+ },
+ `gatsby-plugin-styled-components`,
+ ],
+}
+```
+
+Then at `src/pages/about-styled-components.js` create:
+
+```jsx
+import React from "react";
+import styled from "styled-components";
+
+import Container from "../components/container";
+
+const UserWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ margin: 0 auto 12px auto;
+ &:last-child {
+ margin-bottom: 0;
+ }
+`;
+
+const Avatar = styled.img`
+ flex: 0 0 96px;
+ width: 96px;
+ height: 96px;
+ margin: 0;
+`;
+
+const Description = styled.div`
+ flex: 1;
+ margin-left: 18px;
+ padding: 12px;
+`;
+
+const Username = styled.h2`
+ margin: 0 0 12px 0;
+ padding: 0;
+`;
+
+const Excerpt = styled.p`
+ margin: 0;
+`;
+
+const User = props => (
+
+
+
+ {props.username}
+ {props.excerpt}
+
+
+);
+
+export default () => (
+
+ About Styled Components
+ Styled Components is cool
+
+
+
+);
+```
diff --git a/www/src/pages/docs/doc-links.yaml b/www/src/pages/docs/doc-links.yaml
index 39cdfd3dfc373..7bc27be0fd76d 100644
--- a/www/src/pages/docs/doc-links.yaml
+++ b/www/src/pages/docs/doc-links.yaml
@@ -44,6 +44,8 @@
link: /docs/environment-variables/
- title: Gatsby on Windows
link: /docs/gatsby-on-windows/
+ - title: Using CSS-in-JS library Glamor
+ link: /docs/glamor/
- title: How Gatsby Works with GitHub Pages
link: /docs/how-gatsby-works-with-github-pages/
- title: Migrating from v0 to v1
@@ -52,6 +54,8 @@
link: /docs/path-prefix/
- title: Proxying API Requests
link: /docs/api-proxy/
+ - title: Using CSS-in-JS library Styled Components
+ link: /docs/styled-components/
- title: Adding Markdown Pages
link: /docs/adding-markdown-pages/
- title: Adding a List of Markdown Blog Posts*