Coding Log

사용된 기술 스택

참고 Static Tools / Jekyll 카테고리

Github Pages에 Jekyll로 정적 웹사이트 배포하기

여태까지 Jekyll의 공식 문서 번역을 통해 Jekyll이 무엇인지 어떻게 쓰는지, 어떻게 동작하는지를 알아보았다.

포스팅중에 Github Pages의 내부 엔진으로 Jekyll이 있다고 했는데, 본 포스팅을 통해 Jekyll을 이용하여

로컬 저장소(본인의 컴퓨터)에 Jekyll로 정적 블로그를 생성하고 Github Pages를 이용해 웹상에 배포하는 것까지 알아보자.

준비물

  • Github 계정

  • git이 설치되어 있는 환경

  • Ruby (Jekyll 2 : v1.9.3이상, Jekyll 3 : v2이상)

  • RubyGems

  • GCC

  • GNU Make

  • Node.js 혹은 Javascript Runtime

  • Python 2.7

참고 Jekyll 설치하기 포스팅

Jekyll이란 무엇인가?

참고 Jekyll에 관하여 포스팅

Github Pages란 무엇인가?

Jekyll을 이용하면 로컬 환경에서도 블로그를 만들 수 있지만, 이것으론 한참 모자라다.

블로그라는 것은 인터넷 생태계를 통해 타인에게 정보를 전달할 수 있는 하나의 플랫폼이기 때문에 자기 자신만의 만족을 위해

로컬에만 구축하는 걸 원하는 사람은 거의 없을 것이기 때문이다.

Jekyll로 만들어진 정적 블로그를 웹 상에 배포한다고 하면 일단 도메인 주소를 구매해야하고, 따로 로컬 서버를 구축하지 않는다면 웹 상에서 AWS와 같은 서버를 구매해야할 것이다.

하지만 Github Pages를 이용하면 무료로 <username>.github.io라는 도메인과 함께 호스팅까지 함께 해주기 때문이다.

결국 Github Pages란 일종의 정적 사이트 호스팅 서비스로서, Github내에 존재하는 User나 Organization에서 Github 자체의 repository를 이용해 자체적으로 호스팅해준다.

물론 정적 페이지만 호스팅해주기때문에 PHP, Ruby, Python과 같은 서버사이드의 코드를 지원하진 않는다.

참고 Github Pages 공식 사이트

Jekyll로 로컬 환경에 블로그 생성하기

위의 준비물에 써있는 내역을 전부 설치했다면 Jekyll로 블로그를 생성할 준비가 완료된 것이다.

만약 전부 설치하지 않았다면 아래를 참고하여 설치하기바란다.

참고 Jekyll 설치하기 포스팅

평소에 Github를 써봤다면 Github의 repository에 있는 프로젝트를 pull을 이용해 로컬로 내려 받을 수도, push를 이용해 로컬에 있는 프로젝트를 repository에 올릴 수 있다는 것을 인지하고 있을 것이다.

마찬가지로 로컬에서 Jekyll로 생성한 블로그도 일종의 프로젝트이기 때문에 repository에 올려서 Github Pages 서비스를 이용할 수 있다.

만약 빠르게 Jekyll을 경험하고 싶다면 아래의 기본 사용법 포스팅을 참고하도록 하자.

참고 Jekyll 기본사용법 포스팅

아래 순서대로 진행하여 Jekyll로 로컬에 정적 블로그를 생성해보자.

프로젝트 폴더를 생성할 위치로 이동

본인은 바탕화면에 프로젝트 폴더를 생성하는 것을 예시로 들겠다.

Jekyll로 블로그 생성

아래 명령어를 통해 기본적인 형태의 블로그를 생성할 수 있다.

jekyll new <BLOG_NAME>

Github Pages를 이용할 것이므로 <username>.github.io 형태로 블로그명을 지정한다.

물론 폴더명과 repository의 이름은 별개이므로 꼭 똑같을 필요는 없고, 편한 이름을 지정해도 된다.

본인의 Github 계정은 mydamyda이므로 아래와 같이 명령을 수행했다.

jekyll new mydamyda.github.io

위의 명령을 수행하면 아래와 같은 화면이 터미널에 보일 것이다.

