diff --git a/docs/blog/field-types.md b/docs/blog/field-types.md
new file mode 100644
index 00000000000..20dd76d86aa
--- /dev/null
+++ b/docs/blog/field-types.md
@@ -0,0 +1,96 @@
+<!--[meta]
+section: blog
+title: Field types in Keystone
+date: 2020-08-03
+author: Mike Riethmuller
+[meta]-->
+
+# Field types
+
+Field types in Keystone sit at the intersection of the Database, GraphQL API and User Interface. When you select and configure a field type, you are specifying how data is stored, how types in GraphQL are defined, and how the interface looks in the Admin app.
+
+To give an example, the `Text` field creates a `TEXT` column in a Postgres database, and a `String` type in a MongoDb schema. It has a return type of `String` in the GraphQL API, and an input type (for mutations) also of `String`. The interface produces a styled `<input />` element or a `<textarea />` depending on if the `isMultiline` option is configured.
+
+For a complete technical breakdown on the anatomy of field types and how they are built, see the [custom field type guide](/docs/guides/custom-field-types.md).
+
+Because they sit at this intersection of concerns, it can be difficult to decide what customisations should become new field types. How many concerns need to differ before creating a new field vs adding config options or project specific customsation such as hooks?
+
+This post provides insight into how we think about field types. Broadly speaking, field types can be grouped into one of two categories. Core field types and Non-Core field types.
+
+## Core field types
+
+Core field types are those included in the `@keystonejs/fields` package and fall under ths `@keystonejs/fields-*` namespace.
+
+There's no definitive guide as to when a field should be a core field type, but generally speaking, the core fields consist of "primitive" values like:
+
+- `Text`,
+- `Number`,
+- `DateTime` etc,
+
+These usually map fairly well to primitive data types common to many programming languages and databases. However Keystone is a CMS and essential types for CMS applications extend beyond data types.
+
+For these reasons we also consider more complex fields such as: `Select`, and `Relationship` as core field types.
+
+## Non-core field types
+
+If a core field represents a primitive value or common type of structured data use in applications, non-core types could be considered flavours on top of these.
+
+A good example is the `Markdown` field. It stores values in the same way as the `Text` field. Technically speaking it's just an extension of the `Text` field that replaces the field view in the Admin UI.
+
+Given this, it's reasonable to ask why have a new field type at all? Why not have an option on the `Text` field, similar to `isMultiline`? Both examples change the UI without changing anything about how the data is stored in the database or handled in GraphQL.
+
+Although technically similar to the `Text` field, conceptually, `Markdown` represents a different content type. You would not arbitrarily display any text as `Markdown` in the same way you might with a multiline input.
+
+This completes the basic criteria of how we decide on new field types over config options or project specific customsation:
+
+1. Is data in the Database or GraphQL a different type?
+1. Is it conceptually a different field type for users?
+1. Is the UI incompatible with other values using the same type?
+
+It's also important to note that`Markdown` includes `codemirror` - a sizeable third-party library used to provide a nice editor interface. We don't want to bundle `codemirror` with the core fields package, especially when a `Markdown` field is not an essential to a large majority of Keystone projects.
+
+This forms the final part of the decision making to help determine when a field is a non-core field type. Non-core field types often:
+
+1. share a primitive type, data structure, or use-case with a core field
+1. are not required for many Keystone projects
+1. connect with a third-party service or API
+1. include a third-party library, that will impact the core fields bundle
+
+It may be open to some interpretation, but the above guidelines help when deciding which fields belong with `@keystonejs/fields` package, and which don't.
+
+## The future of field types
+
+After reviewing existing fields and applying the above decision making process retrospectively, it highlights a few places we got this wrong in the past.
+
+We've realised the following field types are non-core field types:
+
+- `CloudinaryImage`
+- `OEmbed`
+- `UnSplash`
+- `Location`
+
+These will be moved out of the core fields package.
+
+We've also realised that the `AuthedRelationship` is not conceptually different to the standard `Relationship` field. It doesn't store or handle data differently. It provides a shortcut for a common use-case of setting the value of the of a `Relationship` field to the currently authenticated user is a common use-case.
+
+This functionality can be achieved with hooks and config on the existing `Relationship` field. We plan to document how to achieve common use-cases such as this before changing the `AuthedRelationship` field.
+
+The `@keystonejs/fields-date-utc` package should be moved into the core fields package. It's a primitive data type used in a wide range of projects.
+
+Both `Color` and `Url` are interesting. They currently both store values in the same way as the `Text` field and do nothing more than change the view.
+
+The `Url` field only sets the HTML `type` attribute on the input element. You could add an option like is `isURL`, similar to the `isMultiline` and the same argument could be made for an option that allows setting the `type` attribute to "email".
+
+An option should be added to the `Text` field that allows setting the HTML `type` attribute to either `url`, `email` or `text` (default).
+
+However, much like `Markdown`, `URL` and `Email` are conceptually different fields for many users. It makes sense to expand the configuration options for `Text`, but there is also an argument for a unique field type that uses knowledge of the structure of URLs and emails to implement specific features. Examples might include server-side validation, domain based filtering, case-insensitive unique restrictions.
+
+We won't deprecate or move the `URL` field for now but will look to improve it's implementation over time.
+
+The `Location` and `Color` fields bundles a third-party libraries and are not a common requirement for many projects. Both should be moved out of the core packages.
+
+Expect to see fields move between the core and non-core packages over the next few weeks. In the longer term hope to improve functionality of existing field in some of the ways mentioned here. We also hope this provides clarity around the choices we have made with field types.
+
+If you want to continue the discussion head over to our [community Slack channel](https://community.keystonejs.com/) and ask us about field types. You can tweet at us [@KeystoneJS on Twitter](https://twitter.com/KeystoneJS).
+
+Finally if you have a custom field type, please share it with us! We might include it in the Keystone or one of our contributors, Gautam Singh, maintains the `@keystonejs-contrib` namespace for any other community contributions.
diff --git a/docs/guides/mutation-lifecycle.md b/docs/guides/mutation-lifecycle.md
index 0a650d0ed0d..73eacc217cb 100644
--- a/docs/guides/mutation-lifecycle.md
+++ b/docs/guides/mutation-lifecycle.md
@@ -58,10 +58,6 @@ Each of these mutations is implemented within Keystone by a corresponding resolv
 | `updateUsers`        | →   | `updateManyMutation`     |
 | `deleteUsers`        | →   | `deleteManyMutation`     |
 
-<!-- Dead links
-Please refer to the [API documentation](LINK_TODO)) for full details on how to call these mutations either from [GraphQL](LINK_TODO)) or directly from [Keystone](LINK_TODO)).
--->
-
 Keystone provides [access control](/docs/guides/access-control.md) mechanisms and a [hook system](/docs/guides/hooks.md) which allows the developer to customise the behaviour of each of these mutations.
 
 This document details the lifecycle of each mutation, and how the different access control mechanisms and hooks interact.
