Gatsby Blog 만들기 - 1

winteri·2021년 8월 6일
1

Vue를 주로 사용하다보니 React는 잘 몰라서 망설여지긴 했지만 시간이 좀 걸리더라도 직접 만들어보고 싶어 시작한 블로그 만들기😁

Gatsby는 뭘까..?

검색해보니 Gatsby는 정적 웹사이트 생성을 할 수 있는 도구이다.
Jekyll, Hugo 로도 정적 웹사이트 생성이 가능하지만 Jekyll의 Ruby 보다는 Gatsby의 React를 경험해보고 싶어 Gatsby를 선택했다😄 (나중에 기회가 되면 Jekyll이나 Hugo로 블로그를 개설해보고 싶다😇)

Gatsby를 만들어서 배포하는 방법으로는 주로 Netlify나 Github Page에 배포하는 방법으로 많이들 하는 것 다

Gatsby 프로젝트 생성 & 실행

프로젝트를 만들 디렉토리로 이동 후

sudo npm install -g gatsby-cli
gatsby new '프로젝트 이름'
cd '프로젝트 이름'
gatsby develop

이 단계를 거치면

이런 화면이 나온다

프로젝트 구조

📌 추후 수정 가능성이 있지만 일단 지금은...

src 의 components는 사용될 컴포넌트들을 작성할 수 있는 곳 같고, pages의 index.js가 맨처음 보이는 화면인 것 같다. 아마도 Next.js 했던 경험으로는 404.js는 url이 없는 경우에 나타나는 화면에 대한 js파일 같다.

Prettier 설정

검색해보니 Prettier 설정도 해 놓으면 좋을 것 같아서 이 곳에서 참고하여 작성해보았다.
.prettierrc를 다음과 같이 변경해주었다.

{
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 120,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all",
    "useTabs": false
}

GraphiQL

GraphiQL을 이용하여 상단 tilte을 layout에 불러와 사용할 수 있게 기본 코드가 작성되어있다. 이 부분은 나중에 개념에 대한 설명을 추가하고 사용해 보아야겠다

게시글 생성

일단 나는 성격이 급하니 게시글을 넣어보아야지😅
다음은 src/pages/blog.js 에 작성할 코드이다

import * as React from 'react'
import Layout from '../components/layout'

const BlogPage = () => {
    return (
        <Layout pageTitle="최근 게시글">
            <p>Posts here!</p>
        </Layout>
    )
}

export default BlogPage

layout.js 에 아래의 코드를 추가한다

	<li className={navLinkItem}>
            <Link to="/blog" className={navLinkText}>
              Blog
            </Link>
          </li>

MDX로 게시글을 생성해주는데 root 디렉토리에 blog 디렉토리를 생성한 후 첫번째 게시글 파일을 등록한다.

npm install gatsby-source-filesystem 을 통해 게시글임을 확인할 수 있게 해준다.

gatsby-config.js에 다음과 같이 추가한다.

이제 /blog에 게시글을 추가해 주기 위해 blog.js를 다음과 같이 변경한다.

import * as React from 'react'
import Layout from '../components/layout'
import { graphql } from 'gatsby'

const BlogPage = ({ data }) => {
    return (
        <Layout pageTitle="최근 게시글">
            <ul>
            {
                data.allFile.nodes.map(node => (
                <li key={node.name}>
                    {node.name}
                </li>
                ))
            }
            </ul>
        </Layout>
    )
}

export const query = graphql`
    query {
        allFile {
            nodes {
                name
            }
        }
    }
`

export default BlogPage

이렇게 첫번째 게시글이 블로그에 게시가 된다🙂

이어서 mdx작성과 렌더링 하는 과정을 2편에서 작성하려한다. 계속!😄

profile
토독토독

0개의 댓글