diff --git a/gatsby-node.js b/gatsby-node.js
index 336855526..570b87f07 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -225,7 +225,6 @@ exports.createPages = ({ graphql, actions }) => {
           tags: node.tags.all,
           id: node.slug.slice(1)
         }));
-      const tagRegex = `/^\\s*${tag}/`;
       createPage({
         path: tagPath,
         component: tagPage,
@@ -236,12 +235,22 @@ exports.createPages = ({ graphql, actions }) => {
       });
     });
 
+    const beginnerSnippets = snippets
+      .filter(({ node }) => node.tags.all.includes('beginner'))
+      .filter(snippet => !snippet.node.archived)
+      .map(({ node }) => ({
+        title: node.title,
+        html: node.html.text,
+        tags: node.tags.all,
+        id: node.slug.slice(1)
+      }));
+
     createPage({
       path: `/beginner`,
       component: tagPage,
       context: {
         tag: `beginner snippets`,
-        tagRegex: `/beginner/`,
+        snippets: beginnerSnippets
       },
     });
 
diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js
index fbeff5b2d..a13bd4aae 100644
--- a/src/docs/pages/index.js
+++ b/src/docs/pages/index.js
@@ -13,14 +13,7 @@ import SimpleCard from '../components/SimpleCard';
 // Home page (splash and search)
 // ===================================================
 const IndexPage = props => {
-  const snippets = props.data.snippetDataJson.data.map(snippet => ({
-    title: snippet.title,
-    html: props.data.allMarkdownRemark.edges.find(
-      v => v.node.frontmatter.title === snippet.title,
-    ).node.html,
-    tags: snippet.attributes.tags,
-    id: snippet.id
-  }));
+  const snippets = props.data.allSnippet.edges;
 
   const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
   const [searchResults, setSearchResults] = React.useState(snippets);
@@ -31,9 +24,9 @@ const IndexPage = props => {
     let results = snippets;
     if (q.trim().length)
       results = snippets.filter(
-        v =>
-          v.tags.filter(t => t.indexOf(q) !== -1).length ||
-          v.title.toLowerCase().indexOf(q) !== -1,
+        ({node}) =>
+          node.tags.all.filter(t => t.indexOf(q) !== -1).length ||
+          node.title.toLowerCase().indexOf(q) !== -1,
       );
     setSearchResults(results);
   }, [searchQuery]);
