/gatsby-workshop

💻 Gatsby workshop for Developers' Gym

Primary LanguageJavaScriptMIT LicenseMIT

This repo contains a sample site built for a Gatsby workshop, README and links to materials we prepared for this workshop.

Held in:

Up and running

$ git clone git@github.com:JuniorDevSingapore/gatsby-workshop.git
$ yarn
$ yarn dev

Alternatively,

$ git clone git@github.com:JuniorDevSingapore/gatsby-workshop.git
$ npm install
$ npm run develop

Adding your post

  • Add your post under directory content/directory-to-your-post/
  • If it is your first post, add your profile info inside content/author.yaml. Note that the name you put for author under your post's front matter should match id in the details you put in the YAML file.
- id: Curious Cat # should match `author` in your post's frontmatter author
  bio: Very curious about this world and blogging whenever learned something new
  twitter: nonexistencecuriouscat

Workshop content

Design intention

The audience of our workshop is mainly junior developers (see reference above). The workshop does not assume extensive knowledge about React nor GraphQL. We hope to get people's hands on starting to their blog site.

The design intention is to lead by task instead of by chapters of Gatsby's official documentation. For example, "build a blog site", "add a night theme toggle to my blog", "introduce time to read to my blog posts", "load static asset with GraphQL", etc. Although eventually a lot of the flow align.

We hope to build each chunk of the material in forms of lightning talks. Then we'd pause, check everyone's progress, and move on to the next. Each chunk shall be self-inclusive.

Materials

The whole slides and workshop content are composed and revised in public. You may view the slides, press S for speaker notes. However, later on I put more of the notes in the following Dropbox Paper files.

This section is a serious work in progress.

  • Slides
  • Preparation materials
    • Preface This one is rather personal, but you may use it anyway
    • Introduction Covers what is Gatsby, static site generators, JAMStack concept, Gatsby Starters, Gatsby Plugins, and a peak into Gatsby Themes.
    • Up and Running Setting up environment, get site running with Gatsby Advanced Starter. Introduces Gatsby CLI, Gatsby Config, Gatsby Node APIs.
    • Layouts Writing and using a Layout. Introduces React's mindset if people are not familiar.
      • Organization of src/
      • Building layouts with React
    • Queries Introduces GraphQL, how Gatsby handles queries for data and static assets.
      • Intro to GraphQL
      • Customizing queries
      • Querying static assets, optimization by Gatsby with Sharp
      • (Optional) Adding a util field for posts
    • Styling Go over choices of styling. But for this workshop we use SASS with CSS modules.
      • Options for styling
      • Styling with SASS and CSS Modules
      • Basic typesetting for the site
      • Building a night theme
      • (Optional) Building the night theme with React hooks
    • Typography (shared link as above) Introduces styling the site using a TypographyJS theme and customizing it.
      • Using a TypographyJS theme
      • Customizing the TypographyJS theme
      • (Optional) Writing your own TypographyJS theme
      • (Optional) Vertical rhythm
    • APIs Introduces a few third party libraries.
      • OEMBED
    • Reaches Materials (reference) and demos about reaching audience
      • SEO
      • Google Analytics
      • Deployment with Netlify
    • Community Refer people to communities and future contributions
      • Where to get help
      • Encouraging people to contribute
      • Pair programming
  • List of extra things remember to do
    • Demo the site we created, introduce people to more possibilities

Contributing

Contributions to this repo are welcome and much appreciated!