혼자서 Jekyll Blog 만들기 - 1편
Jekyll 설치부터 블로그 생성 그리고 Github에 올리기까지
코드 1도 모르는 디자이너의 눈물 나는 도전
드디어 예전부터 벼르고 벼르던 Jekyll로 Blog 만들기 도전을 시작했다.
시작의 이유는 여러 가지였다.
- 포트폴리오와 블로그를 겸할 나만의 공간이 필요해서.
- 마크다운 잘 모르지만 일단 저질러 놓고 공부하려고.
- 돈이 안 들어서.
- 뭔가 되게 있어 보여서.
또한, 아주 감사하게도 최근 회사의 아주 유능한 개발자님의 도움을 얻어 조금씩 느리게 개발 공부를 해보고 있었던 터라 술술 개발은 못하더라도 나름 코드와의 어색함이 조금은 허물어진 느낌이랄까? (후훗) 이라고 생각했다가 지금 눈물을 닦으며 이 글을 쓰고 있다.
험준했던 나의 과정을 의식의 흐름대로 풀어보겠다.
1. Jekyll 설치하기
여기저기 구글링 해보니 macOS에 터미널이라는 프로그램을 켜고 그 까만 창에 $ gem install jekyll 이라고 치면 설치가 된다고 해서 개발자가 된 것 마냥 비장하게 입력 후 뙇 엔터를 눌러보았지만 fail...
지금부터 간단하지만 간단하지 않은 Jekyll 설치 과정을 소개한다.
(1) Xcode 설치하기
일단 Xcode를 깔아야 한다. 앱스토어로 이동. 근데 설치도 전에 버전이 맞지 않는다고 해서 얼떨결에 나의 하이씨에라로 강제 업그레이드하게 되었다. 이후 다시 해보니 Xcode 설치 성공!
(2) HomeBrew 설치하기
Jekyll를 설치하기 위해선 Ruby라는 것도 설치해야 한다. 근데 mac에는 Ruby가 이미 설치되어 있다고 한다. 확인차 터미널에 ruby -v이라고 치니 Ruby의 현재 버전 정보가 뜨면서 확실히 설치되어 있는 것을 두 눈으로 볼 수 있었다.
근데... Jekyll이 설치가 안된다... 왜 때문에....?
진짜 별에 별거 다 해보고 구글링 해서 찾은 결론은,
- mac에 설치되어 있는 Ruby는 안된다. (왜 안돼?)
- 그러므로 HomeBrew라는 맥용 패키지 관리자를 설치해서 Ruby version manager을 통해 해야 한다.
위에 링크를 타고 HomeBrew 홈페이지에 들어가면 대따 크게 '설치하기'가 나온다. 밑에 코드를 터미널에 복붙 해서 설치하면 된다.
(3) Ruby version manager 설치하기
HomeBrew 설치가 완료되었다면, 터미널에 $ brew install rbenv ruby-build를 쳐보자.
그러면 Ruby version manager도 설치 완료!
(4) Ruby 설치하기
이제 터미널에 $ rbenv install 2.4.3 라고 치면 Ruby 설치도 완료!
(5) 대망의 Jekyll 설치
무작정 터미널에 입력 후 엔터를 눌렀던 그 코드... 이제야 비로소 터미널에 입력할 때가 왔다.
$ gem install jekyll
2. Jekyll로 블로그 생성하기
길었던 Jekyll 설치를 마쳤으니, 이제 블로그를 생성해보려고 한다.
(1) Jekyll아 블로그 만들어줘.
터미널에 이렇게 쳐준다.
$ jekyll new maemi-blog
저 maemi-blog라는 자리에는 그냥 하고 싶은 이름을 쓰면 된다.
저렇게 적고 엔터를 누르면, maemi-blog라는 폴더가 생긴다는데 어디 있는지 몰라서 일단 패스.
(2) 내 블로그 서버 주소 확인하기
$ cd maemi-blog 를 터미널에 치면 방금 만들었던 그 폴더로 이동이 된다.
그러고 나서 새로 생성된 내 블로그 서버 주소 확인을 위해, $ jekyll serve --watch 를 터미널에 쳐준다.
순조롭게 진행될 거라 생각했지만 다시 한번 찾아온 fail...
계속된 알 수 없는 오류들로 인해 고독한 전광렬처럼 울기 일보 직전이었다.
Bundler: ruby: No such file or directory
Could not find gem 'minima (~> 2.0)' in any of the gem sources listed in your Gemfile.
(참고로 요 오류에 대한 해답은 https://github.com/jekyll/jekyll/issues/6353)
등등.
지금까지 해온 모든 걸 다 삭제하고 처음부터 다시 해보고 계속 무한 구글링도 해보고 한 결과,
드디어 터미널에서 나의 서버 주소를 확인해볼 수 있었다. 이제 그 서버를 주소창에 치면,
드디어...완성...너무 영광스러운 장면이어서 이렇게 스크린샷도 해놨다.
3. Github에 올리기
이제 막 오프닝이 끝났다. 이제 위에서 만든 파일들을 Github이란 곳에 올려볼 것이다.
(1) Github 가입 및 repository 생성하기
Github은 분산 버전 관리 툴인 Git을 사용하는 프로젝트를 지원하는 웹호스팅 서비스다. 라고 구글에 나온다.
이해해보자면, Git으로 된 프로젝트들을 넣어두는 금고 같은...건가?
Git은 분산형 버전 관리 프로그램이라고 하는데 금융으로 따지면 리스크를 낮추는 일종의 분산투자 같은 건가 보다.
- 일단, Github에 들어가서 가입을 한다. (Plan은 Free로!)
- 메인 화면에 Start a project 클릭.
- Repository name을 설정해주어야 하는데, 깃헙 가입할 때 썼던 username을 이용해서
username.github.io라고 적어줘야 한다. ex) maeeemi.github.io
이렇게 하지 않으면, 나중에 username.github.io로 호스팅이 되질 않는다.(이걸 몰라서 오랫동안 삽질 흑흑)
Repository까지 생성 완료!
(2) Sourcetree 설치 및 Github과 연결하기
위에까지 완료하고 나면 Sourcetree라는 툴을 이용해 아까 만들었던 Jekyll 블로그 내용물들을 Github의 Repository와 연결해준다.
여기서 Sourcetree는 Git을 좀 더 쉽게 쓰기 위한 툴인데, 그래픽 기반이라 진입장벽이 그리 높진 않다.
(이런 보조 툴을 쓰지 않으면 터미널을 이용하여 작업을 해야 한다.)
또한, Sourcetree는 Trello, Jira, Confluence 등 유명 협업 도구들을 개발한 Atalassian이란 곳에서 만들었는데, 여기가 브랜딩도 깔끔하고 디자인도 예쁘다.
여튼, 이제 SourceTree를 설치해보자.
- Sourcetree 에서 툴을 다운로드한다. (Atlassian 아이디도 필요하기 때문에 가서 가입한다.)
Github으로 연결시키기- Sourcetree 설치를 하고 Github과 커넥트 시킨다.
- 이제 어떤 창이 하나 뜬다. 오른쪽 버튼을 누르고 New를 클릭하고 Clone from URL을 클릭.
- 위의 이미지처럼 창이 하나 뜰 것이다.
Source URL에 Github에 나와 있는 나의 HTTPS URL을 복붙 해준다.
잘 모르겠다면, https://github.com/username/username.github.io.git 을 입력하면 된다.
당연하지만 username에는 본인의 username이 들어가야 한다는 것.
(저 이미지는 내가 repository name을 잘못 설정해서 저렇게 떴었다. 저런 식으로 되면 안 된다.)
- 이제 Clone을 눌러주면...성공!
(3) Jekyll 내용물들을 Github에 올려보자.
Clone을 누르고 이 창이 떴다면 성공이다.(짝짝짝)
이제 아까 정말 초반에 터미널로 생성했었던 Jekyll 블로그 폴더의 내용물들을 이 곳에 올릴 거다.
여기도 많이 헤맸는데, 저기 Show in Finder을 누르면 아래 이미지처럼 폴더로 이동이 된다.
거기에 보면 터미널로 생성한 Jekyll 블로그 폴더가 있을 것이다.(나 같은 경우 maemi-blog)
그 안에 있는 파일들을 내 github repository 폴더(maeeemi)로 모조리 이동시킨다.
그러면 이렇게 파일들이 올라간 걸 볼 수 있을 것이다.
History 채널로 가보면 Uncommitted changes라고 쓰여있다. 요것을 선택 후 상단에 Commit을 누른다.
Commit 메시지를 쓰라고 나오는데 여기에는 보통 뭘 수정했는지를 적으면 된다고 한다.
다시 File status로 돌아와서 Push를 해주면 해당 내용들이 Github repository에 올라간다.
개발자님들이 항상 말씀하시는 커밋..푸시...나도 드디어 해보았다. 야하.
4. Publishing 하기
이제 Publishing이 제대로 되었는지 확인해보자.
맨 오른쪽에 Settings에 들어간다.
쭉 내리다 보면 Github Pages라고 있다. 체크 표시되어 있는 곳에 저런 식으로 뜬다면 성공이다.
만약 None으로 되어 있다면 master branch로 변경해주자.
5. 소감
(1) 완성의 쾌감
우여곡절 끝에 완성시켰다. 솔직히 초반에 계속 실패해서 역시 못 만드는 것인가 생각도 들고 계속 모르는 것을 그때그때 서치 하면서 하다 보니 시간도 엄청 오래 걸려 심신으로 지치기도 했지만, 집념을 가지고 (구글 신의 도움을 얻어) 결국 완성시켰다. 모든 것이 완성되었을 때의 그 쾌감이란...(크으)
하루 종일 무언가를 붙잡고 늘어지는 것도 꽤 좋은 것 같다. 허리가 좀 아프지만.
(2) 향후 계획
이후에는 내가 원하는 테마를 찾아서 나름대로 커스터마이징을 해보려고 한다. 그러려면 웹사이트에 대한 기획도 조금 해야 할 것 같다. 그러기 위해선 또 구글이란 깊은 바다를 허우적허우적 헤엄쳐야겠지.
그리고 이렇게 �고생하며 저질러 놨으니, 아까워서라도 조금은 느리더라도 시간을 내어 계속 develop 시킬 예정이다. 뭐가 될진 모르겠는데 아직 뚜렷한 계획은 없다. 그냥 이것저것 여러 가지 도전을 해 볼 생각이다.
자 이제 글도 다 썼으니 난 이제 맛있는 거 먹으러 가야지.(눈누난나)