자동으로 생성된 폴더를 들어가보면 아래 처럼 Jekyll 프로젝트의 기본적인 파일들이 생성되어 있다.

기본 생성된 블로그 확인

아래 명령어로 생성된 프로젝트 폴더로 이동하자.

cd <BLOG_NAME>

그 다음, 아래의 명령어를 통해 로컬 서버를 띄워 생성된 블로그를 확인할 수 있다.

jekyll serve

위의 화면이 나오면 정상적으로 로컬 서버가 동작하는 것이다.

ctrl-c 핫키를 통해 프로세스를 종료할때까지 로컬 서버를 유지한다.

위의 Server address라고 나온대로 http://127.0.0.1:4000/ 혹은 http://localhost:4000/ 으로 접속해보자.

접속하면 아래와 같은 화면이 나올 것이다.

이로써 Jekyll을 통해 로컬 환경에 정적 블로그를 생성한 것이다.

Github에 블로그 프로젝트를 올릴 repository 생성

로컬에서 제작한 정적 블로그를 웹 상에 배포하기 전에 Github에 블로그용 repository를 생성한 뒤 로컬의 프로젝트와 연결해야 한다.

먼저 Github에 접속하자

우상단에 존재하는 + 모양 버튼을 눌러 새로운 repository를 생성하자

그럼 아래와 같은 화면이 출력될 것이다.

생성할 때 주의해야할 점이 있다. Github Pages의 기능을 이용하려면 repository의 이름을 규칙에 맞게 작성해야 한다.

개인 repository에 작성할 땐 <username>.github.io로, 단체 repository에 작성할 땐 <organization_name>.github.io로 이름을 지정해야한다.

여기선 개인 repository에 생성하므로 아래 화면처럼 입력한다.

이제 로컬에 생성한 프로젝트와 Github의 repository를 연결시키자.

로컬의 정적 블로그 프로젝트와 Github 연결

Git으로 블로그 변동 추적하고 원격 저장소 등록하기

본 포스팅에서는 터미널 명령어를 기준으로 작성한다.

만약 소스트리 와 같은 GUI기반 프로그램이 익숙하다면 이번 섹션은 넘어가자.

다시 터미널로 가서 Git 저장소를 생성하자.

이전에 생성한 블로그 프로젝트 폴더로 가서 아래의 명령어를 입력한다.

git init

그러면 아래의 화면과 함께 git 저장소가 생성된다.

이제 Github에 생성해둔 repository와 연결하자.

아래의 명령어를 통해 Github의 repository와 연결한다.

git remote add origin <REPOSITORY_URL>

위처럼 입력하면 되는데 <REPOSITORY_URL>는 아래 화면에서 간편하게 복사할 수 있다.

이제부터 프로젝트의 변경사항을 Git이 트래킹하여 변경사항을 알 수 있을 것이다.

Github repository에 Push하기

이제 로컬에 생성한 정적 블로그 프로젝트를 Github의 repository에 올려보자.

Git에 대한 자세한 설명은 추후에 별도로 포스팅하도록 하겠다.

아래 명령어를 통해 모든 변경사항을 원격에 올린다고 명시한다.

git add .

그 다음 commit을 진행한다. message는 임의로 작성했다.

git commit -m "<MESSAGE>"

이제 master 브랜치에 push 하자.

git push origin master

여기까지 성공적으로 진행했다면 웹 브라우저에서 Github의 repository를 들어가보자.

위와 같이 repository가 갱신되었음을 확인할 수 있다.

이제 Github Pages는 자동으로 호스팅을 진행해준다.

<username>.github.io로 접속해보자.

로컬에 Jekyll로 생성한 정적 블로그가 성공적으로 원격 repository에 올라가고 고유의 도메인과 함께 작동하는 것을 확인할 수 있다.

만약 페이지를 찾을 수 없다고 뜬다면 잠시 기다렸다가 새로고침을 해보자.

마무리

이제 별도의 비용 지출없이 정적블로그를 운영할 수 있게 되었다.

본 블로그의 Jekyll 카테고리에서 Jekyll의 사용법을 잘 익힌 뒤 자신만의 블로그를 잘 꾸며보도록 하자.

DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다