GitHub Pages로 블로그 시작하기

공부 과정들을 정리하는 겸 블로그를 다시 시작하려고 한다. 네이버, 티스토리 등의 블로그 서비스를 사용했었으나 불편함이 있어 여러 서비스들을 찾아보았다.

왜 GitHub Pages인가

진입장벽이 있다고는 하나 매력적인 면(심플함, 자유도, 편리함, …)들이 있었다.

GitHub Pages는 저장소(무료 1GB)를 {username}.github.io 주소로 호스팅해주는 서비스다. html, css 등의 파일들을 직접 만들고 관리해야 한다는 소리다.

여기에 jekyll이라는 정적 사이트 생성기를 연동하면 아주 편리해진다. jekyll을 간단하게 설명하면, markdown 문법으로 포스팅을 작성하면 jekyll에서 미리 설정한대로 웹 페이지 파일(html, css)을 생성해준다.

작업 환경

집에서 놀고 있던 노트북에 설정했다.

• OS: Windows 10

• git client: Git bash

GitHub Pages 저장소 만들기

1. GitHub 계정이 없다면, 가입해야 한다. GitHub Pages에서 호스팅해주는 주소가 이 계정이름을 사용함({username}.github.io)을 참고한다.

2. GitHub 로그인 후, 저장소를 만든다.

3. 로컬(노트북) 환경에서 작업할 수 있도록 clone해서 로컬 저장소를 만든다.

git clone https://github.com/{username}/{username}.github.io

jekyll site 만들기

Clone 해뒀던 저장소에 jekyll site 설정을 하고, 리모트 저장소에 push하기 전에 로컬 웹서버를 돌려서 site preview를 확인할 수 있다.

# Install Jekyll and Bundler gems through RubyGems
gem install jekyll bundler

# Change into your local repository directory
cd {username}.github.io

# Create a new Jekyll site at ./
jekyll new .

# Build the site on the preview server
bundle exec jekyll serve

위와 같이 작업한 후, 브라우저에서 localhost port 4000번 주소로 접속해볼 수 있다.

jekyll now theme 적용하기

jekyll now 가이드를 따라해보았다.

저장소를 fork하는 방법이 아니라, clone한 후에 로컬에 덮어씌워서 적용시켰다.

Trouble shooting

Dependency Error

jekyll theme 설치 도중 Dependency Error가 발생했다. jekyll-sitemap으로 문제가 발생한 경우, 아래와 같이 해결하면 된다(출처).

# For additional dependency
gem install github-pages
gem install jekyll-sitemap

# Gemfile
...
gem 'jekyll-sitemap'

Ruby install on Ubuntu

git bash에서 bash on windows 10으로 갈아타면서 환경 설정을 새로 하며 문제가 발생했다.

bash on Windows 10에 설치되어 있는 Ruby는 1.x버전인데, jekyll은 Ruby 2.x 이상 버전이 필요해서 설치가 실패했다. 그래서 익숙한 apt-get package manager를 통해 업그레이드(sudo apt-get install ruby)하려고 했지만 실패했다.

열심히 구글링해보니, RVM(Ruby Version Manager)을 통해 설치를 해야 했다. Ubuntu 환경에서는 가이드를 참고해서 아래와 같이 설치했다. 가이드에서 Run command as login shell, Logout and login으로 가이드하는 부분이 있다. Windows 환경이기 때문에 재부팅한 후, bash --login 실행하고 다음 명령들을 실행하면 해결된다. 이후 login shell이 필요할 때마다 bash --login을 실행하거나, bash -l -c "{command list}" 형태로 실행해야 하는 번거로움이 있다.

# Pre-requisites for ppa
sudo apt-get install software-properties-common
sudo apt-add-repository -y ppa:rael-gc/rvm
sudo apt-get update
sudo apt-get install rvm
# Logout and login / System reboot
bash --login
rvm install ruby
# or
bash -l -c rvm install ruby

Appendix. VSCode + git bash

기본적으로, 에디터, 터미널 하나씩 띄워두고 작업하면 된다. 하지만, VSCode의 integrated terminal로 git bash를 연동하면 VSCode 내에서 단축키 하나로 왔다갔다할 수 있는 이점이 있다! 설정 방법은 아주 간단하다.

VSCode > File > Preferences > User settings 화면에서 아래 한 줄을 추가한다.

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

위에서 설명한 바와 같이, Windows 환경에서 jekyll 같이 bash login shell이 필요한 경우는 bash --login을 실행한 후 작업하거나, bash -l -c "{command list}" 형태로 실행해야 한다. 여기에 해결책이 있을 것이다.

Appendix. VSCode + bash login shell on Ubuntu

PC Ubuntu 환경 Ruby install에 추가할 설명이 있다. 터미널의 Run command as login shell 설정을 켜고 Logout and login하고 나면, rvm install ruby가 터미널에서 정상적으로 실행이 된다.

하지만 VSCode의 integrated terminal에서는 여전히 login shell 문제가 해결되지 않는데, workaround를 찾아 공유한다. 여기에 다양한 해결책들이 있는데, 그 중 하나를 공유하자면 VSCode > File > Preferences > User settings 화면에 아래 한 줄을 추가한다.

"terminal.integrated.shellArgs.linux": ["--login"]