블로그를 운영한다는건 부담스러운 일이다. 하지만 필요성은 매번 느끼고 있어서... 꽤 스트레스를 받고 있었는데, 더이상 미룰 수 없어서 부담은 좀 줄이고 내가 하고싶은 대로 하면서 만들어 보려고 한다.

Gatsby.js가 뭐야?

Gatsby.js(이하 gatsby)란 React기반으로 정적 페이지를 생성해주는 프레임워크이다.

정적 웹 페이지는 또 뭐야?

정적 웹 페이지란, 이미 가지고 있는 정보를 사용자 별로 가공할 필요 없이 일괄적으로 처리하고 그대로 받아오기만 하면 되는 페이지를 의미한다. 빌드시 이미 작성되어 있는 데이터를 처리하고 html에 따라 뿌려주기만 하면 되기 때문에, 속도가 빠르다. 반면 동적 웹 페이지는, 사용자별로 데이터를 가공할 필요가 있는 페이지이다. 접속 시 조건에 맞는 API를 요청을 보내 정보를 받아오기 때문에 비교적 속도가 느리다. 대형 포털 사이트 등 많은 웹이 사용자 별 환경에 맞춰 정보를 제공하므로 동적 웹 페이지라고 할 수 있다. (참고로 정적페이지가 모양이 정적인게 아니다. 에니메이션으로 움직이고 다함...)

gatsby로 말하자면, 데이터소스(마크다운, cms 등)를 GraphQL로 가져와서 빌드 시점에 미리 포함시켜 버리는 것이다. 배포시점에 이미 페이지가 만들어져있기 때문에, 포스트를 불러오는 API서버가 필요하거나 하지 않다.

정적 사이트 생성기(Static Site Generator)는 종류가 다양한데, 자신이 원하는 조건에 맞는 프레임워크를 사용하면 된다. (참고 이 글을 작성하는 시점에 Next.js가 가장 Stars가 높다.)

댓글은?

블로그의 대부분은 이미 작성된 포스트를 보여주기만 하면 되기 때문에 정적 웹 페이지로 충분히 가능하다. 그런데 거의 유일하게 동적으로 관리해야 하는 부분이 있는데, 바로 댓글이다. 댓글은 미리 저장해 둘 수 없고, 사용자가 작성하는 시점에 생성되는 데이터들이다. 이런 부분은 댓글만 다루는 플러그인(앱, 위젯)들로 관리 할 수 있다. 개인 블로그에서 가장 많이 보이는 Disqus, 많이 본 형태로 익숙하고 깔끔한 Facebook 댓글 플러그인, 깃허브 이슈로 관리되는 utterances 등이 대표적이다.

나는 스스로 댓글을 잘 남기지 않는 성향을 갖고 있기 때문에, 나같은 사람들을 댓글을 쓰게 만드는 최소 조건을 알고 있다ㅎㅎ...👀(눈치)... 최소 추가 가입이 필요없는, 필요하다면 가지고 있는 계정을 이용해야 하며, 가능하다면 익명으로 댓글을 남길 수 있으면 더 좋다.
깃허브를 사용하지 않는 개발자는 없을 것이다. 그리고 대부분 개발공부 초기 git공부를 위해 만든, 혹은 막쓰는(?) 익명의 계정 정도는 하나씩 다 있을 것이다ㅎㅎ. 이정도면 utterances가 딱인 것 같다. 디자인도 깔끔하니 맘에 든다.

왜 gatsby를 선택했는가

내가 gatsby를 처음 봤을 때가, javascript로 DOM에 대해 배우고 있을때 쯤이었고, 얼마 뒤 React를 배우기로 결정난 시점이었다. 그러다보니 React를 이용한다는 말에 별다른 고민없이 gatsby로 블로그를 만들어야겠다고 생각했고, 좀 더 솔직히 말하면 당시 핫🔥하다는걸 모두 사용하고 있었기 때문에 써보고 싶었다. gatsby는 기본적으로 React를 바탕으로 하고 있고, 포스트를 Markdown으로 관리할 수 있고, GraphQL을 통해 데이터를 가져오고, Netlify를 통해 배포가 가능하다(내가 다 해보고 싶던 것들이다!🤩). 또한 공식 사이트가 친절한 편이고, 플러그인도 다양하게 많다. 리액트를 다뤄봤다면 큰 제약없이 원하는 모양의 블로그를 만들 수 있을 것이다.

The Great Gatsby

여러분도 gastby로 블로그 제작해보는게 어때요? 치얼스-★
gatsby 설명 포스팅엔 빠지면 섭섭한 위대한 개츠비 레오...

블로그의 특징

사실 별 특징 없다 순전히 나의 기준, 내가 편한 블로그를 만들 예정이다.

🏗 Starter

gatsby 사용자들이 공개한 다양한 스타터들이 있다. 이미 다 만들어둔 페이지도 많기 때문에 쉽게 시작할 수 있다. 하지만 난 직접 구현해 보기 위해 gatsby 공식 스타터 중 하나인 starter-hello-world로 시작하였다.

🎯 기능

마무리

누구나 좋아하는 완벽한 블로그는 될 수 없겠지만, 최소한 나 자신이 스스로 꾸준히 쓰고 싶은 블로그를 만들고 싶다. 블로그 코드는 여기에서 볼 수 있다.

Reference & Learn More

gatsbyjs.com
staticgen.com

Comments