Getting started with Gatsby

December 26, 2019

When I first heard about Gatsby I thought it would be an interesting framework to use, and I’d been thinking it would be nice to have a blog. I like that it’s built on React and GraphQL, and would allow me to write blog posts in Markdown.

Getting started with Gatsby wasn’t too hard. Althought Netlify and Gatsby documentation walked me through most of it, I figured it’d be good to put everything in one place for reference later.

1. Created a repo to host the site

The easist way use Gatsby is to hosted your repo on Github. When you push a new version of your master branch, a new deploy will be built and uploaded to your Netlify site.

Signing up is easy. I used Github for authentication since I’m using it to host the repo. During the sign up process, you can point your site at the Github repro you created.

3. Install the Gatsby CLI

Easily installed via npm:

npm install -g gatsby-cli

4. Get started with blog theme

I used the following command to pull down the Gatsby “starter blog” theme to a local folder named blog-site:

gatsby new blog-site https://github.com/gatsbyjs/gatsby-starter-blog-theme

At this point you can run

gatsby develop

To see what the site looks like on your local machine.

5. Push to Github repo

I added the Github repo as a remote for my local repo:

git remote add origin git@github.com/<your repo>

Then pushed the master branch up:

git push --set-upstream origin master --force

(I did force push to overwrite some junk I had already created while messing around). Now, the site is viewable on the web!

Install “Markdown All in One” and “markdownlint” for VSCode

The next thing I needed was an environment to use for authoring blog posts. I’m a big fan of VSCode for code editing but I hadn’t ever used it for Markdown, so I needed a few extesnsions. I grabbed the “Markdown All in One” and “markdownlint” plugins.

Next, I needed to tell Gastby the *.mdx files in the content directory are actually Markdown files. In the VSCode’s settings.json I added:

"files.associations": {
    "*.mdx": "markdown"
}

And finally configured lint on save in settings.json:

"editor.codeActionsOnSave": {
    "source.fixAll.markdownlint": true
}

Get started bloging

After that, I was pretty much all set up. I can pop open VSCode, create an .mdx file under content\posts and then split screen the markup with a markup preview window so I can see what the post will look like as I write.

That’s about it. Hopefully my experience will help someone else start blogging with Gatsby!