It had only been a month since I converted my site from Jekyll to Hugo. But with the quarantine and lockdown 😷 fully enforced, I took the time to dig even more the static-site-generator subject, and decided to dedicate some time to learn Gatsby, an open source framework based on React (which I knew very little about), and apply my newly-acquired skills to the redesign of this very site. Job now done ✅

Note: React had always been a weird-looking beast to me, as I was struggling to grasp the concept/interest of injecting html inside javascript, but I am definitely getting it now.

Getting educated

I'm not going to detail here what it took me to redesign my site with Gatsby.

Gatsby has great documentation, and with a big fan/user base, there are tons of resources out there where you can get all the info you want.

However I can only advise you to take Andrew Mead's Great Gatsby Bootcamp, a close-to-5h top-notch tutorial taking you through the creation of a simple site equipped with a blog using Gatsby and either Markdown files or the now-popular headless CMS Contentful.

Getting started

Gatsby has a large 'starters library' available at gatsbyjs.org/starters where you can easily bootstrap your Gastby project.

It was however important for me to build my own Gatsby and Markdown starter (including all features mentioned in the video turorial but excluding the Contentful part), and reinforce what I had been learning.

You'll find my Gatsby Markdown starter on Github, and as detailed in the README file, this starter will have the advantage of coming with:

  • Pages for:

    • home including the latest blog post and event (another post type)
    • about
    • contact
    • 404
  • a blog section with a (paginated) list of blog posts
  • a calendar section with a list of events
  • 5 dummy posts (1 event + 4 blog posts including one with an image) and their engine-generated page
  • Sass turned on
  • the dotenv environment variable file for GraphQL Playground
  • the React Helmet component for document head control

You'll also find on the repo's README the list of all the packages to be installed. Please note that for the conversion of my site, I added the following packages:

  • react-icons to add social network icons to my footer
  • gh-pages to allow deployment to Github's gh-pages, since my site is hosted there
  • gatsby-image (+ gatsby-transformer-sharp gatsby-plugin-sharp), the recommended approach to handling images.
Final Words

Gatsby is awesome

The redesign was a fun little adventure. Gatsby is awesome and I intend to use it for other ssg-powered sites.

I did not experience any huge issues. Having given Andrew Mead's tutorial my full attention, things could not have been easier, that's why I recommend you take that course if you're a gatsby newbie.

The only thing I had forgotten to do was to move the CNAME file to the 'static' folder of my project. So, if like me, you use a custom domain, do not forget to do that, or you'll lose the redirection of your github repo to your domain every time you'll run npm run deploy.

So long folks.