getting started with gatsby

npm install --global gatsby-cli

gatsby new <projectName>

gatsby develop

gatesby files overview

for site configuration gatsby-config.js

adding plugin and using sass

plugin authoring system - important for naming convetion
plugin library
import scss file instead of .css file

npm install --save gatsby-plugin-sass

// in gatsby-config.js
plugins: [`gatsby-plugin-sass`]

// or 

plugins: [
  {
    resolve: 'gatsby-plugin-sass',
    options: {
      precision: 8
    }
  }
]

blog with markdown

gatsby-source-filesystem

plugins: [
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/src/pages`,
      name:'pages'
    }
  },
  'gatsby-transformer-remark'
]

gatsby-transformer-remark

// pages/08-10-2018/index.js
---
path: '/first-post',
title: 'First Blog post'
---
# Hello

// src/templates/post.js
import React from 'react';
import Helmet from 'react-helmet';
export default function Template({data}) {
  const {markdownRemark: post} = data // const post = data.markdownRemark
  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
    </div>
    )
}

export const postQuery = graphql`
  query BlogPostByPath($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html 
      frontmatter {
        path
        title
      }
    }
  }
`

blog with markdown 2

// gatsby-node.js
const path = require('path');

export.createPages = ({boundActionCreators, graphql}) => {
  const {createPage} = boundActionCreators;
  const postTemplate = path.resolve('src/template/post.js');
  return graphql(`{
    allMarkdownRemark{
      edges {
        node {
          html
          id 
          frontmatter {
            path
            title
          }
        }
      }
    }
    }`).then(res => {
      if (res.errors) {
        return Promise.reject(res.errors);
      }
      return res.data.allMarkdownRemark.edges.forEach(({node}) =>{
        createPage({
          path: node.frontmatter.path,
          component:  postTemplate
          })
        }) 
      })
}