Gatsby 사이트에 DEV 게시물을 쉽게 추가

gatsby new mysite
cd ./mysite

npm i

npm i -S dotenv gatsby-source-mydev

touch .env

DEV_API_KEY=MYAPIKEYXXXXX

// In your gatsby-config.js
require('dotenv').config();

module.exports = {
  plugins: [
    // ...
    {
      resolve: `gatsby-source-mydev`,
      options: {
        apiKey: process.env.DEV_API_KEY,
      },
    },
  ],
}

npm start

Note: Your .env file should always be in .gitignore then it contains confidetial information that should not be comitted.

각 기사에 대한 페이지 만들기

touch src/templates/blog.js

npm i -S react-markdown

import React from "react"
import ReactMarkdown from "react-markdown"

import Layout from "../components/layout"
import SEO from "../components/seo"

export default function Template({
  pageContext, // this prop will be injected by the GraphQL query below.
}) {
  const { article } = pageContext // data holds your post data
  return (
    <Layout>
        <SEO title={article.title} />
        <div className="blog-post-container">
            <div className="blog-post">
                <h1>{article.title}</h1>
                <h2>{article.published_at}</h2>
                <ReactMarkdown>{article.body_markdown}</ReactMarkdown>
            </div>
        </div>
    </Layout>
  )
}

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/node-apis/
 */

// You can delete this file if you're not using it

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions
    const blogPostTemplate = require.resolve(`./src/templates/blog.js`)
    const result = await graphql(`
        query {
            allMyDev {
            nodes {
                article {
                body_markdown
                canonical_url
                comments_count
                cover_image
                description
                id
                page_views_count
                path
                positive_reactions_count
                public_reactions_count
                published
                published_at
                published_timestamp
                slug
                tag_list
                title
                type_of
                url
                user {
                    github_username
                    name
                    profile_image
                    profile_image_90
                    twitter_username
                    username
                    website_url
                }
                }
            }
            }
      }
    `)
    // Handle errors
    if (result.errors) {
      reporter.panicOnBuild(`Error while running GraphQL query.`)
      return
    }
    result.data.allMyDev.nodes.forEach(({ article }) => {
      createPage({
        path: `blog/${article.slug}`,
        component: blogPostTemplate,
        context: {
            article: article
        },
      })
    })
}

Note: Replace article-slug by the slug of an article. The easiest way to find an article's slug is to go to your dev.to article and to copy paste the end of the url: