Why I moved from Gatsby to Hugo for this blog?

About This Site This site was built with hugo and the PaperModX Theme (using a fork of a fork at the moment). I decided to go with an existing theme rather than creating my own this time, to one save time but also to give the site a more consistent feel. I am no designer and I felt my last website (v3), really felt like a bunch of different websites thrown together. ...

Testing a Gatsby application with Cypress on Gitlab CI

In this blog post, we will go over how we can automatically test a Gatsby site end-to-end (e2e), using Cypress on Gitlab CI. Introduction Gatsby Gatsby is a static site generator (SSG) built upon React. It allows us to create “blazing” fast websites. In this example, we will use a simple blog starter template available and add a Cypress test. Cypress Fast, easy and reliable testing for anything that runs in a browser. ...

How to add a ToC in Gatsby

A lot of people, I included, are using Gatsby to build their own blogs. One of the things I wanted to add to my blog was a table of contents (ToC) 📝. A ToC will show you all the headings of an article and when you click on a heading it’ll take you directly to that heading. It’s a nice little feature to have on your blog, which makes it easier for users to navigate and find the information they are looking for. ...

How to source your Gatsby posts from another repo

In this article, we will go over how you can manage your markdown blog posts from another git repository (repo). Separate to the git repository for your Gatsby site. This is the same process that I use to manage this repo. So what this entails is the source code for my Gatsby site is in a repo called portfolio-site on Gitlab. Then I have another repo for all of my blog posts (in markdown) called articles. ...

Add an 'edit post' button to your Gatsby blog

In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing. Setup Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the Gatsby blog starter. You can skip this step and add the button to an existing site. ...

How to add offline search to a Gatsby blog

Let’s take a look at how we can add offline local search 🔍 to a Gatsby blog. There are two main types of search we can use an offline search like elasticlunr and external API search engines like ElasticSearch. These are typically more scalable but also more expensive. You can find more info here. In this article, I will show you how to add offline search to your Gatsby blog using elasticlunr. ...

How to use Storybooks with MDX

This article (sort of) continues on from my previous article How to use Storybooks, Gatsby, Babel, Tailwind, Typescript together. In this article, we will document our React components using Storybook with MDX. You can find an example project using this here, you can also find a demo site for said project. Prerequisite Just to make sure everyone’s on the same page let’s follow the same steps to setup Storybook as we had in the last article. ...

How to use Storybooks, Gatsby, Babel, Tailwind, Typescript together

Recently I started to re-design my website, I decided to use this as an opportunity to learn some new technologies such as Gatsby, Tailwind. I also decided to try using Storybook. For this said project I used MDX to create my Storybook stories. In this article, I will show you how you can create Storybooks stories, for a Gatsby project with TailwindCSS, Typescript using MDX. You can find an example project using this here. ...