[블로그] 개츠비(Gatsby) + Github로 블로그 서비스 하기

[블로그] 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part II

IT 이야기/IT 상식

by 리치윈드 - windFlex 2021. 6. 1. 23:42

2021.06.01 - [IT 이야기/IT 상식] - 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part II

2021.06.02 - [IT 이야기/IT 상식] - 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part III

2021.06.04 - [IT 이야기] - [블로그] 개츠비(Gatsby) + Github로 개인 블로그를 만들자 - Part IV

원문 : https://tech.richwind.co.kr

개츠비(Gatsby) 기본 개발환경 구성

이전 포스팅에 JAM Stack과 정정 웹사이트 생성기 (SSG: Static Site Generator)의 개념을 소개 하였다. 이번 포스팅에서는 대표적인 SSG인 Gatsby를 설치하여 개인 블로그 구축에 기본적인 틀을 만들어 보도록 하자.

Gatsby는 Nodejs/ReactJS를 기반으로 한다. 따라서, 우선 Node 환경이 구성되어 있어야 한다. 기본적인 환경 구성은 다음과 같으므로, 이미 개발환경이 구성되어 있다면, 아래 내용은 건너 뛰어도 무방하다.

1) NodeJS 설치
2) Git 설치
3) Gatsby 설치

각자 환경에 맞게 NodeJS와 Git을 설치해 주자. 그 다음 Gatsby 설치환경은 NPM 환경으로 동일하다.

참고로, 필자의 환경은 Mac OS이므로, Window/Linux 환경은 소폭 다를 수 있다.

Mac OS 환경

NodeJS 설치

brew install node

Git 설치

brew install git

Windows 환경

다음 Nodejs.org에서 설치파일을 다운로드 받아 설치한다.

Nodejs : https://nodejs.org/en/download/
Git 설치 : https://github.com/git-for-windows/git/releases/tag/v2.31.1.windows.1

Linux 환경

NodeJS설치

sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

Git 설치

sudo apt-get update
sudo apt-get install git

그 밖에 통합 개발환경 (IDE) 및 Editor 설치

필자는 Visual Studio Code (VS Code)를 사용중이다. 그러나, Atom, Eclipse, IntelliJ 등 자유롭게 설치하여 사용하면 된다. 특별히 제한 사항이 없다.

Visual Studio Code Download : https://code.visualstudio.com/download

Gatsby 설치 환경 구축

1) Gatsby CLI 설치

npm install -g gatsby-cli

이제 개발 환경 구성은 갖추었다. 이제, 실제 프로젝트 폴더로 이동하여 기본 프로젝트를 생성하도록 하자. 프로젝트를 생성할 폴더에서 다음과 같이 실행한다.

2) Gatsby Project 생성

Gatsby Project 생성에 대한 유형은 다음과 같다.

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

만약, myblog 라는 이름의 새 프로젝트를 시작한다면 다음과 같이 입력하여 생성할 수 있다.

gatsby new myblog https://github.com/gatsbyjs/gatsby-starter-hello-world

템플릿 원형이 되는 Github Repository를 입력하지 않으면 암시적으로 다음을 원형으로 인지한다. https://github.com/gatsbyjs/gatsby-starter-default.git

3) Gatsby 개발 서버 구동

cd myblog
gatsby develop

Gatsby로 기본 웹사이트를 생성하였다면, 프로젝트 폴더 안으로 들어가서 파일을 구경해 보자. 다음과 같은 기본 구성 파일과 폴더들이 생성 되어 있을 것이다.

템플릿에 따라서는 좀 더 다양한 구성요소들이 포함되어 있을 수 있다.

시범 구동을 위해서 develop 환경을 실행해보도록 하자.

4) Gatby 개발 웹사이트 접속 확인

gatsby develop을 실행하면, 2개의 서비스에 접속할 수 있다.

웹사이트 : http://localhost:8000/
GraphQL 테스트 : http://localhost:8000/___graphql

이제 기본적인 Gatsby 사이트 구성을 완료하였다.

Gatsby Theme

우리는 이제 막 Gatsby Hello World를 구동해 봤을 뿐이다. Gatsby를 이용한 사이트를 구축하기 위해서는, ReactJS를 기반으로 Gatsby가 어떻게 프레임워크를 구성해 두었는지 시간을 두고 차근차근 알아갈 필요가 있다.

다만, 우리의 목적은 개인블로그를 작성하기 위함이었다는 것을 잊지 말자. 자칫 목적을 상실하고 Gatsby 학습하는 동안 우리의 블로그 구축은 계속 지연될 수 있다. 일단, 단순하게라도 구축해 놓고 하나씩 업데이트 해 나가는 것이 좋을 듯 하다.

