Created Volunteer Spotlight page, but it's not linked to the homepage yet

package.json

@@ -6,9 +6,9 @@
   "dependencies": {
     "gatsby": "^2.13.31",
     "gatsby-image": "^2.0.23",
-    "gatsby-plugin-netlify-identity-widget": "1.1.1",
     "gatsby-plugin-netlify": "2.2.1",
     "gatsby-plugin-netlify-cms": "4.2.2",
+    "gatsby-plugin-netlify-identity-widget": "1.1.1",
     "gatsby-plugin-purgecss": "^4.0.0",
     "gatsby-plugin-react-helmet": "^3.0.4",
     "gatsby-plugin-sass": "^2.0.7",
@@ -19,12 +19,12 @@
     "gatsby-source-filesystem": "^2.0.26",
     "gatsby-transformer-remark": "^2.6.9",
     "gatsby-transformer-sharp": "^2.1.9",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "lodash-webpack-plugin": "^0.11.4",
     "netlify-cms-app": "2.12.7",
     "netlify-cms-media-library-cloudinary": "1.3.4",
     "netlify-cms-media-library-uploadcare": "0.5.5",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.14.1",
     "prop-types": "^15.6.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",

src/pages/index.md

@@ -35,7 +35,7 @@ section:
       button: Volunteer
       url: https://example.com
 contribute:
-  heading: Other ways to get get involved
+  heading: Other ways to get involved
   channel:
     - image: /img/github.png
       heading: Developers

src/pages/volunteer-spotlight/index.md

@@ -0,0 +1,16 @@
+---
+templateKey: volunteer-spotlight-page
+path: /volunteer-spotlight
+title: "Volunteer Spotlight"
+---
+
+John Doe:
+
+![maleAvatar](./avatar-male.png)
+
+Jane Doe:
+
+![femaleAvater](./avatar-female.png)
+
+Here is some sample text
+

src/templates/volunteer-spotlight-page.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { graphql } from 'gatsby';
+import Layout from '../components/Layout';
+import Content, { HTMLContent } from '../components/Content';
+
+export const VolunteerSpotlightPageTemplate = ({ title, content, contentComponent }) => {
+  const PageContent = contentComponent || Content;
+
+  return (
+    <div className="siteContent">
+      <div className="siteContent-inner">
+        <h1>{title}</h1>
+        <PageContent className="content" content={content} />
+      </div>
+    </div>
+  );
+};
+
+
+VolunteerSpotlightPageTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string,
+  contentComponent: PropTypes.func,
+};
+
+const VolunteerSpotlightPage = ({ data }) => {
+  const { markdownRemark: post } = data;
+
+  return (
+    <Layout>
+      <VolunteerSpotlightPageTemplate
+        contentComponent={HTMLContent}
+        title={post.frontmatter.title}
+        content={post.html}
+      />
+    </Layout>
+  );
+};
+
+VolunteerSpotlightPage.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+export default VolunteerSpotlightPage;
+
+export const VolunteerSpotlightPageQuery = graphql`
+  query VolunteerSpotlightPage($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      html
+      frontmatter {
+        title
+      }
+    }
+  }
+`;