WiseKim
WiseKim 관리자

Jekyll 블로그 Netlify 배포를 위한 Github 연동


Jekyll 블로그 Netlify 배포를 위한 Github 연동

Netlify 에 Jekyll 블로그가 저장되어 있는 Github Repository 를 연동해보겠습니다.
Netlify 사이트로 접속합니다.

https://netlify.com/

사이트 중앙의 Get started for free 버튼 혹은 오른쪽 상단의 Sign up 버튼을 클릭합니다.

walking



Github 계정을 이용하여 회원 가입을 진행합니다.

walking



팝업 창이 뜨면 Authorize netlify 버튼을 클릭합니다.

walking



그 다음 각 항목을 입력한 후 하단의 Set up and continue 버튼을 눌러 회원 가입을 진행합니다.

walking



우리는 이미 Github 에 Jekyll 프로젝트 Repository 가 있으므로 Import from Git 버튼을 클릭합니다.

walking



하단의 Github 버튼을 클릭합니다.

walking



팝업 창이 뜨면 Authorize Netlify 버튼을 클릭합니다.

walking



Jekyll 프로젝트의 Repository 만 선택합니다.
Only select repositories 를 선택한 후 Jekyll 프로젝트 Repository 를 선택합니다.
Install 버튼을 클릭합니다.

walking



Netlify 에 Github Repository 가 연동되었다면 아래 스크린샷처럼 표시될 겁니다.
Jekyll Repository 를 선택합니다.

walking



그 후 배포할 때 사용 할 브랜치를 선택합니다.
우리는 master 브랜치에 업로드하였기 때문에 master 브랜치를 선택합니다.
그럼 앞으로 master 브랜치에 새로운 Commit 이 생기면 Netlify 가 자동으로 배포를 진행합니다.
Deploy site 버튼을 클릭합니다.

walking



그 후 아래 스크린샷처럼 블로그 배포 진행 상황을 확인하실 수 있습니다.
현재 Building 중인 것을 확인하실 수 있습니다.

walking



조금 시간이 지나고 정상적으로 배포가 완료되면 아래 스크린샷처럼 Published 로 변경된 것을 확인하실 수 있습니다.

walking



위쪽에 보면 Netlify 에서 제공하는 자신의 Jekyll 블로그 주소를 확인하실 수 있습니다.
해당 사이트 주소로 접속합니다.

walking



접속은 정상적으로 되었는데 아래 스크린샷처럼 이미지가 등장하지 않고 레이아웃도 비정상적입니다.

walking



해당 문제를 해결하기 위해 Visual Studio Code 로 이동합니다.
그 후 _config.yml 파일을 열어 수정합니다.
url 항목을 추가하고 baseurl 항목을 주석처리 합니다.

1
2
url : 'Netlify 사이트 주소'
# baseurl: /mediumish-theme-jekyll

walking



그 후 Source Control 메뉴로 이동한 후 _config.yml 수정 내용을 Commit & Push 를 합니다.

walking



다시 Netlify 사이트로 이동하면 Github Repository 에 새로운 Commit 이 생겼기때문에 자동으로 배포가 진행되는 것을 확인하실 수 있습니다.

walking



조금 시간이 지나면 아래 스크린샷처럼 배포가 완료됩니다.

walking



다시 Netlify 의 Jekyll 블로그 주소로 접속하면 이미지와 레이아웃이 정상적으로 표시되는 것을 확인하실 수 있습니다.

walking



다음 순서 : Netlify 서브 도메인 주소 변경하기



comments powered by Disqus