Gatsby와 Netlify를 통한 블로그 개설

Blog

들어가기에 앞서 블로그를 만들게 된 계기가 있다. 웹 개발을 하면서 익힌 기술이 있으니 실물로 남길 거리가 필요했다. 블로거가 되는 게 목표가 아닌 만큼, 주기적으로 글을 올리거나 하는 것은 아니더라도, 하나쯤은 내 페이지를 가지고 싶었다.

웹 개발을 시작할 때, JSP와 Spring Framework를 이용했고, 그 후에 Node.js + Express + MongoDB & Mongoose를 사용했었다. 주로 백엔드 개발을 많이 했었지만, 앞뒤 구분 없이 관심이 많았어서 가장 최근에 사용하던 기술은 Vue였다.

쓸 줄 알고, 공부 중인 기술들을 다 써서 블로그를 만들고, 그 위에 개발한 내용을 올려보자니 터무니가 없더라. 정기적으로 글을 올릴 것도 아닌데, 글 하나를 올리자고 Vue에 백엔드까지 더하려니 추후 결과물들과 개발 과정에 소요될 리소스를 따져보니 손해 수준이 아니었다.

결국 간단히 블로그를 만드는 방법을 찾아보았고, 지금 만든 블로그는 Gatsby와 Netlify를 이용해 만들어 배포 중이다.

Gatsby

Gatsby의 홈페이지에 들어가면 가장 먼저 만날 수 있는 문구이다.

Fast in every way that matters

모든 면에서 빠르다라는 의미이다. Gatsby는 React를 기반으로 한 프레임워크로 개발자가 쉽게 웹사이트와 앱을 만들 수 있도록 도와준다.

Gatsby는 React와 GraphQL을 통해 정적 사이트를 만든다. 그래프 형태의 데이터 인터페이스를 제공하고, 데이터 노드를 만든다. 그리고 구성한 데이터를 GraphQL로 쿼리를 진행해 페이지 코드에 사용한다. 동시에 사이트 내의 모든 페이지를 사전에 렌더링해서 html 파일을 만들어낸다. 이 과정을 거쳐 서버사이드 렌더링을 적용한 React 앱과 동일한 정적 사이트가 만들어진다.

npm install -global gatsby-cli
gatsby new project-name starter-git-repository

Gatsby에서 제공하는 CLI와 Starter를 사용하면 미리 만들어진 템플릿을 이용해 쉽게 페이지를 만들 수 있다.

Netlify

Netlify는 정적 사이트 호스팅부터 자동 빌드와 배포, DNS, SSL 설정 등 사이트 관리 기능들을 무료로 제공해준다.

Node.js와 Ruby, Python의 자동 빌드를 제공하기 때문에 직접 빌드해 업로드할 필요는 없다.