diff --git a/packages/create-keystone-app/example-projects/starter/initial-data.js b/packages/create-keystone-app/example-projects/starter/initial-data.js
index 6a3585d689f..f69617bf17b 100644
--- a/packages/create-keystone-app/example-projects/starter/initial-data.js
+++ b/packages/create-keystone-app/example-projects/starter/initial-data.js
@@ -5,7 +5,7 @@ module.exports = async keystone => {
   // Count existing users
   const {
     data: {
-      _allUsersMeta: { count },
+      _allUsersMeta: { count = 0 },
     },
   } = await keystone.executeGraphQL({
     context: keystone.createContext({ skipAccessControl: true }),
diff --git a/website/gatsby-node.js b/website/gatsby-node.js
index 793a999e740..138fe3200e2 100644
--- a/website/gatsby-node.js
+++ b/website/gatsby-node.js
@@ -5,6 +5,7 @@ const visit = require('unist-util-visit');
 const rawMDX = require('@mdx-js/mdx');
 const matter = require('gray-matter');
 const mdastToString = require('mdast-util-to-string');
+const createPaginatedPages = require('gatsby-paginate');
 
 const generateUrl = require('./generateUrl');
 
@@ -19,6 +20,7 @@ const PROJECT_ROOT = path.resolve('..');
 const GROUPS = [
   '',
   'quick-start',
+  'blog',
   'tutorials',
   'guides',
   'discussions',
@@ -37,15 +39,10 @@ const SUB_GROUPS = [
   'utilities',
 ];
 
-exports.createPages = ({ actions, graphql }) => {
-  const { createPage } = actions;
-
-  const template = path.resolve(`src/templates/docs.js`);
-
-  // The 'fields' values are injected during the `onCreateNode` call below
-  return graphql(`
+const createDocsPages = async ({ createPage, graphql }) =>
+  graphql(`
     {
-      allMdx {
+      allMdx(filter: { fields: { navGroup: { ne: "blog" } } }) {
         edges {
           node {
             id
@@ -71,10 +68,60 @@ exports.createPages = ({ actions, graphql }) => {
       return Promise.reject(result.errors);
     }
 
-    /*
-      If you end up with multiple ways to generate a markdown page, you will
-      need to split out to new templates, with their own graphql queries
-    */
+    const pages = result.data.allMdx.edges.filter(page => {
+      const {
+        node: {
+          fields: { draft },
+        },
+      } = page;
+
+      return Boolean(!draft);
+    });
+
+    pages.forEach(({ node: { id, fields } }) => {
+      createPage({
+        path: `${fields.slug}`,
+        component: path.resolve(`src/templates/docs.js`),
+        context: {
+          mdPageId: id,
+          ...fields,
+        }, // additional data can be passed via context
+      });
+    });
+  });
+
+const createBlogPages = async ({ createPage, graphql }) =>
+  graphql(`
+    {
+      allMdx(filter: { fields: { navGroup: { eq: "blog" } } }) {
+        edges {
+          node {
+            id
+            fields {
+              slug
+              pageTitle
+              description
+              draft
+              heading
+              author
+              date
+              navGroup
+              navSubGroup
+              workspaceSlug
+              sortOrder
+              sortSubOrder
+              order
+              isPackageIndex
+              isIndex
+            }
+          }
+        }
+      }
+    }
+  `).then(result => {
+    if (result.errors) {
+      return Promise.reject(result.errors);
+    }
 
     const pages = result.data.allMdx.edges.filter(page => {
       const {
@@ -86,10 +133,17 @@ exports.createPages = ({ actions, graphql }) => {
       return Boolean(!draft);
     });
 
+    createPaginatedPages({
+      edges: pages,
+      createPage: createPage,
+      pageTemplate: 'src/templates/blogList.js',
+      pathPrefix: 'blog', // This is optional and defaults to an empty string if not used
+    });
+
     pages.forEach(({ node: { id, fields } }) => {
       createPage({
         path: `${fields.slug}`,
-        component: template,
+        component: path.resolve(`src/templates/blogPost.js`),
         context: {
           mdPageId: id,
           ...fields,
@@ -97,6 +151,13 @@ exports.createPages = ({ actions, graphql }) => {
       });
     });
   });
+
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions;
+  return Promise.all([
+    createDocsPages({ createPage, graphql }),
+    createBlogPages({ createPage, graphql }),
+  ]);
 };
 
 const getEditUrl = absPath =>
@@ -114,7 +175,7 @@ exports.onCreateNode = async ({ node, actions, getNode }) => {
     const isPackage = !GROUPS.includes(sourceInstanceName);
     let { data, content } = matter(node.rawBody, { delimiters: ['<!--[meta]', '[meta]-->'] });
 
-    const navGroup = data.section;
+    const navGroup = data.section === 'api' ? 'API' : data.section;
     const navSubGroup = data.subSection;
     const order = data.order || 99999999999;
     let pageTitle = data.title || '';
@@ -156,6 +217,8 @@ exports.onCreateNode = async ({ node, actions, getNode }) => {
       isPackageIndex: isPackage && relativePath === 'README.md',
       isIndex: !isPackage && relativePath === 'index.md',
       pageTitle: pageTitle,
+      author: data.author,
+      date: new Date(data.date).toDateString(),
       draft: Boolean(data.draft),
       description,
       heading,
diff --git a/website/package.json b/website/package.json
index b0d677a25cf..fb939c5e1f3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -31,6 +31,7 @@
     "@sindresorhus/slugify": "^0.11.0",
     "facepaint": "^1.2.1",
     "gatsby": "^2.13.25",
+    "gatsby-paginate": "^1.1.1",
     "gatsby-plugin-google-analytics": "^2.1.4",
     "gatsby-plugin-manifest": "^2.2.41",
     "gatsby-plugin-mdx": "^1.0.64",
diff --git a/website/src/components/Header.js b/website/src/components/Header.js
index 3027ad85864..49fa2af6a01 100644
--- a/website/src/components/Header.js
+++ b/website/src/components/Header.js
@@ -12,7 +12,7 @@ import { media, mediaMax, mq } from '../utils/media';
 
 export const HEADER_HEIGHT = 60;
 
-export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
+export const Header = forwardRef(({ toggleMenu, showSearch = true, ...props }, ref) => (
   <header
     ref={ref}
     css={{
@@ -78,7 +78,7 @@ export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
               },
             }}
           >
-            <Search />
+            {showSearch && <Search />}
           </div>
           <div
             css={{
diff --git a/website/src/components/Sidebar.js b/website/src/components/Sidebar.js
index 7eb13a19e27..f48d96fc285 100644
--- a/website/src/components/Sidebar.js
+++ b/website/src/components/Sidebar.js
@@ -15,6 +15,33 @@ let scrollOffset = 0;
 
 export const SIDEBAR_WIDTH = 280;
 
+export const navStyles = ({ isVisible, mobileOnly }) => ({
+  boxSizing: 'border-box',
+  flexShrink: 0,
+  height: 'calc(100vh - 60px)',
+  overflowY: 'auto',
+  padding: `${gridSize * 4}px ${gridSize * 3}px`,
+  position: 'sticky',
+  top: 60,
+  WebkitOverflowScrolling: 'touch',
+  width: SIDEBAR_WIDTH,
+
+  [mediaMax.md]: {
+    background: 'white',
+    boxShadow: isVisible ? 'rgba(0, 0, 0, 0.25) 0px 0px 48px' : 'none',
+    height: '100vh',
+    opacity: isVisible ? 1 : 0,
+    position: 'fixed',
+    top: 0,
+    transform: isVisible ? 'translateX(0px)' : `translateX(-${SIDEBAR_WIDTH}px)`,
+    transition: 'all 150ms',
+    zIndex: 2,
+  },
+  [media.md]: {
+    display: mobileOnly ? 'none' : 'block',
+  },
+});
+
 export const Sidebar = ({ isVisible, toggleSidebar, mobileOnly }) => {
   const asideRef = useRef();
 
@@ -36,36 +63,7 @@ export const Sidebar = ({ isVisible, toggleSidebar, mobileOnly }) => {
   }, []);
 
   return (
-    <aside
-      key="sidebar"
-      ref={asideRef}
-      css={{
-        boxSizing: 'border-box',
-        flexShrink: 0,
-        height: 'calc(100vh - 60px)',
-        overflowY: 'auto',
-        padding: `${gridSize * 4}px ${gridSize * 3}px`,
-        position: 'sticky',
-        top: 60,
-        WebkitOverflowScrolling: 'touch',
-        width: SIDEBAR_WIDTH,
-
-        [mediaMax.md]: {
-          background: 'white',
-          boxShadow: isVisible ? 'rgba(0, 0, 0, 0.25) 0px 0px 48px' : 'none',
-          height: '100vh',
-          opacity: isVisible ? 1 : 0,
-          position: 'fixed',
-          top: 0,
-          transform: isVisible ? 'translateX(0px)' : `translateX(-${SIDEBAR_WIDTH}px)`,
-          transition: 'all 150ms',
-          zIndex: 2,
-        },
-        [media.md]: {
-          display: mobileOnly ? 'none' : 'block',
-        },
-      }}
-    >
+    <aside key="sidebar" ref={asideRef} css={navStyles({ isVisible, mobileOnly })}>
       <SocialIconsNav
         css={{
           marginBottom: '2.4em',
@@ -113,7 +111,7 @@ export const SidebarNav = () => {
   );
 };
 
-const NavGroup = ({ index, navGroup, pathname }) => {
+export const NavGroup = ({ index, navGroup, pathname }) => {
   const sectionId = `docs-menu-${navGroup.navTitle}`;
 
   const isPageInGroupActive = useMemo(() => {
@@ -257,7 +255,7 @@ export const Footer = () => (
       marginBottom: '2rem',
     }}
   >
-    Made with ❤️ by{' '}
+    Made with ❤️&nbsp; by{' '}
     <FooterAnchor href="https://www.thinkmill.com.au" target="_blank">
       Thinkmill
     </FooterAnchor>{' '}
diff --git a/website/src/components/SidebarBlog.js b/website/src/components/SidebarBlog.js
new file mode 100644
index 00000000000..4cff0b51279
--- /dev/null
+++ b/website/src/components/SidebarBlog.js
@@ -0,0 +1,71 @@
+/** @jsx jsx */
+import { useLayoutEffect, useRef } from 'react';
+import { jsx } from '@emotion/core';
+import { Location } from '@reach/router';
+
+import { SocialIconsNav } from '.';
+import { useNavDataBlog } from '../utils/nav-data-blog';
+import { mediaMax } from '../utils/media';
+import { useClickOutside } from '../utils/useClickOutside';
+import { Footer, navStyles, NavGroup } from './Sidebar';
+
+let scrollOffset = 0;
+
+export const SIDEBAR_WIDTH = 280;
+
+export const SidebarBlog = ({ isVisible, toggleSidebar, mobileOnly }) => {
+  const asideRef = useRef();
+
+  // handle click outside when sidebar is a drawer on small devices
+  useClickOutside({
+    handler: toggleSidebar,
+    refs: [asideRef],
+    listenWhen: isVisible,
+  });
+
+  // NOTE: maintain the user's scroll whilst navigating between pages.
+  // This is a symptom of Gatsby remounting the entire tree (template) on each
+  // page change via `createPage` in "gatsby-node.js".
+  useLayoutEffect(() => {
+    asideRef.current.scrollTop = scrollOffset; // reset on mount
+    return () => {
+      scrollOffset = asideRef.current.scrollTop; // catch on unmount (this is buggy of some reason)
+    };
+  }, []);
+
+  return (
+    <aside key="sidebar" ref={asideRef} css={navStyles({ isVisible, mobileOnly })}>
+      <SocialIconsNav
+        css={{
+          marginBottom: '2.4em',
+          display: 'none',
+          [mediaMax.sm]: {
+            display: 'block',
+          },
+        }}
+      />
+      <SidebarBlogNav />
+      <Footer />
+    </aside>
+  );
+};
+
+// Styled Components
+// ------------------------------
+
+// Navigation
+
+export const SidebarBlogNav = () => {
+  const navData = useNavDataBlog();
+  return (
+    <Location>
+      {({ location: { pathname } }) => (
+        <nav aria-label="Blog Menu">
+          {navData.map((navGroup, i) => {
+            return <NavGroup key={i} index={i} navGroup={navGroup} pathname={pathname} />;
+          })}
+        </nav>
+      )}
+    </Location>
+  );
+};
diff --git a/website/src/components/homepage/HomepageFooter.js b/website/src/components/homepage/HomepageFooter.js
index be10e0e00cb..4632c86f907 100644
--- a/website/src/components/homepage/HomepageFooter.js
+++ b/website/src/components/homepage/HomepageFooter.js
@@ -25,7 +25,7 @@ const HomepageFooter = () => (
       </GitHubButton>
       <div css={{ marginTop: '2rem' }}>
         <p css={{ color: colors.N40 }}>
-          Keystone 5 is built by{' '}
+          Keystone is built by{' '}
           <a
             css={{ color: colors.N80 }}
             href="https://www.thinkmill.com.au"
diff --git a/website/src/templates/blogList.js b/website/src/templates/blogList.js
new file mode 100644
index 00000000000..4edeb3caa96
--- /dev/null
+++ b/website/src/templates/blogList.js
@@ -0,0 +1,135 @@
+/** @jsx jsx */
+
+import { Fragment } from 'react';
+import { jsx, Global } from '@emotion/core';
+import { globalStyles } from '@arch-ui/theme';
+import { BlogLayout, Content } from './layout';
+import { HomepageFooter } from '../components/homepage/HomepageFooter';
+import { Container } from '../components';
+import { SidebarBlog } from '../components/SidebarBlog';
+
+const Blog = ({ pageContext }) => {
+  const { group, index, first, last, pageCount } = pageContext;
+  const previousUrl = index - 1 == 1 ? '/' : (index - 1).toString();
+  const nextUrl = (index + 1).toString();
+
+  return (
+    <Fragment>
+      <BlogLayout>
+        {({ sidebarIsVisible, toggleSidebar }) => (
+          <Fragment>
+            <Container hasGutters={false} css={{ display: 'flex' }}>
+              <SidebarBlog isVisible={sidebarIsVisible} toggleSidebar={toggleSidebar} />
+              <Content css={{ paddingRight: '2rem' }}>
+                <Global styles={globalStyles} />
+                <h1
+                  css={{
+                    fontSize: '4rem',
+                    padding: '0.5rem 1rem',
+                    '@media min-width: 800px': { padding: '2rem 4rem' },
+                  }}
+                >
+                  Keystone Blog
+                </h1>
+                {group.map(({ node }) => {
+                  const { fields } = node;
+                  return (
+                    <article
+                      key={node.id}
+                      css={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxShadow: '0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06)',
+                        marginBottom: '2rem',
+                      }}
+                    >
+                      <div
+                        css={{
+                          background: 'white',
+                          display: 'flex',
+                          padding: '1.25rem 2rem',
+                          '@media min-width: 800px': { padding: '2rem 4rem' },
+                          display: 'flex',
+                          flexDirection: 'column',
+                        }}
+                      >
+                        <a
+                          href={node.fields.slug}
+                          css={{
+                            fontSize: '2.75rem',
+                            fontWeight: 'bold',
+                            color: '#222',
+                            ':hover': {
+                              textDecoration: 'none',
+                            },
+                          }}
+                        >
+                          {fields.pageTitle}
+                        </a>
+                        <p css={{ margin: 0, marginTop: '0.75rem', padding: 0, fontSize: '.8rem' }}>
+                          By <strong>{fields.author || 'Keystone'}</strong>, Published on{' '}
+                          {fields.date}
+                        </p>
+
+                        <p css={{ lineHeight: '1.5' }}>
+                          <a
+                            href={node.fields.slug}
+                            css={{
+                              color: '#222',
+                              ':hover': { color: '#222', textDecoration: 'none' },
+                            }}
+                          >
+                            {fields.description}
+                          </a>
+                        </p>
+                        <a
+                          href={node.fields.slug}
+                          css={{
+                            textTransform: 'uppercase',
+                            display: 'flex',
+                            alignItems: 'center',
+                            fontSize: '.9rem',
+                            ':hover': {
+                              color: '#444',
+                            },
+                          }}
+                        >
+                          Continue Reading{' '}
+                          <svg
+                            css={{ width: 12, height: 12, margin: '0 5px' }}
+                            aria-hidden="true"
+                            focusable="false"
+                            role="img"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 448 512"
+                            data-fa-i2svg=""
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </article>
+                  );
+                })}
+                <p>
+                  Page {index} of {pageCount}
+                </p>
+                {!first && (
+                  <a href={`/blog/${previousUrl === '/' ? '' : previousUrl}`}>Newer posts</a>
+                )}
+                {!first && ' / '}
+                {!last && <a href={`/blog/${nextUrl}`}>Older posts</a>}
+                <HomepageFooter />
+              </Content>
+            </Container>
+          </Fragment>
+        )}
+      </BlogLayout>
+    </Fragment>
+  );
+};
+
+export default Blog;
diff --git a/website/src/templates/blogPost.js b/website/src/templates/blogPost.js
new file mode 100644
index 00000000000..27c5fc3e7e2
--- /dev/null
+++ b/website/src/templates/blogPost.js
@@ -0,0 +1,382 @@
+/** @jsx jsx */
+
+import { Fragment, useMemo, useState, useEffect } from 'react';
+import { Helmet } from 'react-helmet';
+import { Link, graphql } from 'gatsby';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+import Slugger from 'github-slugger';
+import { MDXProvider } from '@mdx-js/react';
+import { jsx } from '@emotion/core';
+import { SkipNavContent } from '@reach/skip-nav';
+import { borderRadius, colors, gridSize } from '@arch-ui/theme';
+
+import { BlogLayout, Content } from './layout';
+import mdComponents from '../components/markdown';
+import { SiteMeta } from '../components/SiteMeta';
+import { Container } from '../components';
+import { SidebarBlog } from '../components/SidebarBlog';
+import { media, mq } from '../utils/media';
+import { useNavDataBlog } from '../utils/nav-data-blog';
+import { titleCase } from '../utils/case';
+
+// TODO: headings, with ids, should come from graphQL
+const slugger = new Slugger();
+
+export default function Template({
+  data: { mdx, site }, // this prop will be injected by the GraphQL query below.
+  pageContext: { slug },
+}) {
+  let [contentRef, setContentRef] = useState(null);
+  let navData = useNavDataBlog();
+  let flatNavData = navData.reduce((prev, next) => {
+    const subNavData = next.subNavs.reduce((prev, next) => [...prev].concat(next.pages), []);
+    return [...prev, ...next.pages, ...subNavData];
+  }, []);
+  let currentPageIndex = flatNavData.findIndex(node => node.path === slug);
+  let prev, next;
+  if (currentPageIndex !== 0) {
+    prev = flatNavData[currentPageIndex - 1];
+  }
+  if (currentPageIndex !== flatNavData.length - 1) {
+    next = flatNavData[currentPageIndex + 1];
+  }
+
+  const { body, fields, headings } = mdx;
+
+  const { siteMetadata } = site;
+  const suffix = fields.navGroup
+    ? fields.navGroup === 'API'
+      ? 'API'
+      : ` (${titleCase(fields.navGroup)})`
+    : '';
+  const title = `${
+    fields.pageTitle.charAt(0) === '@' ? fields.heading : fields.pageTitle
+  }${suffix}`;
+
+  let sluggedHeadings = useMemo(() => {
+    slugger.reset();
+    return headings
+      .filter(h => h.depth > 1 && h.depth < 4)
+      .map(h => ({ ...h, id: slugger.slug(h.value) }));
+  }, [headings]);
+
+  return (
+    <Fragment>
+      <SiteMeta pathname={fields.slug} />
+      <Helmet>
+        <title>{title}</title>
+        <meta name="description" content={fields.description} />
+        <meta property="og:description" content={fields.description} />
+        <meta property="og:url" content={`${siteMetadata.siteUrl}${fields.slug}`} />
+        <meta property="og:title" content={title} />
+        <meta property="og:type" content="article" />
+        <meta name="twitter:description" content={fields.description} />
+      </Helmet>
+      <BlogLayout>
+        {({ sidebarIsVisible, toggleSidebar }) => (
+          <Container hasGutters={false} css={{ display: 'flex' }}>
+            <SidebarBlog isVisible={sidebarIsVisible} toggleSidebar={toggleSidebar} />
+            <Content css={{ alignItems: 'flex-start', display: 'flex', flex: 1 }}>
+              <div
+                ref={setContentRef}
+                className="docSearch-content"
+                css={{
+                  flex: 1,
+                  minWidth: 0,
+                  paddingTop: gridSize * 4,
+                  paddingBottom: gridSize * 4,
+                }}
+              >
+                <SkipNavContent />
+                <MDXProvider components={mdComponents}>
+                  <MDXRenderer>{body}</MDXRenderer>
+                </MDXProvider>
+                <Pagination aria-label="Pagination">
+                  {prev ? (
+                    <PaginationButton to={prev.path}>
+                      <small>&larr; Prev</small>
+                      <span>{prev.context.pageTitle}</span>
+                    </PaginationButton>
+                  ) : (
+                    <PaginationPlaceholder />
+                  )}
+                  {next ? (
+                    <PaginationButton align="right" to={next.path}>
+                      <small>Next &rarr;</small>
+                      <span>{next.context.pageTitle}</span>
+                    </PaginationButton>
+                  ) : (
+                    <PaginationPlaceholder />
+                  )}
+                </Pagination>
+              </div>
+              <TableOfContents
+                container={contentRef}
+                headings={sluggedHeadings}
+                editUrl={fields.editUrl}
+              />
+            </Content>
+          </Container>
+        )}
+      </BlogLayout>
+    </Fragment>
+  );
+}
+
+// ==============================
+// Styled Components
+// ==============================
+
+// it's important that IDs are sorted by the order they appear in the document
+// so we can pluck active from the beginning
+function sortVisible(allIds, targetId) {
+  return ids => [...ids, targetId].sort((a, b) => (allIds.indexOf(a) > allIds.indexOf(b) ? 1 : -1));
+}
+const observerOptions = {
+  rootMargin: '0px',
+  threshold: 1.0,
+};
+
+const TableOfContents = ({ container, headings, editUrl }) => {
+  let allIds = headings.map(h => h.id);
+  let [visibleIds, setVisibleIds] = useState([]);
+  let [lastVisibleId, setLastVisbleId] = useState('');
+
+  // observe relevant headings
+  useEffect(() => {
+    if (container) {
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          const targetId = entry.target.getAttribute('id');
+          if (entry.isIntersecting && entry.intersectionRatio === 1) {
+            setVisibleIds(sortVisible(allIds, targetId));
+            setLastVisbleId(targetId);
+          } else {
+            setVisibleIds(ids => ids.filter(id => id !== targetId));
+          }
+        });
+      }, observerOptions);
+
+      container.querySelectorAll('h2, h3').forEach(node => {
+        observer.observe(node);
+      });
+    }
+  }, [container]);
+
+  // catch if we're in a long gap between headings and resolve to the last available.
+  let activeId = visibleIds[0] || lastVisibleId;
+
+  return (
+    <div
+      css={{
+        boxSizing: 'border-box',
+        display: 'none',
+        flexShrink: 0,
+        height: 'calc(100vh - 60px)',
+        overflowY: 'auto',
+        paddingLeft: gridSize * 6,
+        paddingRight: gridSize * 3,
+        paddingTop: 32,
+        position: 'sticky',
+        top: 60,
+        WebkitOverflowScrolling: 'touch',
+        width: 280,
+
+        [media.sm]: { display: 'block' },
+      }}
+    >
+      <h4
+        css={{
+          color: colors.N40,
+          fontSize: '0.8rem',
+          fontWeight: 700,
+          marginTop: 0,
+          textTransform: 'uppercase',
+        }}
+      >
+        On this page
+      </h4>
+      <ul css={{ listStyle: 'none', margin: 0, padding: 0 }}>
+        {headings.map((h, i) => {
+          let isActive = activeId === h.id;
+          return (
+            <li
+              key={h.value + i}
+              css={{
+                // increase specificity to element - avoid `!important` declaration
+                // override CSS targeting LI elements from `<Content/>`
+                'li&': { lineHeight: 1.4 },
+              }}
+            >
+              <a
+                css={{
+                  color: isActive ? colors.B.base : h.depth === 2 ? colors.N80 : colors.N60,
+                  display: 'block',
+                  fontSize: h.depth === 3 ? '0.8rem' : '0.9rem',
+                  fontWeight: isActive ? '500' : 'normal',
+                  paddingLeft: h.depth === 3 ? '0.5rem' : null,
+
+                  // prefer padding an anchor, rather than margin on list-item, to increase hit area
+                  paddingBottom: '0.4em',
+                  paddingTop: '0.4em',
+
+                  ':hover': {
+                    color: colors.B.base,
+                  },
+                }}
+                href={`#${h.id}`}
+              >
+                {h.value}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+      <EditSection>
+        <EditButton href={editUrl} target="_blank">
+          <svg
+            fill="currentColor"
+            height="1.25em"
+            width="1.25em"
+            viewBox="0 0 40 40"
+            css={{ marginLeft: -(gridSize / 2), marginRight: '0.5em' }}
+          >
+            <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
+          </svg>
+          Edit on GitHub
+        </EditButton>
+      </EditSection>
+    </div>
+  );
+};
+
+const Button = ({ as: Tag, ...props }) => (
+  <Tag
+    css={{
+      border: `1px solid rgba(0, 0, 0, 0.1)`,
+      borderBottomColor: `rgba(0, 0, 0, 0.2) !important`,
+      borderRadius: borderRadius,
+      color: colors.text,
+      display: 'inline-block',
+      fontWeight: 500,
+      padding: `${gridSize * 0.75}px ${gridSize * 2}px`,
+      outline: 'none',
+
+      ':hover, :focus': {
+        backgroundColor: 'white !important',
+        borderColor: `rgba(0, 0, 0, 0.15)`,
+        boxShadow: '0 2px 1px rgba(0,0,0,0.05)',
+        textDecoration: 'none',
+      },
+      ':active': {
+        backgroundColor: `${colors.N05} !important`,
+        boxShadow: 'none',
+      },
+    }}
+    {...props}
+  />
+);
+
+// Edit
+// ------------------------------
+
+const EditSection = props => (
+  <section
+    css={{
+      borderTop: `1px solid ${colors.N10}`,
+      marginTop: gridSize * 4,
+      paddingBottom: gridSize * 4,
+      paddingTop: gridSize * 4,
+    }}
+    {...props}
+  />
+);
+const EditButton = props => (
+  <Button
+    as="a"
+    css={{
+      alignItems: 'center',
+      display: 'inline-flex',
+      fontSize: '0.85rem',
+    }}
+    {...props}
+  />
+);
+
+// Previous / Next Navigation
+// ------------------------------
+const gutter = gridSize / 2;
+
+const Pagination = props => (
+  <nav
+    css={{
+      display: 'flex',
+      marginLeft: -gutter,
+      marginRight: -gutter,
+      marginTop: '3rem',
+    }}
+    {...props}
+  />
+);
+const PaginationPlaceholder = props => <div css={{ flex: 1 }} {...props} />;
+const PaginationButton = ({ align = 'left', ...props }) => (
+  <Button
+    as={Link}
+    css={mq({
+      flex: 1,
+      lineHeight: 1.4,
+      marginLeft: gutter,
+      marginRight: gutter,
+      maxWidth: `calc(50% - ${gutter}px)`,
+      textAlign: align,
+
+      small: {
+        color: colors.N60,
+        display: 'block',
+        fontSize: '0.85rem',
+        marginTop: gutter,
+      },
+      span: {
+        display: 'block',
+        fontSize: ['0.95rem', null, '1.25rem'],
+        letterSpacing: '-0.025em',
+        marginBottom: gutter,
+        minWidth: 0, // fix flex bug with overflow
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+    })}
+    {...props}
+  />
+);
+
+// ==============================
+// Query
+// ==============================
+
+// To my chagrin and fury, context is spread on to the available query options.
+export const pageQuery = graphql`
+  query($mdPageId: String!) {
+    mdx(id: { eq: $mdPageId }) {
+      body
+      headings {
+        depth
+        value
+      }
+      fields {
+        heading
+        description
+        editUrl
+        pageTitle
+        navGroup
+        slug
+      }
+    }
+    site {
+      siteMetadata {
+        siteUrl
+      }
+    }
+  }
+`;
diff --git a/website/src/templates/docs.js b/website/src/templates/docs.js
index 35b011878a4..9399e928941 100644
--- a/website/src/templates/docs.js
+++ b/website/src/templates/docs.js
@@ -44,7 +44,11 @@ export default function Template({
   const { body, fields, headings } = mdx;
 
   const { siteMetadata } = site;
-  const suffix = fields.navGroup ? ` (${titleCase(fields.navGroup)})` : '';
+  const suffix = fields.navGroup
+    ? fields.navGroup === 'API'
+      ? 'API'
+      : ` (${titleCase(fields.navGroup)})`
+    : '';
   const title = `${
     fields.pageTitle.charAt(0) === '@' ? fields.heading : fields.pageTitle
   }${suffix}`;
diff --git a/website/src/templates/layout.js b/website/src/templates/layout.js
index 87e287c726a..25a0556d87f 100644
--- a/website/src/templates/layout.js
+++ b/website/src/templates/layout.js
@@ -8,84 +8,98 @@ import { SkipNavLink } from '@reach/skip-nav';
 import { Header, SiteMeta } from '../components';
 import { media, mediaMax } from '../utils/media';
 
+const globalStyles = {
+  body: {
+    backgroundColor: colors.page,
+    color: colors.N80,
+    fontFamily:
+      '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+    letterSpacing: '-0.005em',
+    margin: 0,
+    textDecorationSkip: 'ink',
+    textRendering: 'optimizeLegibility',
+    msOverflowStyle: '-ms-autohiding-scrollbar',
+    MozFontFeatureSettings: "'liga' on",
+    MozOsxFontSmoothing: 'grayscale',
+    WebkitFontSmoothing: 'antialiased',
+  },
+  a: {
+    textDecoration: 'none',
+  },
+
+  // Accessibility
+  // ------------------------------
+
+  '.js-focus-visible :focus:not(.focus-visible)': {
+    outline: 'none',
+  },
+  '.js-focus-visible .focus-visible': {
+    outline: `2px dashed ${colors.B.A60}`,
+    outlineOffset: 2,
+  },
+
+  '[data-reach-skip-link]': {
+    borderColor: 'initial',
+    borderImage: 'initial',
+    borderStyle: 'initial',
+    borderWidth: '0px',
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    color: colors.primary,
+    fontSize: '0.875rem',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
+    position: 'absolute',
+    width: '1px',
+    zIndex: '100',
+  },
+  '[data-reach-skip-link]:focus': {
+    background: 'rgb(255, 255, 255)',
+    clip: 'auto',
+    height: 'auto',
+    left: '1.5rem',
+    padding: '1rem',
+    position: 'fixed',
+    textDecoration: 'none',
+    top: '1.5rem',
+    width: 'auto',
+  },
+
+  // Device Tweaks
+  // ------------------------------
+
+  [mediaMax.sm]: {
+    body: { fontSize: 'inherit' },
+    html: { fontSize: 14 },
+  },
+  [media.sm]: {
+    body: { fontSize: 'inherit' },
+    html: { fontSize: 16 },
+  },
+};
+
+export const BlogLayout = ({ children }) => {
+  const [sidebarIsVisible, setSidebarVisible] = useState(true);
+  const toggleSidebar = () => setSidebarVisible(bool => !bool);
+
+  return (
+    <Fragment>
+      <Global styles={globalStyles} />
+      <SkipNavLink />
+      <SiteMeta pathname="/" />
+      <Header key="global-header" toggleMenu={toggleSidebar} showSearch={false} />
+      {children({ sidebarIsVisible, toggleSidebar })}
+    </Fragment>
+  );
+};
 export const Layout = ({ children }) => {
   const [sidebarIsVisible, setSidebarVisible] = useState(false);
   const toggleSidebar = () => setSidebarVisible(bool => !bool);
 
   return (
     <Fragment>
-      <Global
-        styles={{
-          body: {
-            backgroundColor: colors.page,
-            color: colors.N80,
-            fontFamily:
-              '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-            letterSpacing: '-0.005em',
-            margin: 0,
-            textDecorationSkip: 'ink',
-            textRendering: 'optimizeLegibility',
-            msOverflowStyle: '-ms-autohiding-scrollbar',
-            MozFontFeatureSettings: "'liga' on",
-            MozOsxFontSmoothing: 'grayscale',
-            WebkitFontSmoothing: 'antialiased',
-          },
-          a: {
-            textDecoration: 'none',
-          },
-
-          // Accessibility
-          // ------------------------------
-
-          '.js-focus-visible :focus:not(.focus-visible)': {
-            outline: 'none',
-          },
-          '.js-focus-visible .focus-visible': {
-            outline: `2px dashed ${colors.B.A60}`,
-            outlineOffset: 2,
-          },
-
-          '[data-reach-skip-link]': {
-            borderColor: 'initial',
-            borderImage: 'initial',
-            borderStyle: 'initial',
-            borderWidth: '0px',
-            clip: 'rect(0px, 0px, 0px, 0px)',
-            color: colors.primary,
-            fontSize: '0.875rem',
-            height: '1px',
-            margin: '-1px',
-            overflow: 'hidden',
-            padding: '0px',
-            position: 'absolute',
-            width: '1px',
-            zIndex: '100',
-          },
-          '[data-reach-skip-link]:focus': {
-            background: 'rgb(255, 255, 255)',
-            clip: 'auto',
-            height: 'auto',
-            left: '1.5rem',
-            padding: '1rem',
-            position: 'fixed',
-            textDecoration: 'none',
-            top: '1.5rem',
-            width: 'auto',
-          },
-
-          // Device Tweaks
-          // ------------------------------
-
-          [mediaMax.sm]: {
-            body: { fontSize: 'inherit' },
-            html: { fontSize: 14 },
-          },
-          [media.sm]: {
-            body: { fontSize: 'inherit' },
-            html: { fontSize: 16 },
-          },
-        }}
-      />
+      <Global styles={globalStyles} />
       <SkipNavLink />
       <SiteMeta pathname="/" />
       <Header key="global-header" toggleMenu={toggleSidebar} />
diff --git a/website/src/utils/hooks.js b/website/src/utils/hooks.js
index 72f2a075bfc..e802a22fb27 100644
--- a/website/src/utils/hooks.js
+++ b/website/src/utils/hooks.js
@@ -12,37 +12,35 @@ export function useDimensions() {
   return [ref, dimensions];
 }
 
-export function useNavData() {
-  // We filter out the index.md pages from the nav list
-  let data = useStaticQuery(graphql`
-    query HeadingQuery {
-      allSitePage(
-        filter: { path: { ne: "/dev-404-page/" }, context: { isIndex: { ne: true } } }
-        sort: {
-          fields: [
-            context___sortOrder
-            context___sortSubOrder
-            context___order
-            context___pageTitle
-          ]
-        }
-      ) {
-        edges {
-          node {
-            path
-            context {
-              navGroup
-              navSubGroup
-              order
-              isPackageIndex
-              pageTitle
-            }
+export const navQuery = graphql`
+  query NavQuery {
+    allSitePage(
+      filter: { path: { ne: "/dev-404-page/" }, context: { isIndex: { ne: true } } }
+      sort: {
+        fields: [context___sortOrder, context___sortSubOrder, context___order, context___pageTitle]
+      }
+    ) {
+      edges {
+        node {
+          path
+          context {
+            navGroup
+            navSubGroup
+            order
+            isPackageIndex
+            pageTitle
           }
         }
       }
     }
-  `);
+  }
+`;
 
+export function useNavData() {
+  // We filter out the index.md pages from the nav list
+  let data = useStaticQuery(navQuery);
+  let blogPosts = 0;
+  const POST_LIMIT = 3;
   const navData = data.allSitePage.edges.reduce(
     (
       pageList,
@@ -66,7 +64,12 @@ export function useNavData() {
 
         if (navSubGroup === null) {
           const page = pageList.find(obj => obj.navTitle === navGroup);
-          addPage(page);
+          if (navGroup !== 'blog') {
+            addPage(page);
+          } else if (blogPosts < POST_LIMIT) {
+            blogPosts++;
+            addPage(page);
+          }
         } else {
           const page = pageList.find(obj => obj.navTitle === navGroup);
           if (Boolean(!page.subNavs.find(obj => obj.navTitle === navSubGroup))) {
@@ -80,5 +83,22 @@ export function useNavData() {
     },
     []
   );
+
+  // Add more posts link
+  if (Boolean(navData.find(obj => obj.navTitle === 'blog'))) {
+    navData
+      .find(obj => obj.navTitle === 'blog')
+      .pages.push({
+        context: {
+          navGroup: 'blog',
+          navSubGroup: null,
+          order: 99999999999,
+          isPackageIndex: false,
+          pageTitle: 'More posts...',
+        },
+        path: '/blog/',
+      });
+  }
+
   return navData;
 }
diff --git a/website/src/utils/nav-data-blog.js b/website/src/utils/nav-data-blog.js
new file mode 100644
index 00000000000..0b88013a68d
--- /dev/null
+++ b/website/src/utils/nav-data-blog.js
@@ -0,0 +1,88 @@
+import { graphql, useStaticQuery } from 'gatsby';
+
+// Not in hooks.js - because of how queries currently work in Gatsby, we support only a single instance of useStaticQuery in a file
+// See: https://www.gatsbyjs.org/docs/use-static-query/
+
+// This also has to be duplicated because: https://github.com/gatsbyjs/gatsby/issues/13764
+// Yay Gatsby \o/
+export const navQuery = graphql`
+  query BlogNavQuery {
+    allSitePage(
+      filter: { path: { ne: "/dev-404-page/" }, context: { isIndex: { ne: true } } }
+      sort: {
+        fields: [context___sortOrder, context___sortSubOrder, context___order, context___pageTitle]
+      }
+    ) {
+      edges {
+        node {
+          path
+          context {
+            navGroup
+            navSubGroup
+            order
+            isPackageIndex
+            pageTitle
+          }
+        }
+      }
+    }
+  }
+`;
+
+export function useNavDataBlog() {
+  // We filter out the index.md pages from the nav list
+  let data = useStaticQuery(navQuery);
+  let blogPosts = 0;
+  const POST_LIMIT = 50;
+  const navData = data.allSitePage.edges.reduce(
+    (
+      pageList,
+      {
+        node,
+        node: {
+          context: { navGroup, navSubGroup },
+        },
+      }
+    ) => {
+      if (navGroup !== null) {
+        // finding out what directory the file is in (eg '/keystone-alpha')
+
+        const addPage = page => {
+          page.pages.push(node);
+        };
+
+        if (navGroup === 'blog' && Boolean(!pageList.find(obj => obj.navTitle === navGroup))) {
+          pageList.push({ navTitle: navGroup, pages: [], subNavs: [] });
+        }
+
+        if (navSubGroup === null) {
+          const page = pageList.find(obj => obj.navTitle === navGroup);
+          if (navGroup === 'blog' && blogPosts < POST_LIMIT) {
+            blogPosts++;
+            addPage(page);
+          }
+        }
+      }
+      return pageList;
+    },
+    []
+  );
+
+  // Add more posts link
+  if (Boolean(navData.find(obj => obj.navTitle === 'blog'))) {
+    navData
+      .find(obj => obj.navTitle === 'blog')
+      .pages.push({
+        context: {
+          navGroup: 'blog',
+          navSubGroup: null,
+          order: 99999999999,
+          isPackageIndex: false,
+          pageTitle: 'More posts...',
+        },
+        path: '/blog/',
+      });
+  }
+
+  return navData;
+}
diff --git a/yarn.lock b/yarn.lock
index 5fdd69ef758..51b750d7999 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12477,6 +12477,13 @@ gatsby-page-utils@^0.0.5:
     micromatch "^3.1.10"
     slash "^1.0.0"
 
+gatsby-paginate@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/gatsby-paginate/-/gatsby-paginate-1.1.1.tgz#56f59910082eacb809297c89b02d31a0e3bd2f0c"
+  integrity sha512-TZSM5olaXDsdQCwHJ1a+MVRAegUH6esjGGIASPYN/CNTkaSvYr91BtHhrgxPU4yl7pmKIRVUG+rC0Pb+vUG+zQ==
+  dependencies:
+    path "^0.12.7"
+
 gatsby-plugin-google-analytics@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-2.1.4.tgz#f0b64900e125cef03e930332c45063ece8263206"
@@ -20066,6 +20073,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 pause-stream@0.0.11:
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
@@ -21312,7 +21327,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@0.11.10, process@^0.11.10:
+process@0.11.10, process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -26528,6 +26543,13 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"