Challenge 1 is about going from 0 to a functional blog, using markdown files, templates and GraphQL. The challenge directs you throught the beginner-focused Gatsby tutorials - as this isn't my first forray into Gatsby, I already have some idea of how to do this, but I'll follow the tutorials for completeness.

The first three tutorials are beyond basic, and I already unintentionally completed them or otherwise know how to do them without reference:

  1. Get to know Gatsby building blocks
  2. Introduction to using CSS in Gatsby
  3. Building nested layouts in Gatsby

The next tutorials are where the Gatsby challenge actually begins:

  1. Querying for data in a blog
  2. Source plugins and rendering queried data
  3. Transformer plugins
  4. Programatically create pages from data
  5. Preparing a site to go live

Creating the Blogging Functionality

Note: This blog post will only explore what is required to complete the challenge.

Second Note: I appreciate how Ugly the website is in these screenshots, and I hope you do too!

Firstly, we install the plugins we need:

npm install gatsby-transformer-remark gatsby-remark-images

And then we add the relevent information to the gatsby-config.js file:

module.exports = {
  siteMetadata: {
    title: `100 Days of Gatsby`,
    description: `A 100 Days of Gatsby Challenge blog.`,
    author: `@securatom`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

We want to be able to access all of our blog posts from our index page, we're going to do this using a GraphQL query to grab our markdown files and to display the title, date, author, and excerpt.

Our index.js file is left looking like this:

import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/layout"

export default function IndexPage({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        <h1>
          Home
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <Link to={node.fields.slug}>
            <h3>
              {node.frontmatter.title}{" "}
              <span>{node.frontmatter.date}
              </span>
            </h3>
            <p>{node.excerpt}</p>
            </Link>
          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark
    (sort: { fields: [frontmatter___date], order: DESC })
    {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "Do MMMM, YYYY")
            author
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

Our rather ugly (for now) index page looks like this - the horrific, temporary green font indicates a hyperlink:

Index Page at the early stages of Challenge 1
Screenshot of the Index Page

Now that we have a crude index page, we need to add the functionality to create pages for each blog post. Add the following to the gatsby-node.js file:

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

Now that a page is generated for each markdown file,we can click on the hyperlinks and look at each page - writing this one live, it looks like this:

Screenshot of this blog post on the local development server
Screenshot of this webpage

Preparing to Go Live

Gatsby's final 'beginner tutorial' is to prepare the site to go live. Their first recommendation is to audit with lighthouse.

"Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps (PWAs), and more." - [The Lighthouse Website](https://developers.google.com/web/tools/lighthouse/)

To do so, we need to move to a production build, rather than operating on the development server. To do so we halt our development server and run the following commands:

gatsby build
gatsby serve

With that done, we open localhost:9000 in Chrome and navigate our way to DevTools > Lighthouse, we click 'Perform an audit...' - doing so gives the following, perhaps unsurprising metrics:

Lighthouse Test Results
Lighthouse Metrics

There's things we can do to immediately improve the lower metrics, but I'm going to leave it there for challenge 1 as some of the next recommendations in the keep making it better section of tutorial 8 are covered in greater depth further down the line.