[Gatsby + Netlify] 조합으로 블로그 개설하기 - 2

July 28, 2019

지난 글에서 Gatsby를 설치하고 자신만의 블로그를 만들어 보는 시간을 가졌습니다. 이제 로컬 환경에서, 자신의 컴퓨터에서만 접근할 수 있는 블로그를 외부 사람도 접근할 수 있게 만드는 법을 알아보겠습니다.

블로그를 외부에서도 볼 수 있게 하려면 HTML 페이지를 서버에 올려야 합니다. 지난 글에서 설명한 바로는 Gatsby는 CMS나 Markdown 등으로 작성된 페이지를 HTML + CSS + JS로 변환해 주는 역할을 한다 했습니다. 그런데 이 파일들은 어디 있을까요? 사실 Gatsby로 웹 페이지를 생성하기 위해서는 다음 명령어를 입력해야 합니다.

gatsby build

Gatsby를 이용해 웹 사이트를 빌드한다는 것은 작성한 페이지를 HTML로 변환하는 작업입니다. (사실 그 외에도 웹 페이지의 최적화 등의 작업도 실행합니다.) 빌드 결과물은 public/경로 아래에 생성됩니다. 여기 생성된 것이 바로 우리가 서버에 올려야하는 페이지 입니다. 글을 쓰거나 수정하는 데에도 재빌드한 후에, 빌드한 결과물을 다시 서버에 올려야 합니다. 이렇게 귀찮은 작업을 매번 반복해야 할까요? 다행히도 이 과정을 자동으로 해주는 Netlify라는 자동 배포서비스가 있습니다.

Netlify를 이용한 배포

netlify 화면

Netlify는 간단한 세팅으로 지속적인 자동배포가 가능합니다. GitHub의 원격 저장소를 연동해서 사용할 것이므로 Git을 설치하고, GitHub에 가입합시다. 본 글에서는 Git과 GitHub이 갖춰진 환경을 가정하고 진행하겠습니다. Git을 설치하고 사용하는 방법은 향후 포스팅 할 예정입니다.

GitHub에 Repository 만들기

GitHub에 원격 저장소(Repository)를 만들어 봅시다. 자신의 GitHub 페이지에서 Repository를 선택한 후에 New 버튼을 눌러 새로운 저장소를 만듭니다. 저장소 이름을 적당히 (블로그 관리용 저장소라는 것을 나타내는 것이 좋습니다) 짓고 public, private 여부를 선택합니다. 그리고 Initialize this repository with a README라는 체크 버튼이 있는데 체크가 되어있다면 해제합니다. 로컬 저장소와 충돌을 피하기 위해 설정합니다. Add .gitignore, Add a license를 None으로 맞춰줍니다. 그후 Create repository를 눌러 저장소를 생성합니다.

레포지토리 만들기

원격 저장소를 만든 후 지난번 blog/ 경로에 들어갑시다. 현재 .git/경로에는 최초 커밋기록이 포함되어 있습니다. 해당 커밋을 그대로 이어가서 관리해도 되고, 새로 만들어 관리해도 됩니다. 후자의 경우로 진행하겠습니다. .git/ 경로를 지우고 git bash를 실행해 봅시다. 윈도우의 경우에 오른쪽 클릭 후 ,Git Bash Here를 선택하면 해당 경로에서 실행됩니다.

Bash가 실행되면 다음 명령어를 입력합니다.

(blog 경로에서)
git init
git add .
git commit -m "init Commit"

해당 경로에 있는 모든 파일, 디렉토리를 추가하고 최초 커밋을 실행하였습니다. 완료 후에는 원격 저장소와 연결합니다. 자신의 GitHub profile에서 myblog-test를 눌러 ~~~.git으로 되어있는 주소를 확인할 수 있습니다.

원격 저장소 주소

사실 여기에 어떻게 해야하는지 모두 나와있습니다.

주소를 확인 후에 다음 명령어를 실행합니다.

git remote add origin [원격 저장소 주소]
git push origin master

완료되면 이제 원격 저장소에 로컬 파일들이 추가된 것을 확인할 수 있습니다.

push 된 모습

Netlify에 Repository 연결

Netlify

위 링크로 Netlify 사이트로 이동하여 Get started for free를 눌러 가입합니다. GitHub를 눌러 계정을 연동합니다. 원격 저장소에 대한 몇가지 권한을 요청하는데 거의 확인버튼으로 진행합시다.

nt 메인화면

계정을 연동한 후에는 메인화면이 나옵니다. 제 경우 본 블로그를 운영하는 부분이 보입니다. 오른쪽의 New site from Git을 눌러 원격 저장소와 연결해 봅시다.

nt 저장소 연결1

GitHub를 눌러 다음으로 진행합니다.

nt 저장소 연결2

만약 자신의 Repository가 표시되지 않는다면, Configure Netlify on GitHub를 눌러 원격 저장소를 연결해 줍시다.

nt 저장소 연결3

nt 저장소 연결4

자신의 계정을 클릭하여 Repository access 설정을 확인합니다. 모든 저장소를 연결할 수도 있지만 밑의 설정으로 선택한 저장소만 Netlify에 연결하는 것이 가능합니다. myblog-test를 추가하고 저장한 후 다음으로 진행합니다.

nt 저장소 연결5

이제 거의 다왔습니다. Branch to deploy는 자동 배포를 실행시킬 브랜치 명을 입력합니다. 만약 별도의 브랜치에 푸쉬할 때만 배포하고 싶다면 해당 브랜치명으로 수정합니다. 기본으로 master로 두는 것을 권장합니다. 밑의 Build command는 push 될때 자동으로 빌드할 명령어를 입력하는 란입니다. gatsby build를 입력합니다. publish directory는 빌드 후 웹 페이지들이 생성되는 위치를 가리킵니다. 기본적으로 public/ 경로에 생성되므로 public/을 입력해 줍시다. 위 그림처럼 설정한 후에 Deploy site를 누르면 이제 자동 빌드 및 배포가 시작됩니다.

Site 이름 바꾸기

nt 사이트 생성 중

배포까지 5분 정도 소요됩니다. 만약 본인이 사용하는 도메인이 있다면 도메인 설정으로 넘어갑니다. 제 경우 아직 개인 소유한 도메인이 없어 Netlify에서 기본으로 제공하는 ~~~.netlify.com을 이용하고 있습니다. 현재 사이트 명이 jolly-yalow-e68fe0로 되어 있는데 이게 그대로 도메인에 적용되어 복잡해 보입니다. 그러니 간단한 사이트명을 설정해 봅시다. Site setting을 눌러 설정화면으로 진입합니다.