Gatsby 연관 site

1. https://www.gatsbyjs.com/

The Fastest Frontend for the Headless Web | Gatsby

static website 개설을 간편하게 해주는 개츠비 웹사이트로 React JS를 사용하여 사이트를 구현할 수 있다.

gatsby-graphql 을 통해 props를 살펴보는 기능도 편리하다.

 

2. https://picocss.com/docs/

Documentation

피코 사이트는 css 를 간편하게 꾸밀수 있도록 도와주는 사이트다.

@import url("https://unpkg.com/@picocss/pico@1.*/css/pico.min.css");

Root 최상단에 styles.css 파일을 만들어서 위 코드와 같이 넣으면 기본적인 html 스타일링을 해준다.

 

3.https://app.contentful.com/

Contentful

Contentful 이라는 gatsby의 Plugin으로 사이트를 비개발자도 같이 참여하여 자료를 업데이트 하고 관리할 수 있도록 해주는 사이트. 

 plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `th5r98qaka10`,
        // Learn about environment variables: https://gatsby.dev/env-vars
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/blog-posts`,
      },
    },
  ],

gatsby-config.ts 에 위와 같이 plugins에 각종 plugin을 추가하면 된다. 

이외 source-filesystem, gatsby-plugin-image, mdx, 등 다양한 plug-in을 제공한다.

 

4.https://app.netlify.com/

Netlify App

gatsby로 만든 웹사이트는 Netlifty 를 통해 배포할 수 있다.

이외 여러가지 서비스를 통해 배포가 가능하지만 Netflify 와 Gatsby가 최근 같이 합류 한것으로 보인다.