Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

GatsbyJs (JAM Stack web app generator)

Create and publish fast, secure, feature-rich, mobile-friendly, scalable, low-cost cloud-native websites that rank high in searches

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

This is a DRAFT of a hands-on introduction = narration for a forthcoming video. All on one page so you can find what you need easily.

NOTE: Content here are my personal opinions, and not intended to represent any employer (past or present). “PROTIP:” here highlight information I haven’t seen elsewhere on the internet because it is hard-won, little-know but significant facts based on my personal research and experience.

Along the way, succinct deep-dive commentary provide insights not available anywhere else about Gatsby’s JAM-stack and Gatsby framework and CLI: locally and using Docker in AWS.

PROTIP: Rather than building up from scratch or generating a basic site, the intent here is to automate a full-featured site which we then analyze and customize. That’s usually what you encounter on the job.

Gatsby’s Ecosystem

  1. View gatsbyjs.org

    .org in the host name says it’s the non-profit side of Gatsby providing the free open-source framework.

  2. There is also a gatsbyjs.com for “Gatsby Inc.” which is a for-profit VC-backed company formed in 2018 to “help website development teams build CMS-powered websites with modern tooling”.

  3. Gatsby was first released on October 6th, 2015 at https://github.com/gatsbyjs/gatsby

    js means that Gatsby was written in the JavaScript language, and users of Gatsby would code JavaScript.

    The JavaScript calls the React front-end library and GraphQL protocol (the most popular tooling today).

    Gatsby’s architecture is a “JAM stack” – an acronym for JavaScript, APIs, Markup (HTML). Rather than rendering HTML for every request after referencing a database, JAM sites deliver stored HTML stored after being pre-converted from Markup by developers.

    Gatsby makes use of the React front-end UI framework from Facebook. Thus, Gatsby can support all ever-green browsers and Internet Explorer 9+ on Windows 7+.

    Some call it a “Cloud Native Website System”.

    Who uses Gatsby?

  4. The most notable sites among the hundreds of web sites claimed as being built using Gatsby are:

  5. Lists of sites using Gatsby:

Content Mesh

Sam Bhagwat (Gatsby co-founder) calls the ecosystem of 3rd-party services which can be integrated with Gatsby to form a complete system a “Content Mesh”
gatsby-content-mesh-venn-1564x957-47800.jpg

“Only Gatsby comes with out-of-the-box CMS integrations, a modern development framework, and cutting-edge performance.”

Web services for e-commerce sites (listed among Starters below):

A team running a paywalled content site can:

When website teams want to:

PRPL pattern

Gatsby makes use of the “PRPL” pattern (Push, Render, Pre-cache, and Lazy load).

