Mac OS에서 Jekyll로 Github 블로그 만들기!
블로그를 시작한지 벌써 9개월 째에 접어들고 있다. 블로그를 시작하기 전에 어느 플랫폼에서 블로그를 시작할지 정말 많이 고민하다가 고른 것이 티스토리 블로그였다. 지금은 조금 후회 중이다. 블로그를 처음 시작할 때는 개발에 대한 지식이 전무했던 때이기 때문에 워드프레스나 다른 기타 플랫폼에 대해서 잘 알지 못했다. 그나마 네이버 블로그보다는 티스토리 블로그에 대해 자유도가 높다고 들어서 티스토리 블로그를 운영 중인데 썩 마음에 들지 않는다. 우선 편집하는 것이 너무 귀찮다. 그러던 도중 Jekyll이 유행이라고 해서 블로그를 만들어봤다.
아래 포스팅을 따라가면 아래 링크와 같은 블로그를 가질 수 있다. 세부적인 사항은 조금 수정해야 한다. 최종적으로는 이 티스토리 블로그를 migration 해보고 싶었지만 아직 시도해보지 못했다. 일단 블로그처럼 보이게만 만들어두었다. 각종 블로그들을 돌아다니면서 겪은 시행착오들을 함께 기록해두어 쉽게 따라할 수 있을 것이다! 사소한 명령어들까지 모조리 정리해봤다.
1. 우선 Github Repository 생성한다.
Github Repository를 생성하려면 일단 Github 계정이 있어야 한다!
아 그리고 'Repository name' 를 설정해줄 때, ( ***.github.io ) ***에 해당하는 부분은 계정 이름이어야 한다!
2. jekyll설치
우선 루비가 설치되어있어야 하는데 의존성 관리를 위해 rvm을 설치해준다. ( rvm은 노드 진영의 npm과 비슷한 의존성 관리 도구로 ruby 진영에서 사용되는 것이라고 생각하면 된다. ) RVM 설치는 다음과 같이 설치할 수 있다.
1 | curl -sSL https://get.rvm.io | bash -s table —ruby | cs |
RVM 설치가 완료되면 github에서 사용하는 버전인 2.3.1 버전으로 ruby 설치를 진행한다.
1 | rvm install 2.3.1 | cs |
에러가 발생한다. 시작부터 심상치 않다.
솔루션을 아래 스택오버플로우에서 찾았다.
1 | sudo vi ~/.bashrc | cs |
이 파일로 들어가서 double quote를 지워주자.
이 녀석 때문에 rvm 설치가 깔끔하게 되지 않았다.
다시 rvm install 2.3.1 명령어를 입력해주자!
그리고 기존에 설치되어있던 ruby 1.9.3을 사용하는 것이 아니라
이번에 새로 설치한 2.1.1 버전을 사용하기 위해 디폴트 버전을 변경한다.
1 | rvm —default use 2.3.1 | cs |
블로그를 위한 라이브러리들을 한꺼번에 받기위한 bundler란 녀석을 설치해주자.
1 | gem install bundler | cs |
3. 이제 우리가 아까 만들어준 git repository를 clone해오자.
원하는 곳에 clone하면 된다.
필자는 blog라는 디렉토리를 생성하여 그곳에 clone을 하였다.
1 2 3 | mkdir blog cd blog git clone https://github.com/JaeYeopHan/jbee.github.io.git | cs |
그리고 해당 폴더로 이동하면 되겠다.
1 | cd jbee.github.io | cs |
Gemfile을 생성해주기 위해 bundler를 사용해 폴더를 init해준다.
git을 사용하는 것처럼 init을 해주는 것이다.
1 | bundle init | cs |
이렇게 하면 GemFile이 생성된다.
이제 이 GemFile에 각종 모듈들을 입력하여 설치해야 한다.
어떤 모듈들을 설치해야 하는가?
Github에서는 친절하게도 jekyll 사용을 위해 필요한 라이브러리들의 의존성을 업데이트 해주고 있다.
아래 링크를 통해 확인하자.
그리고 이에 맞게 GemFile을 업데이트 해주자!
vi를 이용하여 GemFile을 열어주고,
위 링크에서 JSON 파일이 제공되므로 Copy & Paste하여 설정해준다.
그리고 vi 명령어를 통해 double quote를 single quote로 바꿔주자. (vi 위엄...)
:%s/“/‘/g
그리고 ruby는 빼주자! ruby는 이미 우리가 위에서 설치했다.
위 과정이 복잡하다면 다음의 json을 복사해서 사용해도 된다.(참고한 블로그에서 참고하였다.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | source 'https://rubygems.org' gem 'jekyll', '2.2.0' gem 'jekyll-coffeescript', '1.0.0' gem 'jekyll-sass-converter', '1.2.0' gem 'kramdown', '1.3.1' gem 'liquid', '2.6.1' gem 'maruku', '0.7.0' gem 'rdiscount', '2.1.7' gem 'redcarpet', '3.1.2' gem 'RedCloth', '4.2.9' gem 'pygments.rb', '0.6.0' gem 'jemoji', '0.3.0' gem 'jekyll-mentions', '0.1.3' gem 'jekyll-redirect-from', '0.4.0' gem 'jekyll-sitemap', '0.5.1' gem 'github-pages', '22' | cs |
bundle install이라는 명령어를 통해 GemFile에 입력해준 모듈들을 설치해주자.
1 | bundle install | cs |
오오오오... 우리가 설정한 모듈들이 차례대로 설치된다.
터미널 작업은 항상 재밌다.
4. 이제 jekyll을 실행해보자.
설치가 끝났으면 이제 jekyll을 실행해보자.
1 | jekyll new . —force | cs |
역시나 쉽게 넘어가는 법이 없다. 터미널에서의 작업은 늘 수월하지 않다. 여러 가지 에러가 우수수 떨어진다. 당황하지 말고 가만히 읽어보면 아래 명령어들을 수행해달라는 것이다. 루비는 처음이라 무슨 모듈인지도 모르겠고 도대체 왜 때문인지 모르겠다... 지레 짐작으로는 해당 모듈들이 설치가 안됬으니까 설치가 필요하다고 말하는 것 같다. 왜 GemFile에서 자동으로 설치되지 않았는지 의문이다.
1 2 3 4 | gem pristine executable-hooks --version 1.3.2 gem pristine ffi --version 1.9.14 gem pristine gem-wrappers --version 1.2.7 gem pristine nokogiri --version 1.6.8.1 | cs |
정말 이제 다끝났다. 이제 웹 서버에 띄워보자.
1 | jekyll serve —watch | cs |
이제 블로그를 운영하는 개발자가 되보도록 하자!
Happy Coding!
'Dev.World > Be 개발자' 카테고리의 다른 글
| 스타트업 개발 인턴 면접 vs 대기업 개발 인턴 면접 (0) | 2017.01.08 |
|---|---|
| 2016년 블로그 포스팅 회고, 블로그를 시작하려는 사람들에게 (0) | 2016.12.30 |
| 개발 입문자를 위한 짤막한 안내서 - Hello Coding World (7) | 2016.09.27 |
| [그로스 해커] 프로그래머, 더이상 프로그래밍만 하지 않는다. 그로스 해킹이란?(Growth Hacking) (0) | 2016.08.12 |
| [백엔드] 자바 웹 개발자 로드맵 (0) | 2016.06.23 |
