Arjun Kalburgi to the right of a sharp leaf

learning, finding, designing, developing impact

Moving my blog to Gatsby

September 15, 2019

After seeing a shift in the industry from Medium, it’s time I leave as well and host my blog on my own site.

This shouldn’t be too bad of a process, I just need to convert my Medium posts to markdown, set up a Gatsby blog, host on Github and do some styling.

Convert to Markdown

Taking the help of this blog post, I used medium-2-md to export and convert all my Medium posts to markdown.

medium-2-md convertLocal medium-export/posts -df

This gave me a large list of markdown files that looked like 2017-04-09_Security-Review--UX-of-Canadian-banking-applications-53aa77dd2cf4.md.

Set Up Gatsby Blog

Gatsby’s got a blog-starter repo, which was quick to clone and get up and running.

initdeploy

Then using some bash scripts to format my markdown posts to the file structure Gatsby expects.

# make the new directory
$ for f in *.md ; do mkdir -p ../blog/$f ; cp $f ../blog/$f/index.md ; done 

# remove the date from the beginning of the directory name
$ for d in *.md ; do mv $d ${d#*_} ; done 

# remove the '.md' from the end of the directory name
$ for d in *.md ; do mv $d ${d%-*.md} ; done 

# lower case all characters`
$ for d in * ; do mv $d ${d,,} ; done 

Going from 2017-04-09_Security-Review--UX-of-Canadian-banking-applications-53aa77dd2cf4.md, to security-review--ux-of-canadian-banking-applications.

This helps because now the url for my posts will look like: www.arjunkalburgi.com/writing/security-review--ux-of-canadian-banking-applications

Now my blog is ready to go 😃. Thank you to my bff Andrew Fontaine for helping me out with this part.

Host on Github Pages

Thanks to Gatsby’s gh-pages hosting tutorial I was able to get this done pretty easily. Just needed to make a repo in github, set the origin in my local repo, follow the tutorial and then run npm run deploy . And I’m up!

Without CI, every time I push to Github I’ll need to run this command. This is okay for now but I’ll probably look to change this later.

Styling

Honestly I could spend all day doing this, but for now I just want something quick. I’ll use a lot of the CSS I already have from my website. But for the blog posts, for now I’ll just copy what Varun’s got on his site, it’s gorgeous.

Despite the simplicity of this task, it was actually quite time consuming to style the blog. Based on my commit history, it was the markdown posts that took forever to style. For some reason, Gatsby does not have this built into their default style for their starter package I used, making me wish I knew to use a theme’d starter from the beginning (there’s no way to change your theme afterwards.)

image-20190915215432021

Results

Pretty happy with the public facing results, but on the internal there’s a couple things I lose.

One is that I don’t have the nice editor Medium provides. I installed Typora to fix this (using it right now). It lets me paste images into the markdown files and helps me out with presenting my images as well.