Mike Immersed

GatsbyJS

August 27, 2018

I decided to check out GatsbyJS to statically generate my new site, mikeimmersed.com. One reason I chose Gatsby over Jekyll is that I already have npm, but I still haven’t set up Ruby on my current laptop. Also, I figure it might be a good way to get my toes wet with React and GraphQL. Plus, it has several other powerful features that may come in handy later.

Quick start

Here are the steps I used to get started with Gatsby:

  • Install npm if necessary
  • Open a command prompt
  • npm install --global gatsby-cli
  • gatsby new {site-directory} https://github.com/gatsbyjs/gatsby-starter-blog
  • cd {site-directory}

Delete/modify sample content

  • src/pages: remove or edit hello-world, hi-folks, my-second-post
  • src/layouts/index.js: replace “Gatsby Starter Blog” with your site name
  • gatsby-config.js: update siteMetadata
  • src/components: edit Bio.js and replace profile-pic.jpg

Add blog posts

  • create a new directory in src/pages (or in my case, src/pages/blog)

    • e.g. dolphins-left-the-building
  • add a new file index.md to the new directory
  • edit index.md, add YAML front matter to the top and format the article using Markdown
  • if there are article images, add them to the same directory

Example:

---
date: "2018-08-26"
title: "The dolphins have left the building"
---

Where did all the dolphins go?

Preview

GitHub Pages notes

I had a some extra steps for GitHub pages (in addition to GitHub domain configuration and DNS settings):

  • git clone https://github.com/{username}/{username}.github.io.git
  • cd {username}.github.io
  • git checkout -b build
  • move the contents of the whole gatsby {site-directory} into the current directory
  • git add . && git commit
  • touch static/.nojekyll
  • I also had to workaround an issue in gh-pages that was using the global user.email instead of the local user.email.

Build and Deployment

  • npm install gh-pages --save-dev # if using GitHub pages for hosting
  • update siteMetadata.siteUrl and pathPrefix in gatsby-config.js

  • add the following to package.json in scripts:

    • "deploy": "gatsby build --prefix-paths && gh-pages -b master -d public"
  • npm run deploy

References

Mike Henry

Written by Mike Henry, VR enthusiast and software developer. Follow Mike on Twitter