The Great Gatsby Redesign

Reading my previous redesign post from 2014 I cannot believe how significantly the industry has evolved since then: no more Modernizr, loadCSS, custom responsive image implementation; IE out of image for good, Edge and Opera adapting Blink, Jamstack and that’s just a drop in the ocean. Most of these “news” feel ancient already.

The latter fancy word is what I turned to this time, or to be more specific – Gatsby deployed on Netlify meaning I switched PHP for Node, SQL for GraphQL, CodeIgniter for Gatsby, vanilla HTML, CSS and JavaScript for React and Styled Components, custom made CMS for Markdown and static site generator.

We’ve been using Gatsby at Odd Camp for a few years now, starting from its very first version, so this felt like a natural choice for me (we’ve got our own Gatsby starter). Oh, and there some quality plugins to choose from. I’ve implemented the following:

• gatsby-source-filesystem
• gatsby-plugin-feed
• gatsby-transformer-remark
• gatsby-remark-copy-linked-files
• gatsby-remark-extract-image-attributes
• gatsby-remark-images
• gatsby-remark-images-insert-wrapper-attributes
• gatsby-remark-embed-video
• gatsby-remark-http-to-https
• gatsby-remark-external-links
• gatsby-remark-prismjs
• gatsby-remark-autolink-headers
• gatsby-plugin-catch-links
• gatsby-plugin-svgr
• gatsby-plugin-styled-components
• gatsby-plugin-sitemap
• gatsby-plugin-offline
• gatsby-plugin-eslint

Even though we have slowly started replacing Gatsby with Next.js I do have some Gatsby techniques I am going to share.

The previous version of my website is archived at v3.osvaldas.info.