이러한 관점에서, Gatsby는 다양한 테마를 제공하고 있다. Gatsby는 다양한 플러그인이 존재하는데 이런 플러그인의 사용과 파일구조, 디자인을 한데 묶어서 테마로 제공하고 있다. 수많은 공식 테마와 개발자들이 공유하는 비공식 테마가 있으나, 이번 포스팅에서는 Gatsby 공식 블로그 테마 (The Gatsby Blog theme)를 적용해 본다.

The Gatsby Blog theme 설치

다양한 테마 덕분에 Gatsby를 통한 생산성이 향상되고 있다. 테마가 없었다면 아마도 Gatsby가 이렇게까지 유용하지는 않았을 지도 모른다. 블로그 테마는, 마크다운(`md파일` 또는 `mdx파일`)로 작성된 문서를 디자인된 웹페이지로 변경해 준다. 따라서, 사용자는 정해진 위치에 마크다운 파일을 작성/추가함으로써, 자신만의 개인 블로그를 사용할 수 있다. 또한, 약간은 수정만으로 디자인과 기능을 변경하는 것이 가능하다.

기본환경에서 마크다운 파일을 사용하기 위해서는, `gatsby-transformer-remark` 등의 플러그인을 설치/개발하여야 한다. 그러나 테마에서는 이러한 과정을 포함하여 잘짜여진 구조로 제공한다.

1-1. 새로운 프로젝트 생성으로 시작할 때

gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme

### 1-2. 기존 프로젝트에 추가 반영할 때

npm install gatsby-theme-blog

gatsby-config.js 파일에서 다음과 같이 플러그인을 추가 한다.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {
        // basePath defaults to `/`
        basePath: `/blog`,
      },
    },
  ],
}

2. 블로그 포스팅

- 포스팅 내용 : `/content/posts` 내에 신규 마크다운을 생성하여, 포맷에 맞게 글을 작성하면 새로운 블로그 포스팅이 가능하다.
- 포스팅 이미지 : 포스팅 컨텐츠에서 사용하는 이미지는 `/content/assets` 에 넣고 사용할 수 있다.
- 포스팅용 마크다운은 다음과 같은 형식에 따른다. (`---`으로 감싼 글머리를 `frontmatter`라고 부르며, 모든 포스팅은 frontmatter를 포함해야 한다. )

---
title: Hello World (example)
date: 2019-04-15
image: ./some-image.jpg
---

Posts should be written from here

마크다운 파일 하나 당 포스팅 하나가 생성된다고 보면 된다. 즉, 한번 세팅이 완료되면 이후 블로그 포스팅은 `md` 파일만 관리하면 된다.

3. 웹사이트 설정

글을 작성하는 이외에 우리의 블로그는 웹사이트중 하나이기 때문에, 사이트 이름, 설명, URL등 추가적인 정보의 입력이 필요하다. Gatsby Blog Theme에서는 이러한 설정을 `gatsby-config.js` 에서 일괄처리 할 수 있게 `siteMetadat` 필드를 제공하고 있다. 웹사이트 메타 정보들을 입력해 주도록 하자. 추후 검색엔진최적화(SEO: Search Engine Optimization)에도 사용이 된다.

좀 더 상세하게는, `Gatsby-config.js` 파일을 다른 컴포넌트에서 import하고 변수로 사용한다.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the site title and SEO
    title: `My Blog Title`,
    // Used to provide alt text for your avatar
    author: `My Name`,
    // Used for SEO
    description: `My site description...`,
    // Used for resolving images in social cards
    siteUrl: `https://example.com`,
    // Used for social links in the root footer
    social: [
      {
        name: `Twitter`,
        url: `https://twitter.com/gatsbyjs`,
      },
      {
        name: `GitHub`,
        url: `https://github.com/gatsbyjs`,
      },
    ],
  },
}

기타 UI 설정

Gatsby-Blog-Theme에는 기타 플러그인에 대한 설정 변경을 통하여, Highlight 색상/테마를 변경하거나, UI를 변경하는 등 디자인 변경이 가능하다. 또한, 소스 자체를 커스터마이징 할 수 도 있다. 이러한 부분은 차차 채워나가면 되겠다.

참고로, 다음은 Highlight를 지원하는 `prism`의 색상테마에 대한 설정 변경이다. `dracula` 프리셋으로 설정한 예이다.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {
        prismPreset: `dracula`,
      },
    },
  ],
}

'IT 이야기 > IT 상식' 카테고리의 다른 글

[온라인 회의 이름변경] Zoom(줌) 이름 변경하기 (회의 참석 전, 참석 후) (0)	2021.07.23
[블로그] 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part III (0)	2021.06.02
[블로그] 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part I (0)	2021.06.01
맥(MacOS)에서 특수문자/한자 입력 하기 -☆ ★ ○ ● (0)	2021.01.21
[마크다운] 그래프/다이어그램 그려넣기 (ft. Typora) (1)	2020.12.08

리치윈드 (RichWind)

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

[관련글]