[gatsby] mdx 기반 블로그 만들기-1

markdown, md 또는 mdx 기반의 블로그를 만들 때 가장 많은 선택을 받는 프레임워크들은 크게 세 가지가 있죠.

바로 jekyll, Hugo, Gatsby인데요.

이 중 오늘은 Gatsby를 사용해서 블로그를 만드는 방법에 대해 알아보도록 해요.

---

macOS와 Windows로 나눠서 설명을 할 예정인데 각 항목별로 이미 설치하신 경우에는 바로 스크롤을 아래로 내려주세요.

물론 공식문서에도 이미 잘 정리되어 있으니 공식문서를 보고 진행하셔도 무방해요.

1-1-1. macOS Node.js 설치하기

우선 Homebrew가 설치됐다고 가정하고 시작할게요.

만약 아직 설치하기 전이라면 이 포스팅을 보고 따라하시면 되요.

brew가 설치된 상태에서 터미널을 열고 아래의 명령어를 실행 시켜요.

(만약 설치 중 오류가 발생하면 애플 사이트에서 맥에 로그인한 계정으로 다시 로그인한 후 터미널에서 다시 진행해주세요.)

이후에 소프트웨어 라이센스 동의 여부를 물어보면 동의하고 진행해주세요.

1xcode-select --install

이후 homebrew를 사용해서 node.js를 설치해줘요.

1brew install node

1-1-2. macOS Git 설치하기

git은 개발자라면 기본적으로 사용하는 프로그램이기 때문에 이미 다 설치한 상태겠지만 혹시나 해서 적어둘게요!

1brew install git

설치 완료 후 Github 계정을 등록해주세요.

1git config --global user.name "your github name"
2git config --global user.email "your github email"

1-2-1. Windows Node.js 설치하기

Windows에서는 설치가 매우 간단해요.

공식 사이트를 방문해서 LTS가 붙은 버튼을 클릭해주세요.

그 후 다운받은 .exe 파일을 실행시켜주세요.

설치 중 이 화면이 나오면 체크박스를 클릭 후 진행해주세요!

1-2-2. Windows Git 설치하기

Git도 Windows에서는 설치가 매우 간단해요.

공식 사이트를 방문 후 Download 버튼을 클릭해서 설치시고 .exe 파일을 실행해주세요.

1-3. gatsby-cli 설치 (macOS, Windows 공통)

이제 gatsby command-line-interface를 설치해요.

1npm install -g gatsby-cli

설치가 완료되면 잘 설치됐나 확인해요.

1gatsby --version
2# Gatsby CLI version: 5.12.4
3# Gatsby version: 5.12.9

이제 드디어 Gatsby 프로젝트를 생성해볼거에요!

이미 틀이 잡혀있는 템플릿을 사용해서 바로 만들어도 되지만 오늘은 배워보는 것이니 만큼 초기 상태로 프로젝트를 생성해보도록 해요!

1# 프로젝트 생성을 원하는 폴더로 이동 후 진행해주세요.
2
3gatsby new

원하시는 블로그 이름을 입력해주세요.

1What would you like to call your site?
2✔ · Classic95의 블로그

원하시는 프로젝트명을 설정해주세요.

1What would you like to name the folder where your site will be created?
2✔ {현재 폴더명}/ Classic95

js와 ts 중에 선택해주세요.

저는 당연히 ts를 선택했는데 앞으로 이 글을 계속 따라오실 분들은 ts를 선택해주시고 아니신 분들은 원하시는 언어를 선택해주세요.

앞으로는 ts가 오픈 소스들이나 공동 작업 프로젝트 혹은 회사 등 여러 곳에서 많이 정착될 것으로 예상되니 사용하시는 걸 권장드려요!

1Will you be using JavaScript or TypeScript?
2  JavaScript
3❯ TypeScript

Content Management System을 선택하는 부분인데 이 포스팅의 마지막은 Github에 배포하는 게 목표이기 때문에 No (or I'll add it later)를 선택할게요.

물론, 추후에 원하는 CMS를 선택할 수 있어요.

1? Will you be using a CMS?
2(Single choice) Arrow keys to move, enter to confirm
3❯ No (or I'll add it later)
4  –
5  Contentful
6  DatoCMS
7  Netlify CMS
8  Sanity
9  Shopify
10  WordPress

원하시는 스타일링 시스템을 선택하시면 gatsby 플러그인 설정을 자동으로 해줘서 편한 기능이에요.

저는 styled-components를 선택했어요.

이건 원하시는 걸 선택해주세요.

1? Would you like to install a styling system?
2(Single choice) Arrow keys to move, enter to confirm
3  No (or I'll add it later)
4  –
5  Emotion
6  PostCSS
7  Sass
8❯ styled-components
9  Theme UI
10  vanilla-extract
11  Tailwind CSS

이번에는 프로젝트 생성에 맞춰 추가되길 원하는 기능들을 선택해주세요.

저는 아래의 네 가지를 선택했어요. 이 블로그 글들을 쭉 따라가실 거라면 제가 선택한 걸 동일하게 선택하는 걸 추천드려요.

다 따라하지 않으시더라도 이 중 Add Markdown and MDX support는 반드시 선택해주세요!

물론 여기서 선택하지 않으셔도 추후에 플러그인을 수동으로 설정하실 수 있으니 걱정마세요!

1? Would you like to install additional features with other plugins?
2(Multiple choice) Use arrow keys to move, spacebar to select, and confirm with an enter on "Done"
3 ◯ Add the Google gtag script for e.g. Google Analytics
4 ◉ Add responsive images
5 ◉ Add an automatic sitemap
6 ◉ Generate a manifest file
7❯◉ Add Markdown and MDX support
8 ◯ Add Markdown support (without MDX)
9  ─────
10  Done

마지막으로 지금까지 설정한 것들을 확인하는 절차에요.

실수하신 게 없으시다면 확인하신 후 Yes를 입력해주세요.

1Thanks! Here's what we'll now do:
2
3    🛠  Create a new Gatsby site in the folder Classic95
4    🎨 Get you set up to use styled-components for styling your site
5    🔌 Install gatsby-plugin-image, gatsby-plugin-sitemap,
6gatsby-plugin-manifest, gatsby-plugin-mdx
7
8
9? Shall we do this? (Y/n) › Yes

설치가 완료되면 아래의 명령어들을 입력해주세요.

1cd {your project name}
2
3yarn develop

http://localhost:8000 주소를 브라우저로 입력했을 때 아래와 같은 화면이 나오면 성공이에요!

---

오늘은 Gatsby 블로그 설치 환경과 초기 프로젝트를 생성하고 실행하는 법에 대해 알아봤어요.

다음 포스팅에서는 mdx 기반으로 글을 쓰는 문법에 대해 알아보도록 해요.