Jekyll theme을 사용하여 github io 블로그 만들기

오늘 포스팅에서는 Jekyll theme을 이용해서 github io 블로그를 생성하는 방법을 다루고자 한다.

 

1. Git repository 생성

먼저 github repository를 만든다. 이 때 다른 건 크게 상관이 없고, repository name이 중요한데 이 이름이 곧 도메인 이름이 되기 때문이다. 만약 repository name을 repo_name이라고 한다면, 다음과 같은 주소로 설정된다.

 

(github user 이름).github.io/(repo_name)

 

그런데, 이 때 repo_name을 만약 (github user 이름).github.io 로 설정한다면, 이것은 특별히

 

(github user 이름).github.io/

 

과 같은 도메인 주소를 받게 된다. github 계정 당 하나만 할당받을 수 있는 주소이므로, 중요하다고 생각하는 블로그에 위 주소를 할당받도록 하는 것이 일반적으로 좋을 것이다.

 

Setting 바꿔주기

생성한 repository로 들어가서 [Settings] - [Pages] - [Branch]에서 main branch로 설정을 바꿔준다.

여기서 Github 주소를 확인할 수 있다.

 

2. Local repository와 연동

이제 로컬 저장소에 새로운 폴더를 하나 만들고, 1 에서 생성한 github repository를 clone 한다.

주소를 먼저 복사하고, windows 터미널 창을 열어서

git clone (복사한 주소)

와 같이 입력한다. 로컬 저장소 폴더에 가면 위 repository가 복사된 것을 볼 수 있고, 아직 아무것도 없기 때문에 빈 폴더 하나만 존재할 것이다. (readme 파일을 생성했다면 이 파일 하나만 존재한다)

 

3. Jekyll theme 선택 후 다운로드

이제 아래의 주소로 들어가 원하는 블로그 theme을 선택한다.

 

http://jekyllthemes.org/

Jekyll Themes

 

필자는 예를 들어 아래 왼쪽 그림과 같은 'Bay' 라는 블로그 theme을 선택했다. 여기서 [Homepage]를 클릭하면 아래 오른쪽 그림과 같은 github repository가 나온다.

여기서 fork, clone 등의 방법도 있는데, 필자의 경우 이미 로컬 저장소도 만들어둔 상태이므로 [Download ZIP]을 통해 폴더를 모두 다운로드 해서 직접 복사 붙여넣기 하기로 하였다.

 

이를 다운로드 받고, 압축 해제한 다음, 아까 git clone을 통해 생성된 폴더 내에 모두 붙여넣는다. 디렉토리는 다음과 같은 구조가 된다. github_io_jekyll 폴더가 직접 만들어준 로컬 폴더, 그리고 하위 폴더는 git clone에 의해 생성된 폴더이다.

 

4. Git repository로 push

이제 로컬 저장소에 받아둔 내용들을 git repository로 push 해준다. git clone을 통해 만들어진 폴더이기 때문에, 이미 원격 저장소와 연동이 되어 있다. 다음 명령어들을 통해 push 해준다.

git add .
git commit -m "first message"
git push origin main

이제 약간 기다렸다가 할당받은 도메인 주소로 접속해보면 선택한 블로그 theme이 보이는 것을 확인할 수 있다.

일단 여기까지 하면 기본적인 설정이 끝난 것이고, 이제 블로그를 꾸미는 단계이다.

 

5. 로컬에서 Jekyll 테스트를 위한 설정

github io를 통해서 블로그를 확인할 수 있지만, 뭔가를 바꿀 때 로컬에서 먼저 확인하는 것이 더 좋다. 따라서 로컬에서 Jekyll 테스트를 할 수 있도록 설정을 하도록 한다.

(1) Ruby 다운로드

다음 링크를 참고하여 Ruby를 다운로드 받는다. 중간중간의 옵션들은 모두 installer 또는 포스팅의 권장 사항대로 진행하면 된다.

https://jujeonghwan.github.io/jekyll/how-to-install-ruby-and-jekyll-on-windows-10-kr/

윈도우10에 Ruby와 Jekyll을 설치하는 방법

처음에 3.2 가장 최신 버전으로 설치했다가, 아래 jekyll, bundle 설치 과정을 진행하다가 버전 충돌 오류가 나서 3.1 버전으로 다시 받았다.

(2) Jekyll 설치

마찬가지로 위 링크를 참고하여 Jekyll과 bundler를 설치하였다.

gem install jekyll bundler

필요한 패키지를 설치해준다. 자세히 알아보지는 않았는데, bundler가 일종의 패키지 관리자 같은 역할을 하는 듯하다. 아래 명령어를 입력하면 gem 파일에 명시된 패키지를 관리해주는 것이라고만 이해하고 넘어갔다.

bundle install

실행하려고 보니 webrick 관련된 뭔가가 없다고 뜬다. 아래 명령어를 통해 해결하였다.

bundle add webrick

(3) 로컬 서버 실행

이제 로컬 서버를 실행해본다.

bundle exec jekyll serve

커맨드 창에 로컬 서버 주소가 뜨고, 이를 웹 브라우저에서 실행해보면 확인할 수 있다.

 

설치 과정 중에 몇 가지 오류들이 있었는데, 필자의 경우 아래 포스팅과 거의 동일한 오류가 발생해서 해결 방법도 동일하였다. 주요 원인 중 하나는 ruby 3.1 버전으로 받기 (최신 버전인 3.2 대신) 였다.

https://velog.io/@kimmandoo/github-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EC%84%A4%ED%95%A0-%EB%95%8C-%EC%83%9D%EA%B8%B0%EB%8A%94-%EC%98%A4%EB%A5%98%EB%93%A4

mac에서 jekyll로 github 블로그 개설할 때 생기는 오류들

 

6. 로컬에서 테스트 후 github repository에 반영

디렉토리 내 파일들을 수정하면서 로컬에서 수정 사항을 테스트 했다고 하자. 그 후에 수정 사항을 반영하기 위해서는 작업 디렉토리에서 shell을 열어서 다음 git 명령어를 입력하면 된다.

git add .
git commit -m "message about update"
git push