개츠비를 사용하기 시작하다

나는 게이츠비에 대해 한동안 궁금했다.JAMSTACK(JavaScript, API 및 프리젠테이션 태그)과 정적 사이트 생성기를 들어본 적이 있습니다.나는 egghead.io에서 개츠비 과정을 하나 절약했다. 어느 날 나는 내가 건설하고 있는 보조 프로젝트가 아마도 그것을 사용하기에 좋은 사람일 것이라고 결정했다.그래서 지금보다 더 좋은 시간은 없다.

동영상 튜토리얼이 좋은 출발점이에요.

저는 개인적으로 동영상 강좌의 팬입니다. 저는 시각 학습자입니다. 저는 사람들이 만든 것을 보는 것을 좋아합니다.나는 Build a Blog With React and Markdown를 보고 이 모든 것이 얼마나 단도직입적이고 간단해 보이는지 놀랐다.약 1년 전에 게이츠비를 사용했지만 반응에 대한 경험이 없었다.나는 이 모든 것이 어떻게 작동하는지에 대해 상당히 곤혹스러웠다.
이제 반응 훈련을 받았으니 다시 시도해 볼 때가 된 것 같다.'책벌레'시리즈와 a 시리즈를 보고 게이츠비를 어떻게 사용하는지 더 잘 이해하기 위해 시작할 때가 됐다고 생각합니다.사람들이 자신의 블로그를 어떻게 시도하고 유지해야 하는지에 관한 글을 읽은 후 이 결정은 매우 명확하다.블로그를 만들어라!게이츠비에게 통제받는 느낌을 주고 나에게 유익한 것들을 주는 완벽한 방법이 될 것이다.

Gatsby CLI를 사용하여 웹 사이트 개발

이것은 내가 만난 가장 간단한 설정 중의 하나다.
• CLI 설치
• 새 웹 사이트 만들기
• 새로 만든 사이트 폴더로 이동
• 개츠비 사이트 개발.
기술 지침:
터미널에서 npm install -g gatsby-cli를 실행하여 CLI를 설치합니다.그리고 gatsby new gatsby-site를 실행하고 원하는 폴더 이름으로'개츠비 사이트'를 바꾸세요.폴더를 만든 후 디렉토리를 변경하여 새로 만든 폴더로 이동합니다.그리고 실행할 수 있습니다 gatsby develop. 게이츠비는 개발 서버를 시작할 것입니다. 이 서버는 다시 불러올 수 있고 localhost:8000 접근할 수 있습니다.
이 설명을 따라 게이츠비 사이트가 시작되고 실행되었습니다.만약 당신이 이미 기본적인React 응용 프로그램create-react-app을 만들었다면, 이것은 당신을 매우 익숙하게 느끼게 할 것이다.개츠비는 리액트 앱과 매우 다르게 설정돼 있어 특수 처리가 필요하다.
게이츠비에서 두 개의 중요한 문서가 당신 사이트의 각 방면을 통제하고 있다.내가 묘사하고자 하는 두 가지는 gatsby-config.js와 gatsby-node.js이다.일반 사이트와 달리 이 두 파일은 사이트의 핵심과 영혼이다.설정은 파일과 플러그인에 대한 접근을 제어하고, 노드는 페이지의 생성을 제어합니다.

게이츠비.js

이것은 당신의 사이트 설정입니다. 놀랍게도 당신의 사이트는 방치될 것입니다.
이 페이지에서 사용하는 옵션은 사이트메타데이터와 플러그인입니다.아직 제가 이용하지 못한 것도 있어요configuration options

