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.
Tags
- Add tags to my posts
- Filter featured posts through tags
- Filter posts on the blog page
- This seems like a good resource
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.