Gatsby is "à la mode" and makes us feel that it's really fast. This note was made when I switched from Jekyll to Gatsby. I did not have much experience with React (neither JS) yet. You will find in this note not only things from Gatsby, but also from React and JS.

👉 Build a website with Wordpress and Gatsby (part 1) 👉 Build a website with Wordpress and Gatsby (part 2)

Installation on localhost

👉 Install npm and NodeJS (with npm). Check NodeJS + npm. 👉 Check the official doc.

Then install gatsby globally,

npm install -g gatsby-cli
# Check version
gatsby --version

• If error EACCES occurs (fix on Linux)
• Install a fresh site?

👉 You should use starters, I choose official gatsby-starter-blog for the version 5 of my website.

npx gatsby new gatsby-starter-blog <https://github.com/gatsbyjs/gatsby-starter-blog>

• How to use ___graphql?

Some tips for dev locally

# Restart cache
gatsby clean

👉 Woring with .env file | Gatsby Official doc. 👉 Note: Using .env file in a NodeJS project 👉Troubleshooting common errors | Gatsby Official doc.

Miscellaneous

• React / Gatsby use JSX syntax. It's an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code.

• Internal URLs: use Link (replaces <a> tag for internal links).

  <aside> ⚠️ You cannot use target='_blank' with <Link> because whenever you use internal links, they are always in the same window!

  </aside>

• External URLs: use <a></a> as usual.

• Use className instead of class=. E.g. className = "abc" or className = "abc xyz".

• Inline CSS, <div style={{ color: "#ffff", paddingTop: "10px" }}></div>.