사이트 메타데이터

  siteMetadata: {
    title: `Tori Pugh`,
    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`,
    menuLinks: [
      {
        name: 'Work',
        link: '/work'
      },
      {
        name: 'About',
        link: '/about'
      },
      {
        name: 'Contact',
        link: '/contact'
      },
      {
        name: 'Blog',
        link: '/blog'
      }
    ]
  }

사이트 전체의 데이터를 포함하는 객체이므로 일관성을 유지하십시오.이것은 사이트 이름, 메뉴, 또는 당신이 한 페이지에서 다른 페이지로 이동하는 데 사용하는 것일 수도 있습니다.

플러그 인

plugins: [
    `gatsby-transformer-json`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `project`,
        path: `${__dirname}/src/data`
      }
    },
  ]

플러그인은 이름만 표시하거나 일부 플러그인을 선택할 수 있습니다.만약 그것이 옵션을 사용한다면, 대상 형식을 사용해서 열거된 이름으로 해석하고, 다음에 옵션 대상을 따라야 한다.

게이츠비 노드.js

이것이 게이츠비 노드 API의 예상 용도입니다.내가 배운 파일의 가장 중요한 부분은 구축 과정에서 새 페이지를 만드는 데 createPages를 사용하는 것이다.
CreatePages의 작업 원리는GraphQL 모드를 사용하고 이 모드를 사용하여 일부 데이터를 인용하고 조회하는 것이다.쿼리의 데이터는 함수에서 페이지를 만드는 데 사용할 수 있습니다.

  workPages: allMarkdownRemark(sort: {fields: frontmatter___role}, filter: {frontmatter: {client: {regex: ""}}}) {
    edges {
      node {
        frontmatter {
          title
          path
          client
          github
          draft
          description
          deliverable
          role
          project_description
          url
        }
        html
      }
    }
  }

이GraphQL 조회는 나의 모든 작업 항목을 찾을 수 있으며, 그룹 형식으로 되돌려줍니다.그리고 이 그룹을 가져와서 순환시키고, 그룹의 모든 항목에 페이지를 만들 것입니다.

    res.data.workPages.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: workTemplate,
      })
    })

리소스:
Gatsby Node APIs
Gatsby Tutorial Part Seven - Programmatically create pages from data
- 우리는 1부를 보고 이 부분의 기초를 알아야 한다.

페이지 폴더

개츠비는 src/pages 폴더에 생성된 모든 React 구성 요소에 페이지를 자동으로 생성합니다.설정한 후 초기 페이지는 - 인덱스여야 합니다.js, 2페이지.js,404.js.이 파일들의 내용을 변경하면 웹 사이트의 페이지를 변경하고, 새로운React 구성 요소를 추가하면 자동으로 페이지를 생성합니다.
새 페이지의 예다음 코드를 사용하여 새 파일을 만듭니다 src/pages/about.js.

  import React from "react"
  const AboutPage = () => (
    <main>
      <h1>About the Author</h1>
      <p>Welcome to my Gatsby site.</p>
    </main>
  )
  export default AboutPage

위 코드와 같은 간단한 것은 게이츠비에 새로운 페이지를 만들 수 있다.그리고 나서 localhost:8000/about 로 가서 새 페이지를 볼 수 있습니다.
Creating Pages Automatically

너 여기서 출발했니

게이츠비의 사이트를 현지에서 운영하기 위해서는 최소한의 수준에 불과하다.다음에 어떻게 해야 하는지 알고 새 페이지를 자동으로 만들거나 동적으로 만들기;GraphQL을 통해 어떤 방식으로 데이터를 사용하기;또는 다른 플러그인과 옵션을 사용하여 웹 사이트/응용 프로그램의 운영 방식을 바꾸면 마음대로 할 수 있습니다.
나는 내가 업무 블로그를 만드는 더 많은 절차를 기록한 후에 이 블로그를 완전한 사이트로 전환할 것이다.이것은 결코 상세하고 남김이 없다. 왜냐하면 나는 게이츠비를 완전히 이해하지 못하기 때문이다.나는 단지 내가 게이츠비에서 겪은 경험을 나누고 있을 뿐이다.

리소스

Gatsby website 내가 본 것 중에 가장 좋은 문서가 있다.많은 경우에 나는 어떤 일을 어떻게 해야 할지 막막하다. 나는 단지 그들의 교과서에 따라 혹은 그들의 대량의 문서를 읽을 뿐이다. 결국 나는 그것을 정리할 수 있다.
Gatsby Docs
Gatsby Reference Guides
Gatsby API Reference
Gatsby Recipes