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.
Firstly
lowerdashed
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
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
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
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