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

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

IT 이야기/IT 상식

by 리치윈드 - windFlex 2021. 6. 1. 22:59

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

왜 자신만의 블로그를 만들려 하는가?

사람들이 처음 블로그를 시작할 때 주로, Naver, Tistory 등 플랫폼 서비스를 많이 사용한다. 물론, 접근성이 좋고 글을 작성하기 쉽기 때문이다. 그러나 시간이 조금씩 지나감에 따라, 이러한 플랫폼에서 난무하는 저품질 수준의 글에 대한 회의가 들곤 하였다.

이 때문에 최근에는 브런치, Medium 등의 플랫폼으로 이동하는 사용자들도 많아 졌다. 한편, 개발자이거나 개발에 경험이 있는 사용자들의 경우, 자신만의 블로그를 직접 만들어서 사용하곤 한다. 이것에는 다양한 이유가 있겠지만, 대표적으로 자기 자신이 직접 제어/통제하고자 하는 마음도 있고, 블로그와 동시에 최근 FrontEnd기술을 사용하는 것 자체에도 관심이 많은 것 같다.

필자의 경우에는, 주로 마크다운을 활용하여 글을 작성한다. 구글독스(Google Doc)에 작성하기도하고, Notion 등의 메모앱에도 작성하기도 하는데 제대로 정착하지 못하고 떠돌고 있었다. 그러다가 이 서비서 저 서비스에 산발되어 있는 조각들이 낭비 같다는 생각이 들었다. 이러한 이유로 마크다운 파일을 블로그로 만들고 싶었기에, 본인만의 블로그를 만들기 시작하였다.

JAM Stack이란 ?

JAM Stack - 정적 웹사이트 생성기 (Static Website Generator)

개인별 이유야 무궁무진하게 다양할 것으로 생각된다.

어쨋든, 이 글을 읽는 독자 또한 자신만의 블로그를 만들어 보기로 결심 했을 것이다. 그렇다면, 이제 웹사이트를 빌드/배포 해야 할 것인데, 과거처럼 WEB/WAS/DB 형태로 구축하는 웹과 서버어플리케이션, DB 개념이 떠오른다. 추후 거론하겠지만, 이는 서버사이드(SSR: Server Side Rendering)에서 동적 데이터를 처리하는 방식으로, 대부분의 연산을 서버에서 담당하고, 클라이언트에서는 그 결과물만 출력하는 방식 이다.

Traditional Web과 JAM Stack 비교. 서버 없이 DB 없이 간결하고 빠르게.

이전 세대 기술로써, 아파치를 사용한 LAMP (Linux, Apache, MySQL, PHP) 스택이 대표적인 SSR 중심의 아키텍처라 할 수 있다. 그런데, 이 방식은 개인 블로그하자고 구축하기에 챙기것도 많고, 기술 스택 자체도 사양 기술이라서 새로 시작하는 블로그에 적용하기는 좀 그렇다. 특히, PHP/MySQL 등 DB를 직접 제어하는 어플리케이션 서버를 사용하기에, 보안에 신경 써야할 항목도 많을 뿐만 아니라, 목적 대비 컴퓨팅 리소스도 좀 낭비가 아닌가 하는 생각도 든다. Naver/Tistory 등 블로그 플랫폼은 이 구조를 상업적인 규모로 운영하고 있다고 보면 된다.

LAMP Stack
MEAN Stack
MERN Stack
JAM Stack ??

최근 주로 사용되는 웹 서비스 아키텍처로는, MEAN (MongDB, Express, AngularJS, Node JS) Stack이 있다. AngularJS를 ReactJS로 변경하여 MERN Stack이라고도 한다. 그러나, 이 또한 DB가 포함되어 있다. 동적이라는 이야기 임과 동시에 DB 관리를 필요로 한다. 글을 편하게 쓰고 관리하고자 개인 블로그를 만드는데, DB 관리까지 할 여유는 없다. 글을 작성하는 것인지 DB를 관리하는 것인지 알수 없는 형태가 될 것이다.

이와 관련하여, 최근에는 또다른 JAM (Javascript, API, Markup) Stack이라는 아키텍처가 자주 거론되고 있다. 기술 스택을 보면 알겠지만, DB가 없다.!!!? 처음에는, DB가 없으면 어떻게 글을 쓰고 웹사이트에 퍼블리쉬 하나 싶었다. 결론부터 이야기 하면, 앞으로 JAM Stack의 한 종류인 Gatsby를 이용하여 블로그를 생성할 것이다.

간략히....

한마디로 요약하자면, 서버가 필요없다. 인터넷 저장소/스토리지만 있으면 된다.

JAM Stack을 단순하게 이야기 하면, 인터넷 상에 저장된 마크업 파일(HTML 포함)을 불러와서 사용자(Client)의 브라우저에서 보여 주는 것이 전부이다. 이것은 쉽게 생각하면, 네트워크 저장소에 있는 HTML 파일을 브라우저로 오픈한 것을 볼 수 있다. 끝.

AWS S3에만 파일을 올려두고 웹사이트로 보여 주면 된다. (어떻게 정적 파일을 만드느냐가 관건이다.)

추가 내용은 다음을 참조 : https://jamstack.org/why-jamstack/

Why Use the Jamstack? | Jamstack

Why use the Jamstack? Learn all about the security, speed, and other benefits that the Jamstack approach gives when building for the modern web. Check it out!

jamstack.org

이러한 내용을 생각해 보면 당연한 내용이지만, 다음과 같은 특징을 뽑는다.

