Debugging Gatsby Static Site Builder

Gatsby, the not-so-blazing-fast-but-beautiful static site renderer with React & GraphQL
gh-pages gatsby graphql react javascript

Gatsby JS

I love code & I love good documentation so I LOVE a great static-site builder like Hugo, or the super-lightweight static-site scheme oracle learning-library uses. There’s been a lot of buzz about Gatsby so I decided to give it a go!



I Built a static site with Gatsby js, pictured above & available at https://unofficialoraclecloudhub.github.io/oracledb-graphql-demo/



Building the Site

All of the code is available at https://github.com/unofficialoraclecloudhub/oracledb-graphql-demo/tree/master/docs. I used ericwindmill/gatsby-starter-docs as the starting point. The site (especially the code highlighted with prismjs) is beautiful!

I thought Gatsby felt flimsy. If you make a small change (like a filename) you need to clear your cache and then wait MINUTES for the code to transpile. With hugo I hardly every wait a full second.



Debugging Gatsby

This was not easy. I easily lost a few days playing with this and if there was one this I could tell my past self, it would be this;

set DEBUG=* && node.exe --inspect-brk=6359 node_modules\\gatsby-cli\\lib\\index.js develop --verbose

With this one line your log output goes from nil to muy-verbose 😉 . Note that this command is on windows & assumes you are using the gatsby-cli installed in your node_modules and not globally.



tl;dr

Gatsby is great if you want to work extensively with graphql and react AND you’re willing to wait ages every time you make a change to your site.

I won’t be using gatsby again, next static-site generator on my list to test is Facebook’s docusaurus.io