Gatsby! 이걸 검색하면 이렇게 나온다. “위대한 개츠비!” 근데, 이거 아니다. 개발자들이 쓰는 거로 다시 검색 하셔야 한다. 블로그를 만들 때 이걸 어떻게 사용하나?
검색을 통해 유입이 잘되고 내가 원하는 형태로 구성을 쉽게 바꾸는 블로그를 만들고 싶다면 이보다 더 자유도가 높은 플랫폼이 없다.
Gatsby 는 React 언어와 Jamsack 을 기반으로 하는 정적 사이트 생성 프레임워크이다.
솔직히 이정도를 다룰거면 개발자가 되어야 하는 것은 아닌가 하는 생각이 들수도 있다.
물론, 필자도 개발에 대한 어느 정도 기본 지식을 가지고 있기 때문에 접근이 가능한 부분이 있는 것도 사실이다.
그러나 React 를 어깨 너머로 그냥 검색으로 더듬어 작업을 했는데 이 정도 구색을 갖추게 된 상황에서 야너두이다.
그러면, 어디서 부터 시작을 해보아야 할까요? 지금은 완성하고 글을 쓰는 거라 기억을 되짚어서 글을 써보겠습니다.
먼저 접근한 것은 Github 사용에 익숙해 져야 합니다. 이걸 설명하는 것도 잘 모르는 분들에게는 어려울 수도 있겠습니다.
그래도 한번 차근차근 살펴보죠.
Github 만들기
github 는 보통 소스코드를 커밋하고 배포하기 위한 오픈소스 서비스로 사용된다. 개발자도 아닌데 이게 왜 필요한가 생각할 수 있겠다.
다시 한번 생각해 보자. 여기서 내가 원하는 만큼 데이터와 이미지 등을 올려서 블로그를 만들 수 있는 환경을 구성할 수 있다면?
사용하지 않을 이유가 없다!
앞에서 설명한 정적 사이트 생성 프레임워크인 Gatsby를 사용하면 된다.
정적 사이트라는 것은 DB를 이용한 데이터베이스가 없이 HTML과 같은 정적인 데이터들을 사용한다.
마치 DB를 사용하는 것과 유사한 느낌으로 정적 데이터를 관리할 수 있게 하는 기술이라고 보면 이해가 쉽다.
먼저 github 가입을 하 시면 되겠다. 가입을 하면 repogitory 를 만들어야 하는데 이거는 가능하면 향후를 위해 다음과 같이 만들면 좋다.
github 에서는 github page 라는 자체 웹페이지 호스팅 서비스를 제공하는데 아래와 같은 이름 패턴으로 해당 페이지를 구성할 수 있다.
왠지모를 미래의 일을 대비하여 이렇게 해두면 도움이 되리라 생각된다. (굳이 이렇게 안해도 향후 진행에 상관은 없다.)
[id].github.io
예를 들면 kindjm.github.io 와 같은 이름으로 해주면 좋다.
Gatsby 설치
github 의 계정을 만들었으면 이제 gatsby 를 빌드하고 배포하는 방법에 익숙해져야 한다.
gatsby 를 다루기 위해서는 react 를 빌드하는 환경을 구성해야한다. npm 을 수행할 수 있는 환경이 되어야 한다.
이 부분에 대해서는 관련된 글들을 검색해서 참고해 보면 좋을 것 같다.
참고로, 필자는 맥북을 사용하여 구성하였다. 윈도우즈 환경에서도 유사하게 진행할 수 있을 것이라고 생각되니 이 부분은 참고하기 바란다.
그럼 gatsby를 빌드하기 위한 방법을 알아보자
npm install -g gatsby-cli
위와 같이 gatsby를 설치하도록 한다.
gatsby를 통해 처음부터 모든 것을 만들 수 있는 수준이라면 좋겠지만 대부분은 처음 시작하는 입장에서 한번 돌려볼만한 샘플이 필요하다.
Gatsby 테마 선택
다행히도 이런 환경을 위한 스킨을 제공하는 테마들이 무료로 제공되고 있다.
https://www.gatsbyjs.com/starters/
위의 사이트에서 도움이 될만한 테마를 사용하시면 된다. 이후 작업은 대동소이 할 것으로 보인다.
개인적으로 이전에 사용하던 티스토리 스킨과 유사하게 운영하기 위해 가장 비슷하게 보이는 처음에 테마를 골랐다.
https://gatsbytemplates.io/theme/flexible-gatsby-theme/
그럼, 이걸 어떻게 사용할 수 있는가? 대부분의 테마에 설명이 잘 되어 있다. readme 파일에 설명된 내용을 확인해 보기 바란다.
Git 환경 구성
그런데 여기서 잠깐! git 을 사용하기 위한 몇가지 조치를 해보자.
먼저 앞으로 테마를 설치할 폴더 이름을 정해 보자. 테마의 예시대로 my-blog 라고 해보자.
그러면 해당 폴더를 만들고 폴더로 들어가서 아래 명령어를 실행해 보자
git init
음… git 설치 방법을 설명 안한 것 같다. 그 내용은 매우 긴 이야기이니 검색을 통해 참고해 보기 바란다.
git 을 설치하면서 위의 명령어가 어떤 의미인지 이해가 될 것이다.
앞서 만든 github 와 계정을 연결하여서 소스코드를 배포할 수 있는 폴더를 초기화하는 작업이다.
Gatsby 테마 설치와 개발 모드 실행
이제 my-blog 의 상위 폴더로 와서 아래 명령어를 실행하자
gatsby new my-blog https://github.com/wangonya/flexible-gatsby
이렇게 원하는 폴더에 테마를 설치할 수 있다. 생각보다 단순하다.
설치를 했으니 어떻게 돌아가는지 맛을 보고 싶다.
cd my-blog/
gatsby develop
이렇게 실행해 보자. 정상적으로 오류 없이 실행이 된다면 다음 링크를 확인해보자
http://localhost:8080
웹서비스에 익숙하지 않은 분들을 위해 설명하면, 지금 내 PC 로 나만 확인할 수 있는 사이트가 돌아가고 브라우저를 통해 확인할 수 있다.
배포(인터넷에 공유)하기 전에 내 PC에서 어떻게 사이트가 돌아가는지 확인할 수 있도록 하는 기능이다.
이제 무언가 돌아가는 것을 보니 성취감을 가지게 된다!
Git 배포
성공적으로 실행이 되는가? 그렇다면 git 작업도 1차적으로 마무리해보자
git add .
git commit -m “first gatsby”
git push
요렇게 해보자. 혹시 안되면 -f 옵션을 주어서 강제로 보내자. 그래도 안되면 약간의 검색으로 오류 메시지를 대응해 준다.
이제 기본적인 gatsby 시작 준비가 되었다.
What is next?
그러면 궁금함이 생길 것이다. 이걸 인터넷에서는 어떻게 보는거지? 글은 어떻게 쓰나? 이건, 글이 길어져서 다음 글로 이어가겠다.