Website With GatsbyJS

Building a static website with GatsbyJS

Jun 9 2020

/ 1 min read /

The recent trends of static websites built with JAMStack is on the rise. Free hosting providers such as Github and Netlify has made JAMStack more attractive.

I have choosen GatsbyJS to develop this website.

Why Gatsby?

Gatsby is open-sourced blazing fast modern site generator with a great community. It is build on top of ReactJS with GraphQL as the data provider and uses Webpack to build Progressive Web App easily.

Gatsby powered by with React, GraphQL, Webpack
Gatsby powered by with React, GraphQL, Webpack

I love Markdown. Markdown is a plain text formatting syntax aimed at making writing for the internet easier. The philosophy behind Markdown is that plain text documents should be readable without tags mussing everything up, but there should still be ways to add text modifiers like lists, bold, italics, etc. It is an alternative to WYSIWYG (what you see is what you get) editors, which use rich text that later gets converted to proper HTML. And the best thing about it is that it's dead simple to learn. Gatsby provides an easier way to transform Markdown files into HTML content using gatsby-source-filesystem plugin.

Gatsby provides a number of good plugins to make the development faster. Some commonly used plugins are:

Many more can be found at https://www.gatsbyjs.org/plugins.

Furthermore, there are many open source Gatsby built websites for reference. The collection of resources can be found at https://github.com/GatsbyCheatsheet.

The Development Journey

Gatsby provides good tutorials to get started with. It makes building website easier for the developers. One thing I felt missing was a good example which shows how to start from defining data type and mapping it to generate GraphQL nodes. This repository filled that gap a more in that context.

Gatsby also provides a concept of theme but that seems to be a complete system rather than just user interfaces. I was looking forward to find an example site with a good reference that implements theme and built on top of TypeScript and Maximeheckel.com provided enough help. System-ui.com provided insights using theme, components and CSS.

Overall

The journey to built website on Gatsby was challenging. I learned a lot about Gatsby and modern frontend development technologies and methodology. I intend to make the website more useful with quality contents and functionality to add great user experience.


© 2020 Anit Shrestha Manandhar —— Made with love in Nepal.