Starter Templates

  1. View the “Starters” at https://www.gatsbyjs.org/starters/?v=2

    Migrate v1 to v2

    Notice the “v2” in the URL? That’s because Starters built for version 1 such as https://gatsby-starter-blog-demo.netlify.com should first be
    migrated to version 2.

  2. The CATEGORIES are features coded into varous examples:

    PROTIP: My wish is to have each item within CATEGORIES a checkbox I can select, and source for a website with all my selections will be magically built (integrated) for me.

    • “Official” are the ones created or validated by Gatsby core people

    Types of page layout:

    • “Landing Page” is the page shown when visitors first enter the site by providing just the host name
    • “Blog”
    • “Portfolio”
    • “Documentation”
    • “Presentation”
    • “Onepage”
    • “Storybook”
    • “HTML5UP” are starters adapted from templates (using HTML5 responsive coding beautiful designs) at html5up.net.

    PROTIP: Additional topics include use of template libraries such as the pixelarity subscription site and adoption of templates created for WordPress and flexbox

    Formatting Tools:

    • “Markdown” enables writing using less technical coding. Most Gatsby sites still use Remark Markdown. But …
    • “MDX” enables the import (embed) components such as interactive charts or alerts within webpage content. (See mdxjs.com/getting-started/gatsby and MDX sample)
    • “Styling”
    • “Transitions”
    • “Pagination” displays a small number of rows instead of the whole set filtered

    Interactive Features:

    • “Authentication” enables personalization and protects content, using Authy or Netlify Identity which uses the GoTrue API. Also the Moltin using API-first Headless Commerce Solution for Login and Register.
    • “Disqus” provides a way for visitors to leave comments
    • “PWA” (Progressive Web App) presents different layouts depending on the size of the screen. Offline by service workers
    • “Redux” with React
    • “Search” enables visitors to make queries like on Google.com

    Data retrieval:

    • “AMP” (Accelearated Mobile Pages) makes use of Google’s speed enhancements

    • “Netlify” is a CDN (Content Delivery Network) provider who distributes files around the world for faster presentation to visitors

    • “eCommerce”

    • “Shopify” is a popular shopping cart (eCommerce)

    • “Google Sheets” retrieves or updates information in individual Google Sheets
    • “Firebase” web data service from Google
    • “AWS” for Amazon Web Services cloud

    Tools:

    • “CMS” (Content Management System) ala JS: Ghost, Keystone; .NET CMS Piranha, Orchard; Python: Mezzanine;
    • “Testing”

    • “RSS” (Syndication) enables bots to understand what is on your site

    • “Linting” checks for spelling mistakes
    • “Language”
    • “i18n” enables translation into other human languages

    PROTIP: We would likely want several of these in the same website, but Gatsby’s Starters page is designed to be examples of a single or only a few techniques together, so we need to program integrations.

    WARNING: Some of the starters, such as Contentful and Netlify, operate on a “fremium” license that costs money after a certain amount of free use.

    PROTIP: As beginners, we only want to see sites which provide code with running demos using technologies we want to use.

    Iteratively review Starters

  3. Select one of the Starters at a time. Scroll down to see the Starter’s features and dependencies.

  4. Right-click on the orange “Visit demo” icon to see it live.

    Alternately, if you have a paid Netlify account, scroll down to click the “Try this starter: Netlify” icon to instantiate the sample online.

  5. Get the URL to some you’d like to try.

    If you’d rather not mess with formatting provided by React so you can concentrate on the core stuff, view gatsby-advanced-starter/

    Additional themes

    There are also themes on GitHub:

    Background docs

  6. Read through Gatsby’s “Get Started” for https://www.gatsbyjs.org/docs

    That page is the portal all official information. Below are my notes from it and other resource below.

    Access tokens for each service

    PROTIP: Each service meters access to customer data by using a token that the service assigns on their webpage which callers to the service provide. Kinda like a password. So we should treat them as such.

    There are many ways to store and use passwords and other secrets. Here is one approach.

  7. If the site was built using Contentful to store images and other resources, avoid error messages such as “Error: Contentful space ID and access token need to be provided” by creating a new file name contentful.env in your user home folder (not in the repository) and add lines defining variables and secret values for your paid account from the contentful.com website Settings > API keys > Content management tokens. Type in a Token name. Click the copy icon. Press Done.

    CONTENTFUL_SPACE_ID="???"
CONTENTFUL_ACCESS_TOKEN="???"

  8. Load the variables into memory by opening another Terminal session and running the contentful.env file:

    chmod +x contentful.env
source ./contentful.env
echo "CONTENTFUL_SPACE_ID=\"$CONTENTFUL_SPACE_ID\""

    PROTIP: Secrets are not displayed in logs.

My leave no trace strategy

Actually, my preference is to store secrets in a secret vault within the firewall using software such as Hashicorp Vault.

That way, secrets would not be stolen if my laptop gets stolen and black hats were able to crack my laptop password.

This strategy extends to working files on GitHub and Docker Hub. Files are downloaded and then erased on my laptop.

This also keeps my laptop from being filled up with cruft that serve no useful purpose. I need free disk space for editing videos. And this minimalist approach enables me to make use of a new laptop in the minimum amount of time.

Project Folder and variables

  1. On a Terminal session, navigate to or create a working folder. I personally like to use:

    ~/projects

    However, you may prefer another folder name to separate project data from other (system) folders.

    Don’t initialize this folder with Git history because it is a working folder that will be deleted for idempotency.

  2. PROTIP: Define a variable holding the folder to be created. For example:

    WORK_FOLDER="gatsby-site"

    You may create several sites by changing this variable before downloading/building it.

  3. If the folder already exists, first remove it from a previous run, remove it :

    rm -rf "$WORK_FOLDER"

Generate Starter in Docker

My preferred approach nowadays is to define a Dockerfile to create a Docker container on my local Mac/PC for development. The container can then be put into a container repository (Docker Hub) which would be used to instantiate instances in a cloud.

The steps to install pre-requisite tools and create assets are about the same as doing it manually. But it’s more efficient to avoid doing it locally one way and then another way (in a shell script or Ansible) for production usage.

  1. Open a Terminal session on your laptop to type the steps below.

  2. Highlight the two lines below, press Ctrl+C to copy to your Clipboard, and paste onto your Terminal:

    docker run -it --rm -v $(pwd)/site:/site \
