Jamstack : Ghost, Gatsby, Netlify로 블로그 만들기(1)
Jamstack 블로그 만들기 시리즈는 총 3편으로 구성되어 있습니다.
1편 : Jamstack 소개와 준비물
2편 : Ghost, Gatsby, Netlify로 Jamstack 블로그 구축하기
3편 : 쾌적한 블로깅을 위한 몇 가지 세팅 방법 소개
Jamstack 소개
Jamstack이란?
JAM = JavaScript + APIs + Markup
Jamstack은 자바스크립트와 API, 그리고 마크업 언어를 사용해 웹을 구성하는 기술입니다. JAM Stack 공식 문서에서는 다음과 같이 정의하고 있습니다.
빠르고 안전한 사이트, 앱을 미리 렌더링한 다음 CDN에서 딜리버리하는 방법으로, 웹 서버를 관리할 필요가 없다.
더 쉽게 설명해 보겠습니다. 일반적인 웹사이트는 화면을 표시하는 프론트엔드와, 데이터를 저장하고 있는 백엔드로 구성되어 있습니다. 프론트엔드에서는 글 내용, 카테고리, 댓글 창과 같이 사용자에게 보여지는 부분을 표시하고, 백엔드에서는 글과 댓글, 사용자의 비밀번호와 같은 정보들을 저장하고 있습니다. 따라서 웹페이지를 화면에 표시하려면, 백엔드가 데이터베이스와 통신해서 받은 데이터를 가지고 프론트엔드는 사용자에게 보여주게 됩니다.
그런데 이와 같은 방식의 문제점은, 사용자가 페이지를 접속할 때마다 이 과정이 필요하기 때문에 페이지를 로딩하는데 시간이 오래 걸린다는 것입니다. 화면 그리기 + 데이터베이스 통신 단계를 거치기 때문인거죠. 그런데 Jamstack은 모든 데이터를 서버에서 미리 불러와서 화면으로 만들어 놓은 다음, 사용자가 홈페이지에 접속하면 미리 만들어 놓은 화면을 보여주게 됩니다. 이해가 되시나요? 원래라면 사용자가 접속했을 때 해야 하는 작업을, 홈페이지의 모든 페이지에 대해서 미리 수행해서 화면을 미리 만들어 놓는다는 게 핵심입니다.
그렇기 때문에 사용자가 어떤 페이지를 요구하더라도 Jamstack은 미친듯이 빠른 로딩속도(Blazing-Fast)를 보여줍니다. 결과적으로 구글 PageSpeed Insights에서도 모바일, 데스크톱 모두 만점에 가까운 점수를 주고 있습니다. 구글 SEO에서 페이지 로드 시간이 상당히 중요한 만큼, Jamstack 홈페이지에 도전해볼 가치가 있다고 생각합니다. 다만 저는 Unsplash 이미지를 많이 갖다써서 점수가 낮게나오네요 ㅠ_ㅠ
설정 환경 소개
ghost
ghost는 오픈 소스의 콘텐츠 관리 시스템(Content-Management System, CMS)입니다. 대표적인 CMS로는 워드프레스가 있죠. 사실 워드프레스가 CMS에 더해 블로그 스킨과 플러그인까지 모두 설정할 수 있어서 초보자들에는 더 적합합니다. 이 외에도 Contentful, Drupal, Sanity.io 등의 CMS를 모두 사용해 보았지만, ghost가 가장 글 작성 방법과 관리 방법이 직관적이고 제일 간단해서 선택했습니다. 그리고 unsplash 이미지를 에디터에서 쉽게 넣을 수 있고, 포스팅 썸네일에 들어가는 발췌문(excerpt)도 자동으로 생성해 준다는 점이 특히 맘에 들었습니다. 게다가, 자동화 플러그인도 기본적으로 연동이 되어있다는 점도 반가운 소식이겠네요.
Gatsby.js
Gatsby는 요즘 가장 핫한 자바스크립트 프레임워크입니다. React 기반으로 돌아가며, 패키지 관리는 Node.js로 수행합니다. Gatsby는 위에서 설명했던 프론트엔드를 정적(Static)으로 생성하는, 즉 미리 저장된 데이터를 화면으로 만들어서 저장해주는 프레임워크입니다. 이걸 Static Site Generator, 정적 사이트 생성기라고 부릅니다.
Heroku
앱이나 사이트를 무료로 배포할 수 있는 서버를 제공하는 사이트입니다. 일반적인 홈페이지를 호스팅하기는 많이 느리지만, 우리는 여기에 Ghost만 올려서 에디터로만 사용할 것이기에 문제가 없습니다.
Netlify
원래 내 홈페이지를 인터넷에 배포하려면 호스팅을 해야 합니다. 무료 호스팅도 있지만 만족스러운 퍼포먼스를 얻으려면 유료 서비스를 이용하는게 속편합니다. 그런데 우리가 만들 정적 사이트는 모든 데이터가 이미 서버에 올라가 있기 때문에 무거운 호스팅 서비스를 받을 필요가 없습니다. 그래서 무료로 정적 사이트를 배포할 수 있는 Netlify를 사용하겠습니다.
이상의 내용을 정리하면,
- Heroku에 ghost를 설치해서
- ghost로 글을 관리하고
- Gatsby로 화면에 보여질 사이트를 만들고(build)
- Netlify로 정적 사이트를 배포합니다.
물론, 더욱 쉽고 빠른 속도를 원하신다면 유료 호스팅 서버를 사용하셔도 되지만, 튜토리얼이 끝나고 나면 왜 무료 호스팅만 가지고도 엄청나게 빠른 홈페이지를 구축할 수 있다고 했는지 깨닫게 되실 겁니다.
필요 조건
이상을 수행하기 위해서는 아래 사이트에 가입하셔야 합니다. 아래 링크에서 먼저 가입해주세요.
참고로 도메인 연결은 필수 사항은 아니지만, 나중에 바꾸려면 번거로우니 만일 도메인을 입히시려면 미리 구매해 놓고 시작하시는게 속편합니다. 마지막으로 Netlify에 가입한 다음에는 Github와 계정을 연결해주세요.
여기까지 마치셨다면, Jamstack을 구축할 준비가 모두 끝났습니다. 다음 편에서는 본격적으로 사이트 구축을 해보겠습니다.