From Wordpress to a static site in a weekend

I have been interested in static site generators like Jekyll for a while. But until now I haven’t had time to try one. While migrating a simple website with just static pages to S3/CloudFront based solution I came across this great blog post by David Baumgold which walks you through the process really well.

He used a static site generator named Lektor for his blog. My interest in static site generators was renewed and I did some digging around to see how Lektor compares to Jekyll and Hugo. For some reason none of them picqued my interest but then I came across Gatsby.

I liked the idea of Gatsby because it uses React and GraphQL for generating static html, now that is an interesting use case for me and I have been interested in both of them as well! I followed the great tutorials on Gatsby site and generated the site scaffold using gatsby-starter-blog template like this.

gatsby new thistooshallpass.xyz https://github.com/gatsbyjs/gatsby-starter-blog

I really like the idea I can write blog posts in Markdown in VSCode and Gatsby refreshes the page automatically if I want to have a look. There is no need to press the “Preview” button and wait.

I even managed to modify the GraphQL query which generates the blog post summary page to exclude posts which have

published: false

in front matter part of the post by adding following to gatsby-node.js config file

          filter: {
            frontmatter: {
              published: {ne: false}
            }
          }    

Markdown, themes and typography

Markdown parsing in Gatsby is done with gatsby-transformer-remark plugin which itself uses plugins to add functionality like syntax highlighting.

Gatsby Blog Starter uses Typography.js, a toolkit for building websites with beautiful typography. Typography.js maintains themes that are ready to use. These are each published as separate NPM packages and are available at http://kyleamathews.github.io/typography.js. This site uses typography-theme-de-young theme.

Syntax highlighting in Markdown code snippets using PrismJS

Gatsby uses gatsby-remark-prismjs plugin for Markdown code snippet syntax highlighting. There is an extensive list of customizations as well as theme support in code snippets.

I’m fan of dark themes for coding and used prism-okaidia, a beautiful PrismJS dark theme for code snippets. To configure the theme, you need to modify the gatsby-browser.js like so:

// PrismJS theme
require("prismjs/themes/prism-okaidia.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")

To Do

• Analytics - Just need to add the Google Analytics tracking code to gatsby-plugin-google-analytics
• Comments - Being a static site, you don’t get comments out of the box like Wordpress. So will need to integrate with a comments service.

Written by Francois Fernando, a software craftsman and tinkerer.