Blog

Gatsby Shenanigans: The Meat of this Site

September 18, 2019

Welcome to lxemily.com. It's made with Gatsby and lots of experimenting. This is the first blog post I've written in over 7 years - I'll probably need to edit out any weird bits later.

A little background...

I used to blog and customized the look of the blog often. It was how I got kind of enthusiastic about design, the web, and ultimately tech.

I still like the idea of that. I had An Idea of what it'll look like, but not quite sure how to pull it off. Then I got more ideas from tech twitter.

Why Gatsby?

Or why static sites at all?

It's fast. (Una's Tumblr vs GitHub pages speed comparison)
I'd own my content. (Here's Favio's argument for that)
I've never used React and this seems like a cool way to start.
Gatsby is recent and has an active community. And plenty of starters and plugins and tutorials to get started.

Gatsby Starter

I started with Gatby's default starter and customized it into what you're seeing now.

A starter is a working site without your content. Check the docs to get started.

Features and how I got them

Style wise, lots of Flexbox. CSS-tricks has a concise reference. I used Tachyons and gatsby-plugin-styled-components to style components directly.

GraphQL is very powerful and confusing at first. It's used to query blog posts, site content, and GitHub info on this site. Head to yourdevelopmentserver/___graphql or GitHub's explorer to explore queries for your Gatsby project or GitHub API.

Projects

Install gatsby-source-graphql to pull my repository info through GitHub GraphQL API v4.

Blogging in Markdown

Use gatsby-source-filesystem to let Gatsby know where your blog posts are stored, then gatsby-transformer-remark to get the frontmatter in your posts. I referenced this course's Gatsby section while it was free, but here's an article and some videos that are similar.

If you want custom URLs for posts, look into gatsby-plugin-slug.

Site content from another JSON file

gatsby-source-filesystem to let Gatsby know where your content files are stored.

Syntax Highlighting

Install gatsby-remark-prismjs, then import Sarah Drasner's Night Owl VSCode Theme in your post template. To use language-specific syntax highlighting in markdown, put language-javascript at the top of your code block. I figured this out with Erik Aybar's article and source code.

For inline code, set inlineCodeMarker to a symbol like this in your config file.

inlineCodeMarker: `±`,

To use in markdown like .some-class { background-color: red }, add that symbol like this.

css±.some-class { background-color: red }

Open all external links in a new tab

Install gatsby-remark-external-links and set the options to

resolve: "gatsby-remark-external-links",
options: {
    target: "_blank",
    rel: "nofollow noopener noreferrer"
}

Fancy script to populate your post's frontmatter automatically

Or in Erik Aybar's words, ease of writing. I referenced this article.

Input

npm run new-post "Gatsby Shenanigans: The Meat of this Website"

Output

---
slug: gatsby-shenanigans-the-meat-of-this-site
date: 2019-09-18
title: "Gatsby Shenanigans: The Meat of this Site"
published: false
---

Future Features

I'll probably update this post or post an update after implementing these.

SEO, site metadata, robots.txt

These aren't exactly set up yet... Though it seems like a matter of configuring some Gatsby plugins.

Shoutout

To these amazing sites and resources, I can't get out of my head and for publicizing their source.