EQUK Gatsby Powered Blog
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
onbuild
- 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.