draft: organization



Hi, I'm Wei



Nut πŸ‡ΉπŸ‡­
draft: preface
I like to have full control over the experience.

Add bento


export function formatReadingTime(minutes) { 
  let cups = Math.round(minutes / 5); 
  let bowls = 0; 
  if (cups > 5) { 
    return `${new Array(Math.round(cups / Math.E)) 
      .join('')} ${minutes} min read`; 
  } else { 
    return `${new Array(cups || 1)
      .join('')} ${minutes} min read`; 



draft: what is gatsby

What is Gatsby

Static Site Generator

Content pages are pre-built instead of requested from and generated by a server.

based on React + GraphQL

  • Layout, templates, and reusable UI parts are all React components.
  • GraphQL manages all the data and asset queries

original tweet
My website is faster than yours.
Built for the next billion users.
Flexible with the content mesh.

Building Blocks


draft: up and running

Up and running

Environment dependencies


$ npm install -g gatsby-cli
$ gatsby --version

Gatsby CLI commands

$ gatsby new name-of-your-site url-to-starter # defaults to gatsby-starter-default
$ gatsby develop  # starts a hot reload server
$ gatsby build  # may be run by your deployment service
$ gatsby serve  # serves production build

Setting up the site


$ gatsby new anyhowly-rocks

$ cd anyhowly-rocks
$ gatsby develop

Package structure

$ tree -L 1 # trimmed 
β”œβ”€β”€ content # blog posts in md
β”œβ”€β”€ data # meta data about the site
β”œβ”€β”€ gatsby-config.js # configurations for gatsby site gen
β”œβ”€β”€ gatsby-node.js # page generation
β”œβ”€β”€ public
β”œβ”€β”€ src
└── static


Gatsby Config


Gatsby Node APIs

Learn more at Gatsby's API Reference

  • gatsby-config.js
  • gatsby-node.js
  • gatsby-browser.js
  • gatsby-ssr.js


draft: layouts


$ tree src -L 2
β”œβ”€β”€ components
β”‚Β Β  β”œβ”€β”€ About
β”‚Β Β  β”œβ”€β”€ Disqus
β”‚Β Β  β”œβ”€β”€ Footer
β”‚Β Β  β”œβ”€β”€ PostListing
β”‚Β Β  β”œβ”€β”€ PostTags
β”‚Β Β  β”œβ”€β”€ SEO
β”‚Β Β  β”œβ”€β”€ SocialLinks
β”‚Β Β  β”œβ”€β”€ UserInfo
β”‚Β Β  └── UserLinks
β”œβ”€β”€ favicon.png -> ../static/logos/logo-48.png
β”œβ”€β”€ layout
β”‚Β Β  β”œβ”€β”€ index.css
β”‚Β Β  └── index.jsx
β”œβ”€β”€ pages
β”‚Β Β  β”œβ”€β”€ about.jsx
β”‚Β Β  └── index.jsx
└── templates
    β”œβ”€β”€ b16-tomorrow-dark.css
    β”œβ”€β”€ category.jsx
    β”œβ”€β”€ post.css
    β”œβ”€β”€ post.jsx
    └── tag.jsx


Gatsby core automatically turns React components in src/pages into pages

Create a new page under src/Pages/

// anyhowly.jsx
import React from "react";
export default () => 

Page Layout

// src/layout/index.jsx

export default class MainLayout extends React.Component {
  render() {
    const { children } = this.props;
    return (
); } }

Add a header to layout

Use layout at custom page

Add an intro to layout

Go to post listing component


Blog Queries

assets optimization


GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

Query Language

Rest API

Rest API v.s. GraphQL

Rest API

GET /users/420
GET /users/420/posts
GET /posts/132
GET /posts/132/comments

user(id: $userId) {
  posts {
    author {
    comments {
      author {


Add excerpt to post listing

Customize GraphQL query

Querying static assets


  • gatsby-image
  • gatsby-transformer-sharp
  • gatsby-plugin-sharp

// gatsby-config.js

plugins: [
  // ...

export const query = graphql`
query IndexQuery {
  allMarkdownRemark() {
    # ... other queries
  file(relativePath: { eq: "logos/logo-1024.png" }) {
    childImageSharp {
      fixed(width: 125, height: 125) {


draft: styling


  • Plain CSS
  • Sass / Less
  • CSS Modules
  • CSS-in-JS

Using SASS with Gatsby


$ yarn add sass gatsby-plugin-sass
$ # or
$ npm install --save sass gatsby-plugin-sass

// in gatsby-config.js
plugins: [
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),

CSS Modules

CSS Modules is a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped.

Using CSS Modules with Gatsby

Add styling to layout

  • Container max-width
  • Font for headings

Pause to add more styling

Using a style guide

Style Guide from Huijing's site

Markdown Post

"Dark Mode" 🌚🌝




Although many books define the purpose of typography as enhancing the readability of the written word, one of design’s most humane functions is, in actuality, to help readers avoid reading.
A Type Primer by John Kane


  • A selection of existing typography themes
  • Highly customizable


$ yarn add gatsby-plugin-typography react-typography typography
$ # or
$ npm install --save gatsby-plugin-typography react-typography typography


// gatsby-config.js

plugins: [
  // ... other plugins
    resolve: `gatsby-plugin-typography`,
    options: {
      pathToConfigModule: `src/utils/typography`

Using an existing theme

Browse at Typography.js's demo site

// src/utils/typography.js

import Typography from "typography";
import themeElkGlen from "typography-theme-elk-glen"; // need to add dependency
export default new Typography(themeElkGlen);
Restart dev server if haven't.

Customizing Typographyjs theme

// src/utils/typography.js

import Typography from "typography";

themeElkGlen.overrideThemeStyles = ({ rhythm }, options) => ({
  'h1': {
    marginBottom: rhythm(1/2),
    marginTop: rhythm(2),
export default new Typography(AnyhowlyRocksTheme);
TypographJS API docs

Setting Baselines

  • baseFontSize
  • baseLineHeight
  • scaleRatio

Google Fonts

googleFonts: [
    name: "Bevan",
    styles: ["400"]
headerFontFamily: ["Bevan", "Futura", "sans-serif"],
More Options

Style picker tool at demo site


Imperative API for directly adding to or overriding auto-generated styles. It’s called with a Vertical Rhythm object, the options object, and the algorithmically generated styles.

overrideStyles: () => ({
  "*": {
    background: "#222",
    color: "#eee"
  "@media and (min-width: 35rem)": {
    maxWidth: "35rem"
  "blockquote > :last-child": {
    marginBottom: 0,

Vertical Rhythm

Compass Vertical Rhythm

overrideThemeStyles: ({ rhythm, adjustFontSizeTo }, options, styles) => ({
  'h2,h3': {
    marginBottom: rhythm(1/2),
    marginTop: rhythm(2),
  blockquote: {
    color: gray(41),
    fontStyle: 'italic',
    paddingLeft: rhythm(13/16),
    marginLeft: rhythm(-1),
    borderLeft: `${rhythm(3/16)} solid ${gray(10)}`,



  • Source: gatsby-source-*,
  • Transformer: gatsby-transformer-*,
  • Helpers: gatsby-[plugin-name]-*,
  • Others: gatsby-plugin-*,

what type are the following plugins

  • gatsby-source-filesystem
  • gatsby-transformer-remark
  • gatsby-plugin-web-font-loader
  • gatsby-remark-oembed

RSS Feed

Embedding Instagram Post πŸ™ˆ

We need gatsby-remark-oembed



$ yarn add @raae/gatsby-remark-oembed 
$ # or
$ npm install @raae/gatsby-remark-oembed

// gatsby-config.js
plugins: [
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
          resolve: `@raae/gatsby-remark-oembed`,
          options: {
            // ... next slide

  resolve: `@raae/gatsby-remark-oembed`,
  options: {
    // defaults to false
    usePrefix: true,
    providers: {
      include: [
      settings: {
        // Ex. Show all Twitter embeds with the dark theme
        Twitter: { theme: 'dark' },
        // Ex. Hide all Instagram comments by default
        Instagram: { hidecaption: true },

# in your post markdown file


draft: reaches


Google Analytics


Putting SEO First with Gatsby

Deploy with Netlify

Site demo

draft: community


In our community

Getting help


Do chefs

cook at home?

After cooking non-stop for 10/15 hours per day, the last thing you want to do as home is cook your own meal.
A Quora Answer
Waking up to a healthy breakfast of #puffedrice #chiaseeds #figs #grapes and #yogurt :))))
We eat well at home. But that's not because Rene cooks. I cook.
(quote not exact, taken out from Rene's episode of Chef's Table) Nadine Levy Redzepi, cookbook author, wife of Rene Redzepi, Danish chef and co-owner of a Michelin 2-star restaurant


create some nonsense this weekend❣️