-p 8000:8000 aripalo/gatsby-docker develop

    $(pwd) is a sub-command that returns the Present Working Directory where the command was issued. (But the image Docker stores in my $HOME/.docker folder.)

    The command above retrieves a Docker image originally created by (Finnish) Ari Palo in 2018, which now seems to be obsolete.

    Image from Dockerfile

    Docker images are created using a Dockerfile. from https://github.com/aripalo/gatsby-docker

    FROM node:9.5-alpine
EXPOSE 8000
RUN apk update && \
 apk add --update --repository http://dl-3.alpinelinux.org/alpine/edge/testing vips-tools vips-dev fftw-dev gcc g++ make libc6-compat && \
 apk add git && \
 apk add python && \
 rm -rf /var/cache/apk/*
RUN npm install --global gatsby --no-optional gatsby@1.9 
RUN mkdir -p /site
WORKDIR /site
VOLUME /site
COPY ./entry.sh /
RUN chmod +x /entry.sh
ENTRYPOINT ["/entry.sh"]

    The above specifies Alpine Linux and NodeJS v9.5, yarn install v1.3.2. These are a bit behind and thus caused “error failed: yarnpkg”.

    The entry.sh shell file is also in the same GitHub as the Dockerfile. It runs build and serve as well. The Starter template it uses is:

    Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git

  3. Stage: build and serve:

    docker run -it --rm -v $(pwd)/site:/site \
-p 8000:8000 aripalo/gatsby-docker stage

  4. Build production ready site into site/public:

    docker run -it --rm -v $(pwd)/site:/site \
-p 8000:8000 aripalo/gatsby-docker build

  5. Run arbitary command inside the container:

    docker run -it --rm -v $(pwd)/site:/site \
-p 8000:8000 aripalo/gatsby-docker YOUR-COMMAND-HERE

    For example:

    To install new NPM-module “gatsby-transformer-yaml”:

    docker run -it --rm -v $(pwd)/site:/site \
aripalo/gatsby-docker yarn add gatsby-transformer-yaml

Generate Starter locally

  1. Open a Terminal session on your laptop to type the steps below.

    Install NodeJs

  2. Install NodeJs if you haven’t already. The npm and npx utilities are installed with it.

    Use Starters

  3. Back on Gatsby’s Starters page, scroll down and click “Load More”. Among notable Starters, get the GitHub or GitLab URL where the Start is located:

    gatsby new "$WORK_FOLDER" \
https://github.com/parmsang/gatsby-starter-ecommerce

    The repo includes Cypress unit tests.

    gatsby new "$WORK_FOLDER" \
https://github.com/fabe/gatsby-universal
    gatsby new "$WORK_FOLDER" \
https://github.com/ryanwiemer/gatsby-starter-gcn
    gatsby new "$WORK_FOLDER" \
https://github.com/hasura/gatsby-gitbook-starter/

  4. Navigate into the new folder created:

    ls && cd "$WORK_FOLDER" && ls

    Project root files and folders

    Unlike Jekyll, Gatsby has all configuration files at the root:

  5. Navigate into the new folder created:

    l

    File README.md contains useful reference information about the project, adapted here:

    File gatsby-config.js is the main configuration file for a Gatsby site to specify information about your site (metadata) such as site-wide title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

    File gatsby-browser.js specifies usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

    File gatsby-node.js specifies usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

    File gatsby-ssr.js specifies usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

    File LICENSE says Gatsby is licensed under the MIT license.

    File package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

    Folder fonts if the site uses custom fonts which are more stylish than the limited number of fonts that come on browsers.

    Folder static is what is published after markdown files are processed into HTML that is is then minified of white space characters.

    Folder node_modules is where all dependencies (npm packages) are downloaded and installed based on the manifest file
    file package.json which includes metadata (the project’s name, author, etc).

    File package-lock.json defines dependencies packaged.

    File env.development contains variables such as CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN. These are sensitive information. So the file needs to be specified in
    File .gitignore tells Git which files it should not track / not maintain a version history for:

    site/node_modules
site/public
site/.cache

    File .prettierrc is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

    Folder tests for testing assets.

    Folder src (for “source code”) contains the site’s content read by visitors on the “front-end” of the site (what you see in the browser) such as your site header or a page template.

    src folder contents

  6. Look into the src folder to see files and directories such as:

    tree ./src

    |-- components
|   |-- header.js
|   |-- image.js
|   |-- layout.css
|   |-- layout.js
|   |-- seo.js
|-- images
|   |-- favicon.ico
|   |-- gatsby-astronaut.png
|   |-- gatsby-icon.png
'-- pages
 |-- 404.js
 |-- index.js
 |-- page-2.js

    Folder components are the dynamic JavaScript programming code that will run on client browsers.

    PROTIP: File favicon.ico is frequently a file in the images folder because it is displayed by browers. Images in .png format are stored among other code here. But for production deployment, they are the basis for additional images generated in different screen sizes and formats (such as webp), and distributed for quick retrieval within various CDN end-points throughout the world.

    Writers of content spend almost all their time in the pages folder.

    Folder templates holds templating specifications.

    Folder styles holds CSS styling specifications.

    Folder posts holds markedown (.md) files containing content. These are converted to HTML before publishing.

    The result of index.js is shown when a visitor specifies just the domain name.

    The result of 404.js is shown when a visitor specifies a path not defined.* Advanced features include a listing of major topics (such as home, menu, contact) and presenting a search with spelling/grammar correction. The React Helmet plugin document head manager.

    run develop package.json

  7. Process the package.json file in development mode to a public folder:

    npm run develop

    This creates a folder named “public” containing compressed and minimized text files which will wait on web servers for retrieval directly by visitors. If these files are distributed in a CDN, users throughout the world (in Australia or India or Nigeria) will retrieve them very quickly.

    CAUTION: Pressing control+C would stop the running process.

  8. In a browser, view the HTML created as if you’re a customer by specifying this URL:

    http://localhost:8000/

    http:// is specified because no SSL/TLS certificate needs to be used on your local host server.

  9. Open a new Terminal Shell instance, provide the password, navigate to the folder, then test SSR (for Lighthouse etc.)

    yarn ssr

  10. View in a browser window:

    http://localhost:9000

  11. Format JS (precommit)

    yarn format

  12. Open a new Terminal Shell instance, provide the password, navigate to the folder, then generate favicons (included in build) for Android, apple, mstile (Microsoft tiles)

    yarn build:favicons

View

  1. List the files:

    ls ./public

    The folder contains:

    • index.html
    • icons folder
    • static folder
    • page-data folder
    • manifest.webmanifest

  2. Right-click on the web page to select “View page source”.

    Notice that the HTML is compressed.

  3. Back on the Terminal, press control+C to cancel.

  4. Create files in production mode:

    npm run serve

  5. In a browser, view the HTML created as if you’re a customer by specifying this URL:

    http://localhost:9000/

    Clean-up

  6. When done, on a Terminal session, remove the work folder:

    cd ~/projects
rm -rf "$WORK_REPO"

Source

  1. View https://github.com/gatsbyjs/gatsby where the framework is open-sourced.

    https://github.com/gatsbyjs/rfcs/pulls contains Requests for Comment (RFCs) on major spikes.

  2. Among repositories under the gatsbyjs account is:

    https://github.com/gatsbyjs/gatsby-starter-hello-world Starter with the bare essentials needed for a Gatsby site https://gatsby-starter-blog-demo.netlify.com/

    https://github.com/gatsbyjs/gatsby-starter-blog Gatsby starter for creating a blog, which displays text “Hello world!”. https://gatsby-starter-hello-world-demo.netlify.com/

    https://github.com/gatsbyjs/gatsby-starter-default The default Gatsby starter https://gatsbyjs.github.io/gatsby-starter-default/

Installing Gatsby locally

  1. Install the gatsby-cli from NPM globally (for access from any folder):

    npm install -g gatsby-cli</pre>

(-g is the same as --global)

Alternately, you may want to install a specific version that your course uses, such as:


    npm install -g gatsby-cli@2.4.5

  2. Get a summary of commands:

    gatsby --help

  3. Get the environment that Gatsby recognizes:

    gatsby info

    Python 2.7.10?

    Note that although the installer is named “gatsby-cli”, the command is “gatsby” (without the “-cli”).

Installing Gatsby locally

  1. To covert markdown to HTML presented on visitors’ browsers:

    gatsby build

    This also creates a folder named “public” containing compressed and minimized text files which will wait on web servers for retrieval directly by visitors. If these files are distributed in a CDN, users throughout the world (in Australia or India or Nigeria) will retrieve them very quickly.

  2. View as if you’re a customer by specifying this URL:

    http://localhost:8000/

    http:// is specified because no SSL/TLS certificate needs to be used on your local host server.

  3. Get the GraphQL menu to query metadata underlying the website:*

    http://localhost:8000/___graphql

  4. To …

    gatsby serve

  1. Create/Edit gatsby-config.js</strong> to specify the title, description of your blog:*

    module.exports = {
   siteMetadata: {
      title: 'My Blog'
      description: 'This is my cool blog.',
      author: '@gatsbyjs'
   }
},
plugins: {
   resolve: 'gatsby-source-filesystem',
   options: {
      name: 'pages',
      path: '${__dirname}/src/pages'
   }
    gatsby-transformer-sharp,
 gatsby-plugin-sharp,
 {
   resolve: gatsby-plugin-manifest,
   options: {
     name: gatsby-starter-default,
     short_name: starter,
     start_url: '/',
     background_color: '#663399',
     theme_color: '#663399',
     display: 'minimal-ui',
     icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
   },
 },
 // this (optional) plugin enables Progressive Web App + Offline functionality
 // To learn more, visit: https://gatsby.dev/offline
 // gatsby-plugin-offline,
  ],
}

</pre>

Generate basic

  1. On a Terminal session, use npx to download the gatsby cli program for temporary use:

    WORK_REPO="gatsby-site"
npx gatsby new "$WORK_REPO"

    The response is:

    Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git

Host on surge.sh (for free)

  1. View https://surge.sh hosts sites for free.*

  2. Install the component:

    npm install --global surge

  3. In the folder containing your assets:

    surge

    If you don’t already have an account with them, you will be prompted to create one with your email address and password.

  4. Confirm the complete path starting from “/Users/…” (on a Mac) and ending with “public”.

  5. Provide a domain that ends with “.surge.sh”, so this need NOT be one registered (for money) with a domain registrar such as NameCheap, Google Domains, GoDaddy.

Host on Docker install

  1. View https://github.com/gatsbyjs/gatsby-docker (with an NGINX web server) which you can run on AWS and other clouds at scale.

Plugin to convert markdown to HTML

Gatsby has a data plugin ecosystem can pull data using GraphQL from traditional CMSs (Contentful, Drupal, WordPress, Rails, Express, etc.), SaaS services (Shopify), APIs, databases, your file system, and more directly into your pages .

AWS Amplify, Netlify, GitHub Pages, Surge.sh, Aerobatic, Now.sh & many more

  • https://docs.amplify.aws/lib/auth/getting-started/q/platform/js

Security

https://bejamas.io/blog/content-security-policy-gatsby-websites/

Markdown Conversion from Jekyll Markdown

Write JavaScript

Nested layouts

https://www.gatsbyjs.org/tutorial/part-three/

Migrate from Jekyll

From https://www.gatsbyjs.com/blog/2017-11-08-migrate-from-jekyll-to-gatsby/

gatsby-flow-1138x418

<a name=”Resources></a>

Resources

Video and text, and rock stars talking:

Video course: build from scratch

Andrew Mead (@andrew_j_mead, mead.io) recorded his “The Great Gatsby Bootcamp” YouTube video in 5 continuous hours, with no closed captioning and code in https://gist.github.com/andrewjmead. https://www.freecodecamp.org/news/great-gatsby-bootcamp lists topics toward building a website from scratch, with challenges:

  1. [0:00] How to create a Gatsby Site
  2. Working with Gatsby Pages</a>
  3. [27:06] Linking Between Pages with Gatsby
  4. [35:59] Creating Shared Page Components
  5. [48:17] Creating Gatsby Page Layouts
  6. [56:15] Styling Gatsby Projects, https://www.gatsby.org/packages/gatsby-plugin-saas/?=sass
 <pre>node install gatsby-plugin-sass  node-sass</pre>
  1. [1:06:51] Styling Gatsby with CSS Modules
  2. [1:28:25] Gatsby Data with GraphQL
  3. [1:47:14] GraphQL Playground env.development
  4. [1:51:34] Sourcing Content from the File System
  <a target="_blank" href="https://www.gatsby.org/packages/gatsby-source-filesystem/?=source-filesystem">https://www.gatsby.org/packages/gatsby-source-filesystem/?=source-filesystem</a>
  1. [2:03:39]Working with Markdown Posts
  2. [2:19:01]Generating Slugs for Posts
  <a target="_blank" href="https://www.gatsbyjs.org/docs/node-apis/#onCreateNode">https://www.gatsbyjs.org/docs/node-apis/#onCreateNode</a>
  1. [2:35:17] Dynamically Generating Pages
  2. [2:52:10] Rendering Post Data in Blog Template
  3. [3:03:31] Adding Images to Posts
  <a target="_blank" href="https://www.gatsby.org/packages/gatsby-remark-relative-images/">https://www.gatsby.org/packages/gatsby-remark-relative-images</a>
  1. [3:21:22] Getting Started with Contentful
  2. [3:38:32] Rendering Contentful Posts
  <a target="_blank" href="https://momentjs.com/docs/#/displaying/">https://momentjs.com/docs/#/displaying/</a> listing date formats
  1. [3:49:26] Dynamic Pages from Contentful
  2. [4:10:21] 404 Pages and React Helmet
  <pre>npm i gatsby-plugin-react-helmet@3.0.12  react-helmet@5.2.0</pre>
  1. [4:25:30] Deploying Your Gatsby Site to Netlify

(Bostonian) Brad Traversy, a prolific developer of beginner developers on Udemy, is famous for his Web Development In 2019 - A Practical Guide. He released Gatsby JS Crash video on YouTube on Apr 12, 2018 [1:04:33] referencing https://github.com/bradtraversy/gatsby_crash_course which has a “Deploy to Netlify” button for sample code. Very code-centric. It mentions adding keyboard shortcuts for ES7 React in VSCode.

Marcelo Pastorino (@evangeloper), released on Feb 27, 2019 the 2h Pluralsight video course GatsbyJS: Getting Started. It makes use of gatsby-cli 2.4.5.

Taylor Bell has a video course “Build a Blog with React and Markdown using Gatsby” on Egghead.io

John Smilga <a target=”_blank” href=”https://www.udemy.com/gatsby-tutorial-and-projects-course/ Gatsby Tutorial and Projects Course”</a> updated 7/2019 consists of 37 hours of video, which overlap in:

  • Backroads project using many features
  • Blog project with MDX
  • Coffee Shop project with Boostrap and Snipcart
  • Restaurant with styled components

Tom Phillips Gatsby JS: Build static sites with React Wordpress & GraphQL updated 5/2019 consists of 4 hours of video.

Reed Barger’s “The Gatsby Masterclass” updated 4/2019 consists of 4 hours of video includes how to authenticate users.

Jason Lengstorf (@jlengstorf) works at Gatsby and saves videos from Twitch sessions with others:

William Imoh (@iChuloo)

LinkedIn Learning (Lynda)?

Text-based resources

https://www.sitepoint.com/how-to-build-your-first-static-site-with-gatsby/

https://codeburst.io/build-a-blog-using-gatsby-js-react-8561bfe8fc91

https://www.freecodecamp.org/news/how-to-build-a-react-and-gatsby-powered-blog-in-about-10-minutes-625c35c06481/ for ver 1

https://www.freecodecamp.org/news/how-i-made-my-portfolio-website-blazing-fast-with-gatsby-82ccddc2f671/ by Maribel Duran

https://medium.com/@muntasirjoarder/24-steps-to-convert-bootstrap-website-to-blazing-fast-gatsby-website-2f2cd83bfb25 Jan 21, 2019

Rock Stars

YouTube videos of Gatsby Days speakers

Kyle Mathews, co-founder of Gatsby

  • https://www.youtube.com/watch?v=QQZDr_RiiTg

Marcy Sutton, Head of Learning at Gatsby.js

  • https://frontendmasters.com/workshops/javascript-accessibility/
  • https://vimeo.com/118697675

Jim Ambras, Sr. Technical Trainer, Contentful

Store

Get Gatsby swag at store.gatsby.org. It was built using Shopify and Auth0 through routers.

  • https://github.com/gatsbyjs/store.gatsbyjs.org

  • https://github.com/gatsbyjs/api.gatsbyjs.org
  • https://github.com/jlengstorf/gatsby-with-apollo (https://www.apollographql.com/)

More on front-end software development

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML

  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)

  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development

  12. Gatsby app generator

  13. Website styles
  14. Website Styling

  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites

  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau

LevelUpTuts: GatsbyJS Tutorials #1 - Getting Started with Gatsby Aug 7, 2017.

GatsbyJs (JAM Stack web app generator) was published on .