GatsbyJSハンズオン資料

2019/01/08にサポーターズで行われる『Gatsbyで今風ウェブサイトの開発ハンズオン』のハンズオン資料です。

スライド

各種リンク

• CodeSandbox
• Netlify

Reactのおさらい

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./Hello";

import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Hello name="an" />
      <Hello name="en" />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";

const Hello = props => {
  return <p>Hello {props.name}</p>;
};

export default Hello;

Gatsby入門

https://codesandbox.io/s/vvx7w5q2oy

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: 'gatsby-source-rss-feed',
      options: {
        name: 'BlogPost',
        url: 'https://mottox2.com/rss.xml',
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `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.app/offline
    // 'gatsby-plugin-offline',
  ],
}

const path = require('path')

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const post = path.resolve('./src/templates/post.js')
  return graphql(`
    {
      allFeedBlogPost {
        edges {
          node {
            guid
          }
        }
      }
    }
  `).then(result => {
    console.log(result.data.allFeedBlogPost.edges)
    result.data.allFeedBlogPost.edges.forEach(post => {
      createPage({
        path: `/stories/${post.guid}`,
        component: post,
        context: {
          guid: post.guid
        }
      })
    })
  })
}

import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout'

export default props => (
  <Layout>
    {props.data.allFeedBlogPost.edges.map(edge => {
      const post = edge.node
      return (
        <p key={post.guid}>
          <Link to={`/posts/${post.guid}`}>
            {post.title}
          </Link>
        </p>
      )
    })}
  </Layout>
)

export const query = graphql`
  {
    allFeedBlogPost {
      edges {
        node {
          guid
          title
        }
      }
    }
  }
`

import React from 'react'
import { graphql } from 'gatsby'

export default props => {
  const post = props.data.feedBlogPost
  return (
    <div>
      <p>{post.title}</p>
      <div
        dangerouslySetInnerHTML={{
          __html: post.content.replace('\n', '<br/>'),
        }}
      />
    </div>
  )
}

export const query = graphql`
  query($guid: String!) {
    feedBlogPost(guid: { eq: $guid }) {
      title
      content
    }
  }
`