미니멀리스트 블로그를 구축한 방법

12737 단어 blog gatsby

개츠비가 매력적이다

나는 꽤 오랜 시간 동안 내 블로그를 설정할 계획이었습니다. 하지만 시기가 적절하지 않은 것 같아서 계속 미뤘습니다. 작년에 Gatsby에 대해 배웠지만 아직 React를 배우지 못했고 솔직히 말해서 모든 것이 내 머리를 조금 넘었습니다. 그러나 한동안 React를 배우고 작업한 후 Gatsby는 완벽한 선택이라고 느꼈습니다.

완전 사용자 정의가 가능한 GraphQL을 사용하여 블로그에 새 페이지를 쉽게 추가할 수 있으며 블로그 게시물에 마크다운을 사용한다는 사실이 마음에 듭니다. 또한 나중에 테마를 만들 계획이므로 전체적으로 나에게 완벽한 선택인 것 같습니다.

그래서 제가 이 블로그를 만든 방법을 소개합니다. 이것은 완전히 상세한 튜토리얼이 아님을 명심하십시오. 많은 가이드가 있으며 Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL) by Andrei Neagoie 및 Yihua Zhang Yihua의 튜토리얼을 적극 권장합니다.

설정

먼저 새 Gatsby 블로그를 설정합니다.

npx gatsby new gatsby-blog

그런 다음 gatsby-blog 디렉터리로 이동하고 다음을 사용하여 서버를 시작합니다.

npm run develop

gastby-config.js에서 원하는 대로 사이트 메타데이터를 설정합니다.

siteMetadata: {
  title: `MY BLOG`,
  description: `My thoughts...`,
  author: `@yourname`,
},

동일한 파일에서 올바른 경로에 연결하여 자신의 아이콘에 태그를 지정할 수도 있습니다.

options: {
  name: `gatsby-starter-default`,
  short_name: `starter`,
  start_url: `/`,
  background_color: `#663399`,
  theme_color: `#663399`,
  display: `minimal-ui`,
  icon: `src/images/<your-logo-filename>`,
},

마크다운 사용

블로그 게시물에 마크다운을 사용하려면 플러그인의 gatsby-config.js 파일에 다음을 추가해야 Gatbsy가 마크다운 파일에 액세스할 수 있습니다.

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdowns`,
        path: `${__dirname}/src/markdown-pages`,
      },
    },

이 작업이 완료되면 모든 것이 다시 로드되도록 서버를 다시 시작합니다.

파일에서 데이터 가져오기

이렇게 하려면 graphQL을 사용하여 쿼리한 파일의 데이터를 가져올 수 있도록 변환기 플러그인을 설치해야 합니다.

npm i gatsby-transformer-remark

gatsby-transformer-remark를 gatsby-config.js에 추가하십시오.

{
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
},

index.js 파일 정리

정리를 위해 인덱스 페이지 구성 요소를 나타내는 함수를 내보낼 수 있습니다. 따라서 export default IndexPage 줄을 제거하고 함수를 내보내고 데이터를 props로 전달합니다.

export default ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <div>
      <h1>My Blog</h1>
    </div>
  </Layout>
)

export const query = graphql`
  query {
    allMarkdownRemark() {
      edges {
        node {
          id
          frontmatter {
            date
            title
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

데이터는 함수 아래의 graphQL 쿼리에서 가져옵니다. graphQL을 사용하여 적절한 쿼리를 생성하기 위해서는 localhost:8000/___graphql의 graphQL 인터페이스가 매우 사용자 친화적이므로 사용하는 것이 좋습니다.

블로그 요약으로 색인 페이지 채우기

export default ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <div>
      <h1>My Blog</h1>
      <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <Link to={node.fields.slug}>
            <h3>
              {node.frontmatter.title} - {node.frontmatter.date}
            </h3>
          </Link>
          <p>{node.excerpt}</p>
        </div>
      ))}
    </div>
  </Layout>
)

export const query = graphql`
  query {
    allMarkdownRemark() {
      totalCount
      edges {
        node {
          id
          frontmatter {
            date
            title
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

이제 색인 페이지에 mardown-pages 폴더에 있는 각 블로그 게시물의 제목, 날짜 및 발췌문이 표시됩니다.

스타일

구성 요소의 스타일을 올바르게 지정하려면 styled-components 플러그인을 가져오는 것이 좋습니다. 그럼 먼저 설치를 해보자.

npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components

그런 다음 gatsby-plugin-styled-components를 gatsby-config.js에 추가합니다.

},
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-sharp`,
{

따라서 index.js 파일로 가져오고 블로그에서 스타일이 지정된 구성 요소를 사용할 수 있습니다.

import styled from "styled-components"

배포

먼저 GitHub(또는 GitLab, Bitbucket, ...)에 repo를 만들고 블로그를 푸시합니다.

git add -A
git commit -m "Add all blog code for deployment"
git remote add origin <your-github-url-here>
git push origin master

둘째, 호스팅은 여러분의 몫입니다... 하지만 저는 지속적인 통합을 쉽게 하기 위해 이 블로그를 Netlify에서 호스팅하기로 결정했습니다. 따라서 Netlify의 경우 단계는 다음과 같습니다.

계정을 만들고 로그인합니다.

New site from Git 버튼을 클릭하고 GitHub(또는 코드를 푸시한 위치에 따라 GitLab 또는 Bitbucket)를 선택합니다.

권한 부여를 허용하고 저장소 이름을 찾습니다. deploy를 클릭합니다.

그리고 우리는 끝났습니다! 이제 블로그에 전체 CI/CD가 있습니다. 이제 블로그의 변경 사항을 버전 관리에 푸시하기만 하면 Netlify가 자동으로 사이트를 재구축합니다.

커스텀 도메인을 추가하고 싶으시다면 follow the Netlify documentation 팔로우 하기 쉽도록 초대합니다.

이제 할 수 있습니다enjoy our new blog!