맥에서 깃허브 Jekyll 블로그 설치 방법

개발 블로그를 운영하려는 사람들은 다들 한 번쯤 관심을 가져보았을 깃허브 블로그 설치방법을 알려드리려 합니다. 깃허브(GitHub)는 깃허브 페이지라는 정적 웹페이지 무료 호스팅 서비스를 제공합니다. 프로젝트 소개용 사이트를 생성할 수도 있지만 Jekyll이라는 정적 웹페이지 생성기를 통해 개인용 블로그를 만들어 배포할 수도 있습니다.

 

아무런 세팅이 되어 있지 않다는 전제에 설명드립니다.

xcode 설치

만약 깃이 설치되어 있지 않다면 xcode를 설치합니다. 최신버전의 맥 os를 사용하고 계시다면 바로 xcode를 다운로드하시면 됩니다. 하지만 현재 xcode 호환 문제로 설치 진행이 되지 않으시는 분들은 아래의 링크로 가셔서 호환되는 이전 버전을 설치하시기 바랍니다.

 

호환되는 버전을 확인 하는 방법은 앱스토어 상에 xcode를 검색하셔서 들어가시면 앱의 version history에서 사용하고 계시는 MacOS의 버전과 호환되는 버전을 확인하실 수 있습니다.

 

https://developer.apple.com/downloads/more/

 

설치가 완료되었다면 터미널에 아래의 명령어를 통해 설치가 잘 되었는지 확인해봅니다.

git -v

코드 편집기 설치

이후 블로그에 필요한 파일들을 수정할 때 필요합니다. 마음에 드시는 것으로 사용하시면 됩니다. 저는 Atom을 사용합니다.

https://atom.io

Homebrew 설치

Jekyll은 Ruby라는 개발언어를 기반으로 만들어졌기 때문에 Ruby를 설치해야 합니다. 맥에는 시스템 상에 Ruby가 설치되어 있지만 보안상의 문제로 접근이 막혀있으며 sudo를 사용해 강제로 접근하는 것은 권장하지 않습니다. 별도의 Ruby를 설치하기 위해 맥용 패키지 관리자인 Homebrew를 설치합니다.

 

터미널에 아래 명령어를 실행합니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

설치가 잘 되었는지 버전을 확인해 봅니다.

brew -v

Ruby 설치

Homebrew로 최신버전의 Ruby를 설치합니다.

brew install ruby  

터미널 재시작 후 설치된 버전을 확인합니다.

ruby -v

Jekyll 설치

gem install jekyll bundle

웹페이지 생성기인 지킬을 컴퓨터(로컬)에 설치하는 과정을 마쳤습니다. 이후 만들어질 웹페이지를 업로드하기 위해 깃허브에서 레포지토리를 만들어야 합니다.

GitHub repository 생성

깃허브에 가입하시고 레포지토리를 생성합니다. 생성할 때 레포지토리 이름을 아래와 같이 자신의 아이디를 넣어 만듭니다.

username.github.io

특별한 설정은 할 것 없이 바로 생성합니다. 단, 주의하실 점은 무료로 사용하시려면 반드시 Public으로 생성하셔야 합니다. Private으로 GitHub Pages를 이용하기 위해서는 프로 요금을 지불하셔야 합니다.

 

이외에도 알고 계셔야 할 것이 있습니다. 깃허브 페이지가 무료로 도메인과 호스팅을 제공하지만 제한사항이 있습니다. 총 용량 1GB 제한과 월 트래픽 100GB를 넘어가면 접속 제한이 있습니다.

 

용량은 마크다운 기반이기 때문에 큰 문제는 되지 않습니다. 텍스트만 사용했을 경우 채우는 것은 거의 어렵다고 보셔도 되고 이미지는 마크다운에서 링크식으로 사용하기 때문에 이 또한 문제가 되지 않습니다. 텍스트만 사용했을 시 하루 평균 2만 명 정도는 감당할 수 있습니다(참고 글).

 

문제는 이미지를 문서당 1개 이상 사용하는 블로그라면 이미지 링크도 번거로울뿐더러 100GB의 트래픽은 전문적으로 블로그를 운영하실 계획이라면 턱없이 부족할 수 있습니다.

Git GUI

다음으로 git을 관리하는 git gui를 설치합니다. 저는 GitHub Desktop을 이용했습니다. (gui가 없어도 관리가 가능하지만 입문자에게는 필수입니다.)

 

https://desktop.github.com

 

GitHub Desktop을 실행해 깃허브 아이디로 로그인합니다. 앞서 만들었던 레포지토리를 피시로 불러오는 작업을 clone이라고 합니다.

깃허브 사이트 - 해당repository>code>open with github desktop

 

클론되었다면 로컬(PC)에도 이제 폴더가 생성되었을 겁니다.

Jekyll Theme 적용

http://jekyllthemes.org

 

마음에 드는 테마를 골라 다운로드합니다. 압축을 풀고 내부 파일들을 모두 앞서 클론으로 생성된 로컬 레포지토리 폴더 안에 넣어줍니다.

 

Atom을 실행하셔서 블로그 폴더를 Atom 위로 드래그하면 블로그 내부 파일들을 편리하게 수정할 수 있게 됩니다. _config.yml를 눌러 블로그 이름이나 작성자명 등 블로그 정보를 모두 수정합니다. baseurl은 비워두시고 url부분을 채워 넣으시면 됩니다. config파일 수정 시 유의하실 것은 테마 내용물 중에는 불필요하게 공간을 띄워놓은 경우가 있는데 이런 경우 제대로 파일이 인식되지 않을 수 있습니다.

올바른 예 url : "주소"
잘못된 예 url :       "주소"

로컬에서 확인

이제 블로그가 제대로 실행되는지 로컬에서 확인하는 과정입니다. 터미널에서 일련의 명령들을 순서대로 실행합니다. cd는 명령하는 위치로 이동하겠다는 명령어입니다.

cd 레파지토리경로

예시) cd /Users/이름/Documents/GitHub/username.github.io

gem install bundler

bundle install

bundle update

로컬에서 블로그가 잘 실행되는지 확인하기 위해 아래 명령어를 입력합니다.

bundle exec Jekyll serve

잘 실행되었다면 아래 주소로 들어가 확인합니다.

http://127.0.0.1:4000

웹페이지 업로드

만들어진 블로그를 업로드하기 위해 깃허브 데스크톱에서 changes에서 summary에 기억하기 좋게 블로그 생성이라고 입력하고 commit to master를 눌러줍니다. 이렇게 하면 로컬에 일어난 변화가 그대로 깃허브 사이트에 업로드됩니다.

 

이제 커밋(업로드)된 사이트를 발행하는 마지막 과정입니다. 해당 repository로 들어가셔서 Setting으로 들어갑니다. 하단으로 스크롤하면 GitHub Pages가 나옵니다. none으로 되어있는 것을 master로 바꾸어주시고 save합니다. 이제 username.github.io에 접속하셔서 업로드된 블로그를 확인하실 수 있습니다.

글 작성

글을 업로드하려면 로컬 레포지토리>포스트폴더에 들어있는 샘플 마크다운 문서들과 같은 양식으로 제목을 적고 마크다운 문서를 만들어 앞서 설명드린 방법으로 커밋하면 자동으로 글이 적용됩니다.

 

 

HTML 태그 정리

깃허브 블로그 말고 티스토리를 선택한 이유