@@ -80,11 +73,16 @@ const IndexPage = props => {
               Click on a snippet card to view the snippet.
             </p>
             <h2 className='page-sub-title'>Search results</h2>
-            {searchResults.map(snippet => (
+            {searchResults.map(({node}) => (
               <SnippetCard
                 short
-                key={`snippet_${snippet.id}`}
-                snippetData={snippet}
+                key={`snippet_${node.id}`}
+                snippetData={{
+                  title: node.title,
+                  html: node.html.text,
+                  tags: node.tags.all,
+                  id: node.id
+                }}
                 isDarkMode={props.isDarkMode}
               />
             ))}
@@ -139,22 +137,17 @@ export const indexPageQuery = graphql`
         }
       }
     }
-    snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
-      data {
-        id
-        title
-        attributes {
-          tags
-        }
-      }
-    }
-    allMarkdownRemark {
+    allSnippet {
       edges {
         node {
-          html
-          frontmatter {
-            title
+          title
+          html {
+            text
           }
+          tags {
+            all
+          }
+          id
         }
       }
     }
diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js
index 18e0dfd43..fb7b462aa 100644
--- a/src/docs/pages/list.js
+++ b/src/docs/pages/list.js
@@ -15,28 +15,15 @@ import SimpleCard from '../components/SimpleCard';
 // Snippet list page
 // ===================================================
 const ListPage = props => {
-  const snippets = props.data.snippetDataJson.data.map(snippet => ({
-    title: snippet.title,
-    html: props.data.allMarkdownRemark.edges.find(
-      v => v.node.frontmatter.title === snippet.title,
-    ).node.html,
-    tags: snippet.attributes.tags,
-    id: snippet.id,
-  }));
-  const archivedSnippets = props.data.snippetsArchiveDataJson.data.map(snippet => ({
-    title: snippet.title,
-    html: props.data.allMarkdownRemark.edges.find(
-      v => v.node.frontmatter.title === snippet.title,
-    ).node.html,
-    tags: snippet.attributes.tags,
-    id: snippet.id,
-  }));
-  const tags = snippets.reduce((acc, snippet) => {
-    if (!snippet.tags) return acc;
-    const primaryTag = snippet.tags[0];
-    if (!acc.includes(primaryTag)) acc.push(primaryTag);
-    return acc;
-  }, []);
+  const snippets = props.data.allSnippet.edges;
+  const archivedSnippets = props.data.allArchivedSnippet.edges;
+
+  const tags = [...new Set(
+    snippets.map(snippet => (snippet.node.tags || { primary: null }).primary)
+  )]
+    .filter(Boolean)
+    .sort((a, b) => a.localeCompare(b));
+  
   const staticPages = [
     {
       url: 'beginner',
@@ -79,12 +66,17 @@ const ListPage = props => {
               </Link>
             </h3>
             {snippets
-              .filter(snippet => snippet.tags[0] === tag)
-              .map(snippet => (
+              .filter(({node}) => node.tags.primary === tag)
+              .map(({node}) => (
                 <SnippetCard
-                  key={`snippet_${snippet.id}`}
+                  key={`snippet_${node.id}`}
                   short
-                  snippetData={snippet}
+                  snippetData={{
+                    title: node.title,
+                    html: node.html.text,
+                    tags: node.tags.all,
+                    id: node.id
+                  }}
                 />
               ))}
           </>
@@ -95,12 +87,17 @@ const ListPage = props => {
           Archived snippets
         </Link></h3>
         {archivedSnippets
-          .map(snippet => (
+          .map(({node}) => (
             <SnippetCard
-              key={`a_snippet_${snippet.id}`}
+              key={`a_snippet_${node.id}`}
               short
               archived
-              snippetData={snippet}
+              snippetData={{
+                title: node.title,
+                html: node.html.text,
+                tags: node.tags.all,
+                id: node.id
+              }}
             />
           ))}
         <br/>
@@ -131,31 +128,32 @@ export default connect(
 
 export const listPageQuery = graphql`
   query snippetListing {
-    snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
-      data {
-        id
-        title
-        attributes {
-          tags
-        }
-      }
-    }
-    snippetsArchiveDataJson : snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets_archive"} }) {
-      data {
-        id
-        title
-        attributes {
-          tags
-        }
-      }
-    }
-    allMarkdownRemark {
+    allSnippet(filter: {archived: {eq: false}}) {
       edges {
         node {
-          html
-          frontmatter {
-            title
+          title
+          html {
+            text
           }
+          tags {
+            all
+            primary
+          }
+          id
+        }
+      }
+    }
+    allArchivedSnippet: allSnippet(filter: {archived: {eq: true}}) {
+      edges {
+        node {
+          title
+          html {
+            text
+          }
+          tags {
+            all
+          }
+          id
         }
       }
     }
diff --git a/src/docs/pages/search.js b/src/docs/pages/search.js
index 7e582ce60..7f19d78a7 100644
--- a/src/docs/pages/search.js
+++ b/src/docs/pages/search.js
@@ -12,14 +12,7 @@ import SnippetCard from '../components/SnippetCard';
 // Search page
 // ===================================================
 const SearchPage = props => {
-  const snippets = props.data.snippetDataJson.data.map(snippet => ({
-    title: snippet.title,
-    html: props.data.allMarkdownRemark.edges.find(
-      v => v.node.frontmatter.title === snippet.title,
-    ).node.html,
-    tags: snippet.attributes.tags,
-    id: snippet.id,
-  }));
+  const snippets = props.data.allSnippet.edges;
 
   const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
   const [searchResults, setSearchResults] = React.useState(snippets);
@@ -30,9 +23,9 @@ const SearchPage = props => {
     let results = snippets;
     if (q.trim().length)
       results = snippets.filter(
-        v =>
-          v.tags.filter(t => t.indexOf(q) !== -1).length ||
-          v.title.toLowerCase().indexOf(q) !== -1,
+        ({ node }) =>
+          node.tags.all.filter(t => t.indexOf(q) !== -1).length ||
+          node.title.toLowerCase().indexOf(q) !== -1,
       );
     setSearchResults(results);
   }, [searchQuery]);
@@ -75,11 +68,16 @@ const SearchPage = props => {
         ) : (
           <>
             <h2 className='page-sub-title'>Search results</h2>
-            {searchResults.map(snippet => (
+            {searchResults.map(({node}) => (
               <SnippetCard
-                key={`snippet_${snippet.id}`}
+                key={`snippet_${node.id}`}
                 short
-                snippetData={snippet}
+                snippetData={{
+                  title: node.title,
+                  html: node.html.text,
+                  tags: node.tags.all,
+                  id: node.id
+                }}
                 isDarkMode={props.isDarkMode}
               />
             ))}
@@ -102,22 +100,17 @@ export default connect(
 
 export const searchPageQuery = graphql`
   query searchSnippetList {
-    snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
-      data {
-        id
-        title
-        attributes {
-          tags
-        }
-      }
-    }
-    allMarkdownRemark { 
+    allSnippet {
       edges {
-        node { 
-          html
-          frontmatter {
-            title
+        node {
+          title
+          html {
+            text
           }
+          tags {
+            all
+          }
+          id
         }
       }
     }