Trying something new should be easy. GatsbyJS nails it.
This morning I became hell-bent on starting some sort of development project. The kicker, however, is that I not only wanted to start a new project today, I wanted to finish it today, as well. I really needed a new blog that allowed me to write more generally about web development, but I didn't want to use Medium or WordPress -- I really wanted to use Javascript, and I really wanted to host it myself. I kept hearing about the simplicity and ease-of-use of GatsbyJS through some friends and colleagues, and decided to give it a shot.
GatsbyJS Installation
Here is a link to Gatsby's Quick StartInstall the Gatsby CLI tool globally on your machine:
I recommend using the CLI tool that Gatsby provides to get a new site setup.
$ npm install -g gatsby-cliCreate a new Gatsby project:
$ gatsby new project-nameStart the app:
$ cd project-name && gatsby developQuick and painless. The team at GatsbyJS has also done a really great job with providing enough boilerplate so you can get started right away, but not so much that your application is immediately cluttered from the start.
Adding Sass to GatsbyJS
There are a couple of things that I can't live without on almost any project, and Sass is one of them. Hooking up Sass was a cinch.
Installing packages
# With Yarn
$ yarn add node-sass gatsby-plugin-sass
# With NPM
$ npm i node-sass gatsby-plugin-sass --save-devUpdating the configuration file
gatsby-config.js
// Add the Sass plugin to the plugins array.
// There may already be some stuff here.
{
...
plugins: [
`gatsby-plugin-sass`
]
...
}Adding some styles
I created a new src/styles/main.scss file that we can now import in Gatsby's gatsby-browser.js file to pull it in whenever our app starts in the browser.
main.scss
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}gatsby-browser.js
import "./src/styles/main.scss"Adding Markdown support to GatsbyJS
When I heard there was Markdown support for Gatsby, I knew I had to have it. This was going to create a super easy way for me to create new posts without ever having to leave my code editor (Farewell, WordPress!), and fortunately it was also a snap to add to the app.
These are the steps we will need to take in order to get this to work:
- Install the necessary packages
- Update our
gatsby-config.jsfile to use the new plugins - Create a blog template to dynamically show each post's data
- Add a Markdown file for a new blog post
- Update our
gatsby-node.jsto create each of our pages from our Markdown files
Installing packages
# With Yarn
yarn add gatsby-source-filesystem gatsby-transformer-remark
# With NPM
npm install --save gatsby-source-filesystem gatsby-transformer-remarkUpdating the configuration file
gatsby-config.js
// Add the transformer remark plugin to the plugins array.
{
...
plugins: [
`gatsby-transformer-remark`
]
...
}Creating the blog page template
I created a file in a new templates directory called blogTemplate.js. This is basially the "wrapper" for every post. This post will have access to a frontmatter object that contains information that we will retrieve with GraphQL from a special header area within each Markdown file.
blogTemplate.js
import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default function Template({
data, // this prop will be injected by the GraphQL query below.
}) {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html } = markdownRemark
return (
<Layout>
<SEO title={ frontmatter.title } />
<h1>{ frontmatter.title }</h1>
<p>{ frontmatter.date }</p>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</Layout>
)
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`Add a Markdown file for a new post
I added in a post-1.md file into a new src/markdown-pages directory I created. The --- header encloses our data for this particular post that will be queryable by GraphQL.
post-1.md
---
path: "/blog/painless-gatsbyjs-setup-and-deployment-with-aws-amplify"
date: "2020-04-12"
title: "Painless GatsbyJS Setup and Deployment with AWS Amplify"
---
# This is the new blog post!
And here is some basic content.Update gatsby-node.js to generate pages from our Markdown files
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/node-apis/
*/
const path = require(`path`)
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`)
const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
frontmatter {
path
}
}
}
}
}
`)
// Handle errors
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {}, // additional data can be passed via context
})
})
}