EQUK Gatsby Powered Blog

gatsby logo

graphql logo react logo


I finally changed my website to something based on React and GraphQL.

My job involves using Vuejs, React & GraphQL for web app development so I wanted to use something based on Vue or React.

I spent a while trying different technologies (gridsome, nuxtjs, hugo, vuepress, react, gatsby) before deciding on Gatsby.

I first chose React due to how components and hooks work.
I also have experience using GraphQL for API based webapps so Gatsby seemed like a good choice.

I downloaded a lot of blog starters to get ideas but built the site with my own style & structure.

Frontmatter

I wanted to keep post and page URLs the same as my old site.
I also wanted to keep featured images on posts so structured the frontmatter fields based on that.

  slug: -optional-
  title: -required-
  date: -required-
  draft: -required-
  author: -required-
  tags: -optional-
  image: -optional-

To keep post URLs the same I had to add /YYYY/MM/DD/ & pages extend from /.

Project Structure

This is the base folder structure.

    ├── content
    │   ├── pages
    │   └── posts
    ├── node
    ├── src
    │   ├── assets
    │   ├── components
    │   ├── hooks
    │   ├── icon
    │   └── templates
    └── static
        └── media

Markdown files with frontmatter for posts & pages are located in content/.
The node folder has gatsby-node.js functions seperated into files.
Images & media for posts are kept in static/media/.

Components

Components are each in a single .js file in src/components/
Re-usable micro components are located in src/components/common/

Component specific styles are located in their own .scss files in src/assets/scss/components/

Conditional rendering is done at a component level without any dependance on CSS.

Components use prop-types where required (this is also checked with eslint).

Main Features

  • PWA
  • Google Workbox Service Worker
  • Feature Image
  • RSS Feed
  • Sitemap
  • Disqus Comments
  • Syntax Highlighting with prismjs
  • Pagination

Development Features

  • ESLint with plugins
  • Uses SASS for styles
  • Bulma flex grid
  • postcss with plugins
  • PurgeCSS on build
  • Uses gatsby-image
  • Uses React prop-types
  • Uses React hooks
  • Uses react-helmet
  • Uses GraphQL

UX / Design Features

  • Images can extend from content
  • Code blocks extend from content
  • Read / scroll indicator bar at top
  • Code blocks have language tabs
  • Blockquotes extend from content

I will probably be uploading the site to a public github repo in the future.