Gatsby Cloud setup

이 글은 개츠비 클라우드에서 시작한다.

블로그

개츠비로 블로그를 새로 만들어서 사용하려고 했는데, 이전에는 안보였던 개츠비 클라우드라는 기능이 보였다.
빌드와 호스팅을 모두 해주는 서비스인데, 빌드는 로컬에서 해도 되고, 호스팅도 깃헙을 통해 해도 괜찮다.
(깃헙에서 호스팅을 할 수느 있지만, 내가 정한 이름이 아니라 내 계정명을 도메인으로 사용해야되는게 좀 별로다.)

하지만 1개의 웹사이트 호스팅에 대해서는 무료기에 사용해보기로 했다.
(1개 호스팅, 1개 빌드)

블로그 운영을 위해서 사용할 것이기 때문에 무료 버전으로도 충분하다고 생각했다.
그러면 개츠비 클라우드를 통한 블로그 생성을 시작해보자.

---

블로그 생성

난 기존에 개츠비로 만든 블로그가 없었기 때문에, 템플릿에서 시작했다. Start from a Template을 선택하자.

여러 스타터 템플릿 중 나는 Minimal Blog 를 선택했다.
괜찮은 템플릿인지 아닌지는 잘모르고 깔끔해서 골랐는데, 괜찮다고 생각한다.

아직도 개츠비에 대해 잘모르는게 많은데, 이 블로그는 많은 커스터마이징을 shadowing 을 통해 지원한다.

더보기

what is shadowing in gatsby?

또한 콘텐츠는 mdx 를 통해 제작할 수 있도록 지원하고, 그 외에도 기본적인 기능을 여러 제공하는데 자세한 내용은 템플릿 저장소에서 확인해보자.
이 다음 과정에서 난 이미 블로그를 생성하면서 깃헙의 권한을 개츠비에게 줬다. 모든 권한을 다 주어야 개츠비가 저장소를 생성할 수 있다.

선택했으면 이제 저장소의 이름을 작성하자. 여기서 작성된 이름으로 도메인이 작성된다.
이 이름은 바꿀 수 없는 것이 아니다. (저장소 이름은 못바꾼다.)

도메인 이름은 추후에 설정에서 바꿀 수 있다.

https://<project_name>.gatsbyjs.io

고생했다. 이제 당신의 블로그의 생성됐다.

---

블로그 상세 정보

이제 대시보드에서 생성한 블로그를 확인할 수 있다.

난 처음에 블로그의 이름 뒤에 개츠비가 붙는줄 모르고 생성했다가 나중에 이름을 바꿨다..

수동 빌드

만든 블로그의 디테일을 확인하기 위해 클릭하여 들어가보자.

Build , Site Settings 가 보인다. 이름만 봐도 뭘 하는지 알 수 있는 이름들이다.
오른쪽의 보라색 Trigger build 버튼을 통해 수동으로 빌드할 수 있다.

자동 빌드

이제 생성된 github 혹은 gitlab 저장소로 가보자. (아래의 예시는 github)

Settings → Webhooks 가보면 push 에 대한 웹훅이 생성된 것을 확인할 수 있을 것이다.
코드를 작성해서 push 만 하면 자동으로 빌드가 되게 설정되어 있는 것이다.

(이 부분에 대해서 main 브랜치만 업데이트되도록 설정된 것인지 잘모르겠다. edit 버튼을 누르고 들어가보면 브랜치 정보가 없다. 그런데 이 저장소는 main 브랜치가 하나이기도 하다.)

---

추가적으로 할만한 것

google analytic id

위의 과정에서 GOOGLE_ANALYTICS_ID 를 입력하는 과정을 생략했다.
만약 자신이 google analytics를 블로그에 추가했다면 (기본 설정이 analytics 활성화인지는 잘모르겠다.) ID를 입력하지 않아서 빌드가 실패했을 수도 있다.

위에서 언급된 Build Settings 를 눌러 이동해보자.

이동한 경우 General 로 이동해있을 것이다. 아래로 조금만 스크롤 다운하면, Environment variables 가 보인다. 여기에 GOOGLE_ANALYTICS_ID 가 비어있을 것이다. (이 id를 얻는 방법은 구글에 찾아보면 잘설명한 글이 많으니 참조하길 바란다.) 추가하고 수동으로 빌드하여 빌드가 성공했는지 확인하기 바란다.

추가 웹훅

조금 더 스크롤을 내려보면 Outgoing Notifications 이 보인다.

아마 이 2개의 웹훅이 표시되어 있을 것이다.
Add Notification 을 선택해 추가할 수 있다.

나의 경우 Slack 을 추가하여, 슬랙 채널에서 빌드,배포 실패 혹은 배포 성공시 알람이 울리도록 설정했다.

---

짤막한 후기

내가 여기 (티스토리)에서 글을 쓰는 것을 보며 이미 눈치 챈 사람도 있을지 모르겠다.

그냥 티스토리나 블로그 지원해주는 좋은 플랫폼 많으니까, 거기서 글 쓰는걸 추천한다.

 

개발자니까.. 개발자니까... 블로그는 스스로 만들어야 한다는 그런 생각.. 좋지 않다...
npm audit fix 이거 하다가 하루 날렸다. 원작자 저장소 코드 fork해서 가져와서 해봤는데, 똑같이 critical 2개 나왔다.

근데 티스토리도 좀 마음에 안든다.. 마크다운이랑 그냥 글쓰기랑 왔다갔다하니까 내가 설정해놓은 포맷이 깨지네.. 

 

여러모로 화가 나는 하루다.

---

Reference

• gatsby js cloud