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.
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
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
node folder has
gatsby-node.js functions seperated into files.
Images & media for posts are kept in
Components are each in a single
.js file in
Re-usable micro components are located in
Component specific styles are located in their own
.scss files in
Conditional rendering is done at a component level without any dependance on CSS.
prop-types where required (this is also checked with eslint).
- Google Workbox Service Worker
- Feature Image
- RSS Feed
- Disqus Comments
- Syntax Highlighting with
- ESLint with plugins
- Bulma flex grid
- Uses React
- Uses React
- Uses GraphQL
- 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.