​​Preparation
​​Followup
  • ​​What is Gatsby
  • ​​Prepare a list of links
  • ​​put gatsby-cli installation script
  • ​​yarn or npm
  • ​​create a slide for each command I run and check for progress
  • ​​Prepare a preworkshop material
​​

​​Introduction

​​Curriculum

​​A hands-on workshop on Gatsby led by thoughts of “how to create static site for my need” with Gatsby, React, and GraphQL.
​​
​​Topics by segment
  1. ​​Introduction
  1. ​​(5 mins) Preface
  1. ​​(15 mins) What is gatsby ​+Starters and Plugins​ 
  1. ​​(15 ~ 20 mins) ​+Up and Running​
  1. ​​(20 mins) ​+Layouts​ (overview)
  1. ​​(just in case people don’t know React, add a short intro props => <div>{props.a}</div>​
  1. ​​Adding a header to site layout
  1. ​​Adding an Intro component to layout
  1. ​​(30 mins) ​+Building Features with GraphQL​ 
  1. ​​(10 mins break)
  1. ​​(30 mins) Styling
  1. ​​(20 mins) ​+Typography​, introduce Gatsby Themes (experimental)?
  1. ​​(10 mins) ​+Reaches: SEO, GA, and Deployment with Netlify​ 
  1. ​​Demo the site
  1. ​​Plugins
  1. ​​oembed
  1. ​​Google Analytics
  1. ​​(10 mins) ​+Community​ 
​​
​​Optional topics
  • ​​dark themes
​​

​​Prerequisite

  • ​​Basics web development skills: HTML and CSS
  • ​​Knowledge of React

​​Instructor

​​Wei Gao
​​React web developer, loves to build stuff on the web. Struggling with but advocating public speaking as a learning process through running React Knowledgeable. Wei has created a handful of static sites using Gatsby, Jekyll / GitHub pages, and plain JavaScript, HTML, and CSS. She will share with you her learning process as much as hoping to learn from you.
​​
​​
​​

​​Checklist

  • ​​send out survey
  • ​​slides
  • ​​code examples

​​