URL: https://www.gatsbyjs.com/ Gatsby is a static site generator. ## Criticisms of Gatsby ### The build time is slow [I'm not the only one who thinks so](https://twitter.com/MikeRiethmuller/status/1107413484772286464?s=20). In Volume 23 of the [[ThoughtWorks Technology Radar]], Gatsby was mentioned as "displaying some scalability problems". ## Getting started with Gatsby ### Install Gatsby #### Prerequisites - Homebrew - XCode COmmand Line Tools: `xcode-select --install` - [[NodeJS]] `brew install node` - or use [[Node Version Manager|NVM]] - Make sure you're using the right version. Currently, it's v14: `nvm use 14` - Git #### Installing Gatsby through NPM `npm install -g gatsby-cli` `-g` means global #### Serve Gatsby site `npm start` This will take several minutes (up to 10) the first time, but it should be faster after that. Afterwards, Gatsby will output the port that you can view the local instance of the site at. It was `localhost:8000` for me. ### Set environment configuration By default, Gatsby comes with `.env.example`, but you'll need to copy this and rename it according to the environment you're using in your CI process, such as `.env.development` ## Troubleshooting ### createPages failed If you get `failed createPages` when running `npm start`, check to see that all the posts are named correctly. You might also see a broken page when navigating to `localhost:8000`. For example, when I got this error, the cause was that the folder for my latest post was called `2021-02-18-title` instead of `2021-02-18--title` with the two dashes, as required. This error can also occur when there is an issue with frontmatter or with empty Markdown or JavaScript files. ### Problem loading plugin ```bash error There was a problem loading plugin "gatsby-plugin-force-trailing-slashes". Perhaps you need to install its package? Use --verbose to see actual error. error Couldn't find the "gatsby-plugin-force-trailing-slashes" plugin declared in "/Users/nic/k6/repos/blog/gatsby-config.js". ``` This error occurs when plugins are being used that have not been installed. To remedy this, do an `npm install -g`. This should download all necessary plugins. ### Cannot find module ```bash Error: Cannot find module 'symbol-observable' Require stack: - /Users/nic/k6/repos/blog/node_modules/redux/lib/redux.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/lib/reporter/redux/index.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/lib/reporter/loggers/ipc/index.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/lib/reporter/start-logger.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/lib/reporter/index.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/lib/create-cli.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/lib/index.js - /Users/nic/k6/repos/blog/node_modules/gatsby-cli/cli.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:923:15) at Function.Module._load (node:internal/modules/cjs/loader:768:27) at Module.require (node:internal/modules/cjs/loader:995:19) at require (node:internal/modules/cjs/helpers:92:18) at Object.<anonymous> (/Users/nic/k6/repos/blog/node_modules/redux/lib/redux.js:7:36) at Module._compile (node:internal/modules/cjs/loader:1091:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10) at Module.load (node:internal/modules/cjs/loader:971:32) at Function.Module._load (node:internal/modules/cjs/loader:812:14) at Module.require (node:internal/modules/cjs/loader:995:19) ``` This happens when you are using an incorrect version of node installed. If you have [[Node Version Manager|NVM]], do: `nvm ls` to see what version you are using. (Or install NVM if you haven't done so yet.) Check which version of Node the project requires. This is usually found in `package.json`. For example: ```javascript { "name": "k6-docs", "engines": { "node": ">=12.x" }, ``` [^k6] In the example above, the project requires a version of 12.x. Use this version of Node: `nvm use 12.x.x` Then, do `npm install` and try again. ## Gatsby in practice - [[k6 (Company)]] uses Gatsby for [the blog](https://k6.io/blog). [^k6]: k6 documentation. Retrieved from https://github.com/k6io/docs/blob/master/package.json