GatsbyJS Static Website Framework

[anitsh]

Objective

• [x] Understand basics

Resource

• [x] https://www.gatsbyjs.org
• [x] https://www.gatsbyjs.org/docs/cheat-sheet
• [x] https://www.infoq.com/news/2021/10/gatsby-4

[anitsh]

The main objective to learn this tech stack was to create a Blog for codeanit.com As I was becoming fond of Markdown files and as the site needed to be JAMStack, I was looking forward to some kind of frameworks which could consume Markdown files, and came to know about Gatsby. After doing some search and some references, it seemed to be a great fit. At first the idea was to use Hugo, but wanted I wanted something around React, just wanted to keep everything to JS, hence, this was another reason for choosing this tech.

A good reference is reviewed with the tech stack around Gatsby. This will be taken as the base for the website moving forward.

Resources: https://github.com/eggheadio/gatsby-starter-egghead-blog is the base example for the site. https://github.com/PaulieScanlon/paulie-dev-2019 - The charts could be good to implement. https://www.gatsbyjs.org/docs/adding-markdown-pages https://www.gatsbyjs.org/tutorial https://www.gatsbyjs.org/blog/2020-04-20-paulie-scanlons-journey-of-100-days https://github.com/system-ui/theme-ui https://github.com/KyleAMathews/typography.js

[anitsh]

Completed the basic tutorials on Gatsby. I really liked the simplicity in how the tutorial was written. Along the way I have come to know few more things about the web platform.

Contents covered below:

Gatsby fundamentals

Set up your development environment: We’ll introduce you to core technologies that power Gatsby, and guide you through setting up your development environment.

• Get to know Gatsby building blocks: Starting new projects, developing, and deploying sites.
• Introduction to using CSS in Gatsby: Explore libraries like Typography.js and CSS Modules.
• Building nested layouts in Gatsby: Layouts are sections of your site that are reused across multiple pages like headers and footers.

Intermediate tutorials

In these intermediate tutorials, you’ll learn how to pull data from almost anywhere into your Gatsby site with GraphQL.

• Querying for data in a blog: Create a blog and use a GraphQL query to pull your site title into the blog header.
• Source plugins and rendering queried data: Use a source plugin to pull Markdown blog posts into your site and create an index page with a list of blog posts. Transformer plugins: Use a transformer plugin to transform your Markdown blog posts into a form the blog can render.
• Programmatically create pages from data: Learn how to programmatically create a set of pages for your blog posts.
• Preparing a site to go live: Learn how to audit your site for performance and best practices for accessibility, SEO, and more.

In the last part to go live, as it lists few things, compared few reference sites and found https://kentcdodds.com to be good enough

The next thing to do is to cover will be about Plug-ins and Themes https://www.gatsbyjs.org/tutorial/plugin-and-theme-tutorials, and implement the blog.

[anitsh]

Need to go through https://kentcdodds.com code base further.

[anitsh]

Update May 12
Review Kentcdodds.com. Went through gatsby-config.js and skimmed the plugins. Also went through the tutorials section in very brief. Wanted to know more about the special files, and it turns out to be a palce holder for the API that Gatsby provides. https://www.gatsbyjs.org/docs/api-reference for further read. I was looking for a way to manage the static contents or CMS and https://www.gatsbyjs.org/tutorial/blog-netlify-cms-tutorial looks like the solution. https://www.gatsbyjs.org/docs/api-specification to read. Need to go through https://www.gatsbyjs.org/tutorial again https://github.com/gatsbyjs/gatsby/tree/master/examples will be good to go through them.

[anitsh]

Issues when running the kentcdodds code on new pc, installed nvm and stable version of nodejs.

"gyp ERR! stack Error: not found: make gyp ERR! stack at getNotFoundError" Followed https://stackoverflow.com/questions/14772508/npm-failed-to-install-time-with-make-not-found-error, and installed sudo apt-get install build-essential This solved the error.

Another issue followed up "Fixing npm/node-gyp Error: not found:" Resolved with sudo apt install build-essential from https://techoverflow.net/2018/06/04/fixing-npm-node-gyp-error-not-found-make-on-ubuntu

Another issue followed up - "Error: Cannot find module './build/Release/sharp'" Resolved with apt install libvips followed by npm install sharp

Another issue "WorkerError: Processing image.png failed". There seems to be issue while processing large image file in Gatsby. This is listed in common error https://www.gatsbyjs.org/docs/troubleshooting-common-errors https://github.com/gatsbyjs/gatsby/issues/13442

Error: ENOSPC: System limit for number of file watchers reached: https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached

There seems to be issue with VSCode as well: https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

Well in the end removing and and reinstalling made the application functional. rm -rf .cache node_modules public package-lock.json