Dave's Blog

Migrating to Gatsby

October 11, 2020

This blog used to be one long HTML file. This was fine to get started as there was no barrier in getting set up but was getting a bit unwieldy after a few years.

I've been playing with Gatsby for a while so have converted the old site into Gatsby.

I started with a simple Gatsby starter site to build out from.

I wanted to use markdown to be able to add blog posts quite easily. For now I will edit MD files by hand with this sets me up nicely to use NetlifyCMS in the future if I want to.

The key gatsby plugin for this is gatsby-transformer-remark.

Then to create empty markdown pages with the correct frontmatter (the properties surrounded by triple-dashes used to set up the page in the site) I started with empty.md, which was a simple file like this:

slug: "/blog/empty-sample"
date: "2099-01-02"
title: "EMPTY?"
template: "blogTemplate"

Loret ipsum

Then I wrote few bash functions to automate the creation of a new markdown file for each blog post that I was about to migrate from the old HTML page. The usage is

mknewmd "Book review Pro ASP.NET Core MVC 2 by Adam Freeman"

which will create a file named book-review-pro-aspnet-core-mvc-2-by-adam-freeman.md with the content:

slug: "/blog/book-review-pro-aspnet-core-mvc-2-by-adam-freeman"
date: "2099-01-02"
title: "Book review: Pro ASP.NET Core MVC 2 by Adam Freeman"
template: "blogTemplate"

Loret ipsum

ready for me to update the date and the markdown (more later).

The mknewmd function relied on a few others.



lowerdashed() {  hyphensInsteadOfSpaces=${1// /-}  ; hyphensAndAlpaNumerics=$(sed  's/[^a-zA-Z0-9-]//g' <<< "$hyphensInsteadOfSpaces" ) ; lowerAndHyphenated=$(sed  's/\(.*\)/\L\1/' <<< "$hyphensAndAlpaNumerics" ) ; echo "$lowerAndHyphenated" ; }

takes the input var and

  • replaces the spaces with hyphens
  • strips out non-alphanumeric (and hyphen) characters
  • echoes out the cleaned string (in this case book-review-pro-aspnet-core-mvc-2-by-adam-freeman).


mknewmd() { cleaned=$(lowerdashed "$1") ;  cp src/markdown-pages/empty.md "src/markdown-pages/$cleaned.md" ; updateslug $cleaned ; updatetitle "$1" $cleaned ;  }

The var cleaned is set to the output of lowerdashed. This is used to copy empty.md into a new file with that name. Then the two update functions update the newly-created file.


updateslug() { sed -i "s/empty-sample/$1/g" "src/markdown-pages/${1}.md" ;  }                                                               

updates the slug from the empty-sample placeholder to the cleaned string (in this case book-review-pro-aspnet-core-mvc-2-by-adam-freeman) giving the slug used for the post URL.

(If you want to find the definition of the function try declare -f updateslug)


updatetitle() { sed -i "s/EMPTY?/${1}/g" "src/markdown-pages/${2}.md" ; }

updates the blog post title from the EMPTY? placeholder to the uncleaned string (in this case Book review: Pro ASP.NET Core MVC 2 by Adam Freeman).

Generating the markdown

The Html was converted to Markdown using https://convert-tool.com/conversion/html-to-markdown