- 빠른 성능 : 서버사이드 연산은 이미 컨텐츠 생산 과정에서 끝냈다. 파일전달이 전부다.
- 높은 보안성 : 이미 거론한 것처럼, 보안이라고 할것이 없다. 모두 공개되어 있는 내용 뿐이다.
- 비용 효율성, 확장성 : 네트워크 스토리지 혹은 CDN만 있으면 서비스가 가능하다.
- 운용 효율성 : 운영 시 관리할것이 별로 없다.

정적 사이트 생성기 (Static Website Generator)

"그래서 블로그 글을 어떻게 정적 웹파일로 만드는데? 일일이 HTML을 만들어야 하는 것은 아니지?"

당연히 아니다. 이 때문에 필요한 것이 정정 사이트 생성기 (Static Website Generator)이다. 내가 블로그의 글은 동적으로 작성했지만, 그때 그때 나의 포스팅을 정적 파일(즉, HTML, CSS, JS 파일)로 만들어 주는 것을 의미한다. 기존의 동적 웹어플리케이션 (서버사이드렌더링, SSR: Server Side Rendering)에서 처리하던 모든 경우의 수를 미리 생성하여 HTML로 만들어 놓는 방식이다. 어찌보면 정말 무식할 수도 있는 방법인데, 사용자(Client)측의 컴퓨팅 성능이 향상되면서 이러한 접근 방식도 생겨나게 된 것 같다.

다양한 경우의 수가 존재하므로, 이 것을 관리하기 위해서 Data를 별도롤 분리하여 관리한다. 보통 JSON파일로 컨텐츠를 분리하였으며, JSON파일을 불러오는 과정에서 API가 사용된다. 그래서, JAM Stack의 핵심은, 정적 웹사이트 생성기라고 할 수 있다.

대표적인 예로, Jekyll, Hugo, Gatsby 등이 정적 웹사이트 생성기 이다. 또한 Github의 Git Pages는 이러한정적 웹사이트를 서비스하는 대표적인 저장소 이다. 때문에, 우리는 Git page에 html파일만 업로드 함으로써, 개인블로그를 운영할 수 있다. ^^;

Github는 Jekyll을 기본 탑재하고 있다. 따라서, jekyll기반의 소스코드를 업로드하면 내부적으로 jekyll이 정적파일을 생성한다.

개츠비(Gatsby)

여러가지 정적 웹사이트 생성기 중에서 필자는 `Gatsby` 를 선택하였다. 이 부분은 개인적인 환경에 따라 달라질 것이다. 각 기술별로 장단점이 있으므로 각자에 맞게 선택하면 될것 이다. 간단히 특징만 요약하자면 아래와 같다.

- Jekyll : Github 기본 탑재
- Hugo : 최신 언어인 Go언어 기반, 빠른 빌드
- Gatsby : ReactJS 기반. 다양한 템플릿. GraphQL 기반

최근 Gatsby와 유사하지만, SSR과 CSR의 중간 어디쯔음에 있는 Next.js도 핫하다.

JAM Stack 개인블로그 만들기를 위한 선택 사항

JAM Stack과 정적 사이트 생성기에 대한 개념적 이해는 이것으로 마무리하고, 본격적으로 Gatsby로 개인 블로그를 구축하기 위해서 몇가지 선택을 해야 한다.

1) 어디에서 서비스 할 것인가?
Gatsby Cloud, Github/GitPage, Netlify, AWS S3, ...
2) 글 작성은 무엇으로 할 것가? ( Headless CMS) :
Netlify CMS, Gatsby Cloud CMS, Word Press, Sanity, Contentful, DatoCMS, 혹은 로컬 PC.
참조 : https://jamstack.org/headless-cms/

다음 그림은 Gatsby에서 공식으로 제안하는 구성도이다. Github에 업로드하고, Gatsby Cloud에서 서비스하는 플랫폼을 제안하고 있다. 그러나, 꼭 이 구성을 따를 필요는 없다.

Gatsby 동작 워크플로우 (출처 : https://www.gatsbyjs.com/)

위의 선택 사항에 따라서 소폭 차이가 있을 수 는 있으나, 가장 일반적인 선택으로 진행을 해보도록 하겠다. 나머지는 각 서비스별로 설정 상의 차이 정도이다. 필자는 우선 Git Page에 컨텐츠를 저장하여 포스팅을 진행 예정이다. Git Page를 사용한다 함은 위 그림에서, Github와 Gatsby Cloud(저장소)를 하나로 통합하여 사용하겠다는 의미이다.

추후 Netlify에서 서비스하는 것을 추가 예정이다.

또한, Headless CMS는 나중에 적용해도 무관하므로, 일단은 로컬 PC에서 글을 작성 예정이다. 몇몇 Headless CMS를 사용해 보았지만, 필자는 기존 플랫폼 블로그 보다 편리하다는 생각을 못했기 때문에 Headless CMS에 대한 소개는 후일로 미룬다.

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

[블로그] 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part III (0)	2021.06.02
[블로그] 개츠비(Gatsby) + Github로 블로그 서비스 하기 - Part II (0)	2021.06.01
맥(MacOS)에서 특수문자/한자 입력 하기 -☆ ★ ○ ● (0)	2021.01.21
[마크다운] 그래프/다이어그램 그려넣기 (ft. Typora) (1)	2020.12.08
[맥북] 맥북 터미널을 이쁘게 - ZSH 초간단 설치와 커스터마이징 (zhs + iTerm2) (4)	2020.06.01

리치윈드 (RichWind)

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

[관련글]

왜 자신만의 블로그를 만들려 하는가?

JAM Stack이란 ?

간략히....

정적 사이트 생성기 (Static Website Generator)

개츠비(Gatsby)

JAM Stack 개인블로그 만들기를 위한 선택 사항

관련글

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

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바