gatsbyjs · calcsam · Apr 3, 2018 · Mar 30, 2018 · Mar 31, 2018 · Mar 31, 2018
diff --git a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md
@@ -9,6 +9,7 @@ imageTitle: "Old typewriter"
 canonicalLink: "https://objectpartners.com/2017/07/19/creating-a-static-blog-with-gatsby/"
 publishedAt: "Object Partners, Inc."
 excerpt: "In this post, we'll take a deep dive into Gatsby and some of the new 1.0 features by creating a static blog. Let's get on it!"
+tags: ["getting-started", "blog", "markdown"]
 ---
 
 Gatsby is an incredible static site generator that allows for React to be used

diff --git a/docs/blog/2017-09-13-why-is-gatsby-so-fast/index.md b/docs/blog/2017-09-13-why-is-gatsby-so-fast/index.md
@@ -5,6 +5,7 @@ author: "Kyle Mathews"
 image: "reactnext-gatsby-performance.001.png"
 showImageInArticle: false
 typora-copy-images-to: ./
+tags: ["performance", "mobile", "pwa"]
 ---
 
 _I gave this talk last weekend at [ReactNext](http://react-next.com/) in Tel

diff --git a/docs/blog/2017-09-18-gatsby-modern-static-generation/index.md b/docs/blog/2017-09-18-gatsby-modern-static-generation/index.md
@@ -4,6 +4,7 @@ date: "2017-09-18"
 image: "code-image.jpg"
 author: "Kostas Bariotis"
 excerpt: "In this post, I will talk about static site generators -- how they have evolved and why I switched from a Ghost powered site to Gatsby.js, a modern static site generator."
+tags: ["ghost", "wordpress", "caching"]
 ---
 
 In this post, I will talk about static site generators -- how they have evolved

diff --git a/docs/blog/2017-09-21-community-roundup-1/index.md b/docs/blog/2017-09-21-community-roundup-1/index.md
@@ -5,6 +5,7 @@ author: "Kyle Mathews"
 image: "on-the-trail.jpg"
 showImageInArticle: true
 typora-copy-images-to: ./
+tags: ["v1", "tutorials", "plugins"]
 ---
 
 It's been a wild 77 days since Gatsby 1.0.0 was released into the world on July

diff --git a/docs/blog/2017-09-26-embracing-graphql/index.md b/docs/blog/2017-09-26-embracing-graphql/index.md
@@ -4,6 +4,7 @@ date: "2017-09-26"
 image: "toa-heftiba-274947.jpg"
 author: "Tim Arney"
 excerpt: "Moving to Gatsby 1.x and embracing the new GraphQL setup can be daunting but the effort is going to payoff"
+tags: ["v1", "graphql", "getting-started"]
 ---
 
 Before I built [React FAQ](https://reactfaq.site/), I went looking for a static

diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
@@ -4,6 +4,7 @@ date: "2017-10-01"
 image: "hexo-to-gatsby.png"
 author: "Ian Sinnott"
 excerpt: "How I migrated my blog to Gatsby and how you can do the same."
+tags: ["hexo", "getting-started", "markdown"]
 ---
 
 _This article was originally posted on

diff --git a/docs/blog/2017-10-03-smartive-goes-gatsby/index.md b/docs/blog/2017-10-03-smartive-goes-gatsby/index.md
@@ -4,6 +4,7 @@ date: "2017-10-03"
 image: "smartive-loves-gatsby.png"
 author: "Moreno Feltscher"
 excerpt: "At smartive we always saw the potential of static site generators. We recently made the switch to Gatsby.js for our company site. A decision we don’t regret. Here’s why."
+tags: ["company-site", "ci"]
 ---
 
 _This article was originally published on

diff --git a/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md b/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md
@@ -4,6 +4,7 @@ date: "2017-10-05"
 image: "gatsby-article-cover-image.jpg"
 author: "David James"
 excerpt: "Recreating my WordPress portfolio site using GatsbyJS, React and the WordPress REST API"
+tags: ["portfolio-site", "wordpress", "graphql", "plugins", "performance", "getting-started"]
 ---
 
 _This article was originally published on

diff --git a/docs/blog/2017-10-16-making-website-building-fun/index.md b/docs/blog/2017-10-16-making-website-building-fun/index.md
@@ -3,6 +3,7 @@ title: "Making website building fun"
 date: 2017-10-16
 author: "Kyle Mathews"
 typora-copy-images-to: ./
+tags: ["right-building-blocks", "gatsby-image", "react", "graphql", "plugins"]
 ---
 
 I still remember the first non-trivial React component I built in 2014—not long

diff --git a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md
@@ -2,6 +2,7 @@
 title: "Building i18n with Gatsby"
 date: 2017-10-17
 author: "Samuel Goudie"
+tags: ["i18n"]
 ---
 
 Languages are a key part of who we are; they are an expression of our identity.

diff --git a/...og/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md b/...og/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md
@@ -2,6 +2,7 @@
 title: From WordPress to Developing in React — Starting to See It
 date: "2017-10-20"
 author: "Benjamin Read"
+tags: ["React", "getting-started", "wordpress"]
 ---
 
 As a frontend designer I've always prided myself on being a HTML and CSS

diff --git a/...og/2017-10-29-my-search-for-the-perfect-universal-javaScript-framework/index.md b/...og/2017-10-29-my-search-for-the-perfect-universal-javaScript-framework/index.md
@@ -2,6 +2,7 @@
 title: My search for the perfect universal JavaScript framework
 date: "2017-10-29"
 author: "Tal Bereznitskey"
+tags: ["react", "ssr", "static"]
 ---
 
 It was 2010 when [Backbone.js](http://backbonejs.org) came out. Finally I could

diff --git a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md
@@ -2,6 +2,7 @@
 title: Migrate from Hugo to Gatsby
 date: 2017-11-06
 author: "Kalin Chernev"
+tags: ["hugo", "markdown", "getting-started", "netlify-cms"]
 ---
 
 ## Introduction

diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md
@@ -2,6 +2,7 @@
 title: "Migrate from Jekyll to Gatsby"
 date: 2017-11-08
 author: "Nahuel Scotti"
+tags: ["jekyll", "markdown", "getting-started", "ci"]
 ---
 
 ## A bit of history

diff --git a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md
@@ -2,6 +2,7 @@
 title: "Why I created my blog with Gatsby and Contentful"
 date: 2017-11-09
 author: "Fernando Poumian"
+tags: ["contentful", "netlify", "getting-started", "hosting", "static"]
 ---
 
 I recently deployed my new blog at

diff --git a/docs/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/index.md b/docs/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/index.md
@@ -4,6 +4,7 @@ date: "2017-12-06"
 author: "Josh Weaver"
 image: "gatsby-contentful-netlify-algolia.jpg"
 excerpt: "Gatsby has been getting a lot of recognition and adoption lately, and for good reason. It’s so flexible and it works well with nearly everything."
+tags: ["contentful", "netlify", "algolia", "getting-started", "hosting", "ci", "performance"]
 ---
 
 Gatsby has been getting a lot of recognition and

diff --git a/docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md b/docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md
@@ -4,6 +4,7 @@ date: "2017-12-06"
 author: "Arden de Raaij"
 image: "great-gatsby.jpg"
 excerpt: "A static site generator based on React, does that even make sense? GatsbyJS tries to answer this question with a hypermodern, feature-packed, *jamstacked* development tool that you can try out right now!"
+tags: ["performance", "pwa", "react", "graphql", "netlify"]
 ---
 
 A static site generator based on React, does that even make sense? [GatsbyJS](/) tries to answer this question with a hypermodern, feature-packed, _jamstacked_ development tool that you can try out right now! In this post I'll give you a quick introduction and an overview of my own thoughts on Gatsby.

diff --git a/docs/blog/2017-12-20-introducing-the-gatsby-ux-research-program/index.md b/docs/blog/2017-12-20-introducing-the-gatsby-ux-research-program/index.md
@@ -2,6 +2,7 @@
 title: Introducing the Gatsby UX Research Program
 date: "2017-12-20"
 author: "Shannon Soper"
+tags: ["ux"]
 ---
 
 ## How this all started

diff --git a/...-boston-gov-used-gatsby-to-be-selected-as-an-amazon-hq2-candidate-city/index.md b/...-boston-gov-used-gatsby-to-be-selected-as-an-amazon-hq2-candidate-city/index.md
@@ -2,6 +2,7 @@
 title: How Boston.gov used Gatsby to be selected as an Amazon HQ2 candidate city
 date: "2018-01-18"
 author: "Sam Bhagwat"
+tags: ["case-studies", "component-library", "iteration-speed"]
 ---
 
 [Boston.gov](http://boston.gov) is a small team with a huge responsibility: ten people tasked with the digital presence of New England’s most iconic city.

diff --git a/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md b/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md
@@ -2,6 +2,7 @@
 title: Getting Started with Gatsby and WordPress
 date: "2018-01-22"
 author: "Amberley Romo"
+tags: ["getting-started", "wordpress"]
 ---
 
 _This post was originally published on

diff --git a/docs/blog/2018-02-09-announcing-gatsby-manor-themes-for-gatsbyjs/index.md b/docs/blog/2018-02-09-announcing-gatsby-manor-themes-for-gatsbyjs/index.md
@@ -3,6 +3,7 @@ title: Announcing Gatsby Manor, themes for Gatsby 🎉🎊
 date: "2018-02-09"
 image: "gatsbymanor.jpg"
 author: "Steven Natera"
+tags: ["themes"]
 ---
 
 I am proud to announce [Gatsby Manor](https://www.gatsbymanor.com/), a gallery

diff --git a/docs/blog/2018-02-16-bright-future-for-the-web/index.md b/docs/blog/2018-02-16-bright-future-for-the-web/index.md
@@ -3,6 +3,7 @@ title: Gatsby And The JAMstack - A Bright Future For The Web
 date: "2018-02-16"
 image: "bright-future.jpg"
 author: "Ryan Wiemer"
+tags: ["markdown", "JAMstack", "netlify", "contentful"]
 ---
 
 _This article was originally published on

diff --git a/docs/blog/2018-02-28-documentation-project/index.md b/docs/blog/2018-02-28-documentation-project/index.md
@@ -2,6 +2,7 @@
 title: Introducing the Gatsby Documentation Project
 author: Shannon Soper
 date: 2018-02-28
+tags: ["ux", "documentation", "community"]
 ---
 
 People really like Gatsby docs and Gatsby. In fact, we’ve talked about tracking the number of curse words and endearingly pejorative terms that people use when tweeting about Gatsby. Here’s a sampling:

diff --git a/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md b/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md
@@ -2,6 +2,7 @@
 title: Why we created the Gatsby plugin library
 date: 2018-03-07
 author: Shannon Soper
+tags: ["plugins", "documentation"]
 ---
 
 Earlier this week, we launched a [Plugin Library](/packages/) on Gatsbyjs.org and are excited for you to use it! This article explains how UX research drove the design of this library and the accompanying [Plugin Authoring](/docs/plugin-authoring/) doc.

diff --git a/docs/blog/2018-1-18-strapi-and-gatsby/index.md b/docs/blog/2018-1-18-strapi-and-gatsby/index.md
@@ -2,6 +2,7 @@
 title: "Building a static blog using Gatsby and Strapi"
 date: "2018-01-18"
 author: "Pierre Burgy"
+tags: ["gatsby", "strapi"]
 ---
 
 ## Introduction

diff --git a/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md b/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md
@@ -2,6 +2,7 @@
 title: "Creative Software Destruction and the New Presentation Layer"
 date: "2018-01-24"
 author: "Robin Vasan"
+tags: ["architecture", "serverless", "cdn"]
 ---
 
 > “To improve is to change, so to be perfect is to have changed often.” — Winston Churchill

diff --git a/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md b/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md
@@ -2,6 +2,7 @@
 title: Building a Site with React and Contentful
 date: "2018-01-25"
 author: "Shannon Soper"
+tags: ["react", "contentful", "graphql"]
 ---
 
 A poster of _Starry Night_ by Vincent Van Gogh followed me to each new dorm room in college until it ripped beyond repair. I loved that poster.
@@ -146,18 +147,18 @@ export default ({ data }) => {
 export const query = graphql`
 query PhotoQuery {
 // starting here is where I copied and pasted the query I created in GraphiQL.
-    allContentfulPhotoGallery { 
-        edges { 
-            node { 
-                photos { 
-                    title 
-                    description 
-                    file { 
-                        url } 
-                        } 
-                    } 
-                } 
-            } 
+    allContentfulPhotoGallery {
+        edges {
+            node {
+                photos {
+                    title
+                    description
+                    file {
+                        url }
+                        }
+                    }
+                }
+            }
         }`;
 ```
 

diff --git a/docs/blog/2018-2-16-how-to-build-a-website-with-react/index.md b/docs/blog/2018-2-16-how-to-build-a-website-with-react/index.md
@@ -2,6 +2,7 @@
 title: How to Build a Website with React
 date: "2018-02-16"
 author: Shannon Soper
+tags: ["React", "architecture"]
 ---
 
 # What is React?

diff --git a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md
@@ -3,6 +3,7 @@ title: Why I Upgraded My Website to GatsbyJS from Jekyll
 date: "2018-02-27"
 author: "Jia Hao Goh"
 excerpt: My thought process during the long overdue rewrite of this website
+tags: ["jekyll", "plugins", "getting-started", "gatsby-apis"]
 ---
 
 _This article is the first of a two part series, on the engineering behind my [website](https://jiahao.codes). Originally published [here](https://jiahao.codes/blog/why-i-upgraded-my-website/)_

diff --git a/docs/blog/2018-2-3-sites-with-headless-cms/index.md b/docs/blog/2018-2-3-sites-with-headless-cms/index.md
@@ -2,6 +2,7 @@
 title: Building Sites with Headless CMSs
 date: "2018-02-03"
 author: "Shannon Soper"
+tags: ["headless-cms", "contentful", "graphcms", "cloudcms"]
 ---
 
 ## What is a traditional CMS?

diff --git a/docs/blog/2018-2-6-choosing-a-back-end/index.md b/docs/blog/2018-2-6-choosing-a-back-end/index.md
@@ -2,6 +2,7 @@
 title: Picking a back-end for GatsbyJS
 date: "2018-02-06"
 author: "Ross Whitehouse"
+tags: ["headless-cms", "wordpress", "contentful", "netlify-cms", "jamstack"]
 ---
 
 A little while ago I had the six-monthly itch to redo my portfolio site, and I decided I was going to learn to use Gatsby. But that seems to be only half the battle. After you’ve built your front-end, how do you decide on the back-end? There’s so many out there!

diff --git a/docs/blog/2018-2-7-jam-out-your-blog/index.md b/docs/blog/2018-2-7-jam-out-your-blog/index.md
@@ -2,6 +2,7 @@
 title: JAM Out Your Blog - Gatsby + Prose + Netlify
 date: "2018-02-07"
 author: "Vlad Pasculescu"
+tags: ["prose-io", "netlify", "ci", "jamstack"]
 ---
 
 If you’re reading this, chances are you’ve heard a thing or two about Gatsby. Let me take you through a _jamstacked_ workflow that is friendly to both developers, as well as content-creators.

diff --git a/docs/blog/2018-3-03-case-study-mike-johnston/index.md b/docs/blog/2018-3-03-case-study-mike-johnston/index.md
@@ -3,6 +3,7 @@ title: "Case Study: Mike Johnston for Colorado"
 date: 2018-03-03
 author: Brandon Konkle
 image: mike-johnston-homepage.png
+tags: ["wordpress", "netlify", "security", "case-studies"]
 ---
 
 ### How we used React, Headless WordPress, GraphQL & Gatsby to build Mike’s new online platform

diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -43,6 +43,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   return new Promise((resolve, reject) => {
     const docsTemplate = path.resolve(`src/templates/template-docs-markdown.js`)
     const blogPostTemplate = path.resolve(`src/templates/template-blog-post.js`)
+    const tagTemplate = path.resolve(`src/templates/tags.js`);
     const contributorPageTemplate = path.resolve(
       `src/templates/template-contributor-page.js`
     )
@@ -72,6 +73,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
                     draft
                     canonicalLink
                     publishedAt
+                    tags
                   }
                 }
               }
@@ -138,6 +140,20 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           })
         })
 
+        const tagLists = blogPosts
+          .filter(post => _.get(post, "node.frontmatter.tags"))
+          .map(post => _.get(post, "node.frontmatter.tags"))
+
+        _.uniq(_.flatten(tagLists)).forEach(tag => {
+          createPage({
+            path: `/blog/tags/${_.kebabCase(tag)}/`,
+            component: tagTemplate,
+            context: {
+              tag,
+            },
+          });
+        })
+
         // Create contributor pages.
         result.data.allAuthorYaml.edges.forEach(edge => {
           createPage({

diff --git a/www/src/components/tags-section.js b/www/src/components/tags-section.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import Link from "gatsby-link"
+import { rhythm, scale } from "../utils/typography"
+const _ = require(`lodash`)
+
+const TagsSection = ({ tags }) => {
+  if (!tags) return null
+  const tagLinks = tags.map((tag, i) => {
+    const divider =
+      i < tags.length - 1 &&
+      <span>
+        {` | `}
+      </span>
+    return (
+      <span key={tag}>
+        <Link to={`/blog/tags/${_.kebabCase(tag)}`}>
+          {tag}
+        </Link>
+        {divider}
+      </span>
+    )
+  })
+  return (
+    <em
+      style={{
+        ...scale(-1 / 5),
+        display: `block`,
+        marginBottom: rhythm(1),
+      }}
+    >
+      Tagged with {tagLinks}
+    </em>
+  )
+}
+
+export default TagsSection