Blogception

Within this post I’m going to be venturing into the world of Gatsby, creating a blog and then documenting about the blog within that (see why the post is called blogception 😅). I’m basically going to be writing the post whilst doing it so I’ll try and document my thoughts and struggles and they come and go. Lets begin…

First of all we are going to get the gatsby blog starter up and running locally.

$ npx gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

I’m using npx here because I prefer not to have any node modules installed globally.

Now let’s cd into the project and start our dev environment

$ cd my-blog
$ code . (this opens the directory in vs code which is my text editor of choice)
$ npm start (we can do this straight away because the command we used before automagically installed all of the dependencies)

Now lets view it in the browser at http://localhost:8000/

and boom! we quickly have a simple blog up and running 👏

First let’s sort out our typography. By default Gatsby uses Typography.js which I’m going to keep in this case to save fiddling with font sizes and spacing (It also does a really good job in setting everything up for you).

I would like to include my own touches so I’m going to remove the wordpress theme and use the below in my Typography.js file

You will notice I am adding my own font-family, I will show you how to set that up in a second. I am also overriding some of the styles which typography.js created. I’m changing the font size of any code blocks added in the markdown, changing the font kerning to prevent our next and previous links from wrapping and changing the link colours for the blog.

I wanted to try out a new font called Public Sans which is a new typeface developed recently by the US government. I stumbled upon this in a newsletter I’m signed up to called Fresh Fonts (which I recommend checking out btw 😉). I grabbed a couple of the .woff2 files (which are smaller than .ttf and web optimised), created a font directory in our src and put them in there.