Building my blog

May 25, 2019

I have blogged on and off through the years. My first blog was in college, it was for my mother so that she would know I was going to classes. She lived far enough away that phone calls were long distance and only had dialup. It was easier for her to check on a blog twice a week than to wait for daily emails to download. I have started several others blogs since then but never had quite the same captive audience as my mother.

Hopefully, this blog will be more appealing than my posts detailing the experiments I was doing in Inorganic Chemistry Lab.

Researching my options

This site is built using Gatsby and the gatsby-starter-cv template. I updated the theme, enhanced a few things, and it has worked great. But this template is for a single page website and it did not have an exisiting way to blog. I didn't want to recreate this site off of a blog template so I thought I would try building in a way to blog.

I knew I wanted to use Markdown and tags for my blog posts. I researched and read a bunch of articles trying to find a way to do it. I liked the way tags were handled in Creating Tags for Blog Posts so I decided on the method described in Adding Markdown Pages which was linked through the original article. I did refer to the official blog starter if I ever got stuck.

Creating the first post

First things first, I created a new branch for this adventure. I didn't want to mess up my working website.

I added the gatsby-transformer-remark package and put it into my gatsby-config.js along with configuration for the location of blog posts and assests.

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    `gatsby-transformer-remark`,

I made a blog template following the example in Adding Markdown Pages and updated my gatsby-node.js to match theirs.

I needed to have some sort of content to test with, so my first test post was a file full of Markdown. I used sections from this Markdown Cheatsheet to fill the file full of everything I thought I might do. After saving it and running gatsby develop, I was able to visit a very very ugly simple blog page.

Creating tags

Now that there was a blog post, I started working on making tags. I followed Creating Tags for Blog Posts and was able to build in tags. I did come across a problem, the graphql examples didn't work for me as I did not make a slug field for my blog posts.

I changed the query for my tags template to pull in path from the frontmatter. If you do this, you will have to also change everywhere slug appears to path in the template itself.

export const pageQuery = graphql`
  query($tag: String) {
    allMarkdownRemark(
      limit: 2000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          frontmatter {
            title
            path
          }
        }
      }
    }
  }
`

After making a tag index page, I used the same method to make a blog index page but modified the query to get everything (okay, it is only the first 2000 things but if I have 2000 blog posts something awesome has happened).

export const pageQuery = graphql`
  query {
    allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}, limit: 2000) {
        edges {
            node {
              frontmatter {
                path
                title
              }
            }
          }
        }
  }
`

Making it pretty

Once I had everything in place, I began rewriting the templates to use my theme. This was a lot of copying and pasting from my homepage and figuring out what all I did want on each page. I ended up updating components and creating new ones.

I spent an hour trying to figure out where I want the tags to appear on each blog post. I looked at so many random little blogs and move them around several times before settling on having them at the bottom. I am still not happy with how they look, but it is good enough for now.

And just because I am proud of the fact that the map command makes sense to me now, here is the template snippet for the tags.

        <ul>
          {frontmatter.tags.map(tag => (
            <li key={tag}>
            <Link to={`/tags/${tag}`}>{ tag }</Link>
            </li>
          ))}
        </ul>

Conclusion

Including research (and procrastination), it took three days to add blogging to my site. I think it was worth it.