GitHub 블로그 만들기
Updated:
대학원 석사과정을 졸업하고 회사에 취직을 했다가 다시 박사과정을 시작하면서 그동안 배웠던 것들을 정리하는 것이 필요하다고 느꼈다.
기존에는 XMind나 Word 파일로 만들어뒀었는데 나만 본다고 생각하니 정리를 제대로 안 하게 되어 나중에 다시 보면 중간에 비어 있는 과정들이 너무 많은 것 같다.
그래서 그 과정을 정리..라기 보다는 그냥 과정을 기록하는 용도로 블로그를 사용하려고 한다.
이러한 이유로 첫 포스트는 이 블로그를 처음 만들었을 때의 과정을 기록하려 한다.
1. Jekyll 설치
GitHub 블로그를 만들려고 구글링을 해보니 Jekyll이란 이야기가 많이 나왔다. 제목은 다들 “GitHub 블로그 쉽게 만들기”인데 생각보다 과정이 너무 복잡한 것 같다. 난 단순한 자료를 찾고 싶은데 다들 제목은 쉽게 따라 하고 쉽게 만든다는데 설치하고 세팅하는 과정들이 많다고 느꼈다.
블로그를 만들고 보니 Jekyll을 설치하지 않아도 되는 것 같은데 일단 진행을 했던 부분이라 과정을 기록해본다. Jekyll로 서버를 실행해서 블로그를 띄우고 기타 등등을 하는 것 같은데 Gihub으로 블로그를 만드는 과정에는 필요가 없는 부분인 것 같다. 뒤에서 테마를 다운 받은 후 bundle 명령어를 해주지 않으면 404 error가 뜬다.
1.1. 윈도우에 Jekyll 설치하기
맥북과 윈도우 데스크탑을 같이 사용하고 있지만 듀얼 모니터로 연결된 윈도우 데스크탑이 편하다보니 윈도우 환경에서 블로그 만들기를 시작했다. 윈도우 환경에서 Jekyll을 설치하기 위해선 Ruby를 설치해야하는 것 같다. https://rubyinstaller.org/downloads/ 에서 설치 파일을 다운로드 하자. 나는 해당 사이트에서 추천(2020-02-29 기준)하는 Ruby+Devkit 2.6.X (x64) 를 다운받았다.
Ruby 설치파일 다운로드 사이트
설치 중에 특별한 변경 사항 없이 기본 체크 사항으로 Next를 계속 눌러주었다.
설치가 완료되면 다음과 같은 창이 뜨는데 이때 그냥 Enter만 눌러주면 된다.
Ruby가 제대로 설치되었는지 다음의 명령어로 간단히 체크할 수 있다.
C:\\> ruby --version
ruby 2.6.5p114 (2019-10-01 revision 67812)
그럼 이제 ruby를 이용해서 Jekyll을 설치하자.
C:\\> gem install jekyll bundle
마찬가지로 Jekyll이 제대로 설치되었는지 다음의 명령어로 체크할 수 있다.
C:\\> jekyll --version
1.2. Mac에 Jekyll 설치하기
Mac에서는 brew를 사용하여 설치할 수 있다. 참고
$ /usr/bin/ruby -e "\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install ruby
ruby path를 잡아주면 윈도우와 마찬가지로 ruby를 사용할 수 있다.
export PATH=/usr/local/opt/ruby/bin:$PATH
ruby가 설치 되었는지 체크하자.
$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580)
jekyll과 bundler를 설치하자.
$ sudo gem install --user-install bundler jekyll
1.3. Jekyll 테스트 하기 on Windows & Mac
Jekyll을 설치한 후, Jekyll을 이용하여 웹페이지를 띄워보는 테스트를 하자. 처음에 블로그 만들기를 시작했을 때, Jekyll을 왜 사용하는지 몰랐지만 포스팅을 몇 번 하다보니 Jekyll의 필요성을 느끼게 되었다. Jekyll은 개인적으로 쉽게 생각했을 때, 디버깅 툴 정도가 되는 것 같다. Markdown은 VSCode나 다양한 툴들을 이용하여 미리보기를 할 수 있지만, YFM 포맷을 포함하여 Markdown을 html로 변환하여 GitHub에 push하기 전에 미리 확인해볼 수 있는 용도로 사용할 수 있다.
Jekyll만을 이용해서도 블로그를 만들 수 있다고 한다. 하지만 그럴 경우 Jekyll을 계속 실행해 둘 서버가 필요하다. 이러한 불편함을 GitHub을 통해 블로그를 만듬으로써 해결할 수 있는 듯 하다.
다음의 명령어를 통해 웹페이지를 하나 띄워보자.
$ jekyll new blog_test
$ cd blog_test
/blog_test $ jekyll serve
오류가 없다면 http://127.0.0.1:4000에 접속하여 다음과 같은 화면을 볼 수 있다.
GitHub에 push하기 전 Jekyll을 이용하여 미리 확인하는 방법은 GitHub 블로그를 만든 후에 2.6. Jekyll을 통해 미리보기에서 다뤄보도록 한다.
일단 여기까지 하면 Jekyll은 설치가 끝난듯 하다. 그런데 Jekyll을 설치했는데 이걸로 뭘 하는건지 잘 모르겠다. 나중에 repository와 연결하기 전에 다운 받은 테마 폴더에서 bundle 명령어를 실행해줘야 블로그 화면을 띄울 수 있다.
1.3.1. 오류 및 해결 방법
나는 jekyll serve 명령어를 테스트 하는 과정에서 윈도우와 Mac에서 각각의 오류가 발생하였다. 오류가 발생하지 않았다면 다음의 과정을 건너뛰어도 된다.
1.3.2. 윈도우에서 발생한 오류
Dependency Error: Yikes! It looks like you don't have tzinfo or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. If you've run Jekyll with `bundle exec`, ensure that you have included the tzinfo gem in your Gemfile as well. The full error message from Ruby is: 'cannot load such file -- tzinfo' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!
오류의 내용을 간단히 살펴보면 tzinfo가 제대로 설치가 되지 않아 발생된 오류로 보인다. 따라서 다음의 명령어를 통해 tzinfo와 tzinfo-data를 설치해주자.
gem install tzinfo tzinfo-data
위의 명령어로 tzinfo와 tzinfo-data를 설치해주고 jekyll serve 명령어를 실행하면 똑같은 Dependency Error가 발생할 것이다. 폴더 안에 있는 Gemfile의 끝에 다음의 두 줄을 추가해 주자.
gem "tzinfo"
gem "tzinfo-data"
그리고 다시 jekyll serve 명령어를 실행해주면 제대로 실행되어 다음의 화면을 볼 수 있을 것이다.
Configuration file: ~/_config.yml
Source: ~
Destination: ~/_site
Incremental build: disabled. Enable with --incremental
Generating...
Jekyll Feed: Generating feed for posts
done in 1.295 seconds.
Please add the following to your Gemfile to avoid polling for changes:
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for ~
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
tzinfo-data의 경우 윈도우 환경에만 필요하다고 한다(참고). 따라서, Mac과 윈도우를 함께 사용하는 경우에는 Mac 환경에서 약간의 추가 설치가 필요하다. 1.3.4장 참고.
1.3.3. Mac에서 발생한 오류
Could not find rake-10.5.0 in any of the sources
Run `bundle install` to install missing gems.
단순히 rake라는 파일이 설치되지 않아 발생되는 오류 같은데, bundle install 명령어로 해결 할 수 있었다.
$ bundle install
1.3.4. 윈도우 설정 변경 후 Mac에서 발생한 오류
추가적으로, 나의 경우에는 블로그 파일 및 폴더를 공유 드라이브를 통해 공유하여 윈도우와 Mac에서 동시에 사용하고 있기 때문에 각각의 OS에서 jekyll serve 명령어를 실행할 수 있어야 한다.
하지만 윈도우에서 Gemfile을 수정한 이유로 Mac에서 아래와 같은 오류가 발생하였다.
~
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/bundler/resolver.rb:287:in `block in verify_gemfile_dependencies_are_found!': Could not find gem 'tzinfo-data' in any of the gem sources listed in your Gemfile. (Bundler::GemNotFound)
위의 오류를 해결하기 위해 Mac에도 tzinfo-data를 설치해주었다.
gem install tzinfo-data
위와 같은 과정들을 통해 윈도우와 Mac 각각에서 jekyll serve 명령어가 작동하는 것을 확인하였다.
2. GitHub 블로그 만들기
GitHub에 가입이 되어 있는 상태로 다음의 과정을 진행하고 혹시라도 GitHub에 가입이 안 되어 있으면 누구나 쉽게 가입할 수 있다.
2.1. 내 GitHub에 repository 만들기
GitHub을 이용한 블로그들을 보면 대부분 “http://username.github.io”의 주소를 가지고 있으며, 이를 위해 나도 새로운 repository를 만들고 새로운 repository 이름을 “username.github.io”으로 만들었다.
{username}.github.io repository를 만들자
2.2. 블로그 테마 선택하기
GitHub의 repository를 만들었으면 이제 http://jekyllthemes.org/ 에서 원하는 테마를 찾는다.
테마를 찾을 때 License를 조심하자. 확인을 해보지는 않았지만, 무료 License가 아닌 것이 있을수도 있다. License의 종류가 많이 있는것 같은데 다음에 기회가 되면 간단히 정리해봐야겠다.
본 블로그는 무료 테마 중 사람들이 많이 사용 한다는 minimal-mistakes를 사용하였다. 하지만 본 블로그는 이미 만들어졌기 때문에 새로운 블로그 테마 Minimal Resume를 이용해서 다음의 과정들을 진행한다.
해당 테마를 선택한 후 Homepage 버튼을 눌러서 해당 테마의 GitHub 사이트로 이동하자.
2.3. 테마 다운
테마의 GitHub으로 이동했으면 다음과 같은 화면이 보일 것이다.
여기서 오른쪽에 보이는 녹색 버튼(Clone or download)을 클릭하여 해당 테마를 다운로드하거나 clone하자.
참고: clone과 download의 차이는 clone은 기존의 git 히스토리를 모두 가져오지만 download는 그렇지 않다고 한다.
해당 테마의 GitHub 사이트에서 바로 clone하거나 Terminal에서 command를 이용하여 clone을 하자. 나는 command를 이용해서 clone 하였다.
$ git clone https://github.com/murraco/jekyll-theme-minimal-resume.git
2.4. 테마 폴더에서 bundle 명령어 실행
clone한 테마의 폴더로 이동하자.
$ cd jekyll-theme-minimal-resume
테마 폴더에서 bundle 명령어를 실행하자.
/jekyll-theme-minimal-resume $ bundle
참고: bundle 명령어를 실행하면 Gemfile이란 것을 검사해서 필요한 목록을 설치한다고 한다.
bundle을 실행하지 않고 repository에 연결하니 404 error가 발생한다.
2.5. 테마와 GitHub의 repository 연결하기
이제 테마를 내 repository에 연결할 차례이다. 테마를 clone하여 가져온 것이므로 기존의 remote origin을 제거한다.
$ git remote remove origin
2.1.에서 만든 repository를 등록하자.
$ git remote add origin https://github.com/username/username.github.io.git
내 git repo에 소스가 업로드 되도록 push하자.
$ git push -u origin master
여기까지 했으면 이제 나만의 블로그가 생성되었을 것이다. {username}.Github.io을 통해 내 블로그에 접속하자.
내 블로그가 만들어졌다.
2.6. Jekyll을 통해 미리보기
나만의 블로그를 만들었으면 이제 원하는 글을 쓸 수 있다. 처음에는 Jekyll의 필요성을 느끼지 못했지만, 몇 번 포스팅을 해본 결과 HTML 문법 오류나 YFM 포맷의 오류 등은 제대로 확인하기가 어려웠다. 포스팅을 할 때 마다 GitHub에 push한 후, 실제 페이지에서 확인할 수도 있지만 push한다고 바로 적용이 되는 것도 아니고 길게는 몇 분정도 지난 후에 수정 사항이 반영된 페이지를 확인할 수 있었다. 그리고 어떤 오류인지 모르고 단순히 404 error 페이지를 보여줄 때가 있어서 디버깅하는데 많은 시간이 필요했다. 하지만 Jekyll을 이용하여 미리 로컬에서 확인하면 이러한 시간을 약간이나마 줄일 수 있었고 html 등의 문법적인 오류가 미리 확인할 수가 있었다.
앞서 clone해온 테마의 폴더로 이동하여 jekyll serve 명령어를 통해 로컬에서 페이지를 띄워보자.
$ cd jekyll-theme-minimal-resume
/jekyll-theme-minimal-resume $ jekyll serve
위와 같이 Server address: http://127.0.0.1:4000를 확인할 수 있고, http://127.0.0.1:4000를 통해 페이지에 접속을 하여 수정 사항 등을 GitHub에 push하기 전에 미리 확인할 수 있다.
참고자료
- Jekyll 설치 https://soojae.tistory.com/16
- GitHub 블로그 만들기 https://devinlife.com/howto/
Leave a comment