Solution: Events Page

To make the events page, create a new file in src/pages called events.mdx.

You'll want to add a title frontmatter item and a bit of text:

---
title: "Events"
---

Here are the next five events happening at Marionberry Farm Lodge:

TODO: Add events index.

This will use the default layout we created in the previous videos. To use a custom layout for this page, you just need to create and export a component in the file. For example, we could add this layout and use the title that comes from the pageContext object:

import Layout from "../components/Layout.js"

export default ({ pageContext, children }) => (
  <Layout>
      <h2>{pageContext.frontmatter.title}</h2>
    </Layout>
    )

We won't use this going forward, but I wanted to show you how to do it.

Don't forget to also add a link to the NavBar component:

export default () => (
  <div>
    <NavLink to="/">Home</NavLink> | <NavLink to="/about">About</NavLink> |{" "}
    <NavLink to="/thingstodo">Things to Do</NavLink> |{" "}
    <NavLink to="/events">Events</NavLink>
  </div>
)

The rest of this tutorial is all about programatically creating pages with Gatsby in order to create the events blog. We'll start in the next video by learnining about how Gatsby looks at files.