Github.io 블로그 만들기 (with jekyll)

Published in

FabianCode

7 min readJun 21, 2020

#github #github.io #blog

오늘은 Github Pages 를 만들어 보았다.
이에 관련한 글을 포스팅하는 이유는, 나는 다른 블로그에서 github.io를 만드는 방법에 관한 포스팅을 따라 했을 때 일사천리로 만들지 못하였기 때문이다.
(github.io를 개설하자마자 포스팅하는 글이기 때문에 자세한 내용은 포함하지 않고 있으며, 개개인의 환경이 다르기 때문에 잘 되지 않을 수 있습니다.)

실행환경: MacOS

블로그를 개설하기 전에 허전한 뼈대 보다는 만들어져있는 좋은 테마를 사용 하고자 했기 때문에 Jekyll 을 사용 했습니다.

jekyll ?

지킬이란, 루비로 만든 정적 웹사이트 생성기로, Template와 Contents 등의 다양한 포맷의 텍스트 데이터를 읽어 정적 웹사이트를 생성해주는데, 간단하게 markdown 파일을 사용하는 블로그 플랫폼이다.

Github Pages 만들기

1. 레파지토리 생성하기

먼저 repository 를 생성해준다.
repository name은 “username.github.io” 이렇게 설정하면 된다.
나의 경우에는 khgkimhyungyu.github.io 가 될 것이다.
public 으로 설정하고 밑에 README 도 체크하였다.

2. Ruby 설치하기

apt 명령어로 Ruby를 설치한다.

/Desktop$ sudo apt install ruby ruby-dev build-essential

3. jekyll 과 bundler 설치하기

gem install 명령어를 사용하여 jekyll 과 bundler를 설치한다.
gem 은 분산패키지 시스템으로 라이브러리의 작성,공개,설치를 도와주는 시스템이라고 한다.

/Desktop
$ gem install jekyll bundler

이렇게 지킬설치도 완료 될 것이다. 잘 되지않았다면 앞에 sudo를 (?)

4. Jekyll theme 선택하기

빠르고 쉽게 블로그를 꾸미길 원한다면 jekyll thema를 사용하면 되는데
무료 thema 중 minimal-mistakes 는 가장 인기있는 thema 중 하나라고 한다.
나의 경우에는 jekfilx 를 선택하였는데, Netfilx 테마와 비슷하다.

5. Jekyll theme 다운로드

원하는 테마에 들어간 뒤, (jekflix에 들어갔습니다.)
클론을 하기 위해서 소스를 복사합니다.

복사한 소스를 clone 을 하기 위해서
나의 경우에는 디렉토리를 하나 생성한 뒤에 그 안에 클론을 해주었다.

/Desktopmidir githubio   // githubio라는 directory 를 생성
cd githubio  // 생성한 githubio directory 로 이동git clone https://github.com/thiagorossener/jekflix-template.git 
//클론

클론이 완료 되었다면, 클론한 폴더안으로 이동한 뒤 bundler를 수행한다.

cd jekyfilx 어쩌고저쩌고   // 클론한 파일로 이동한 것입니다$ bundle             // bundle 수행을 하면 아래와 비슷한것을 확인할 수 있습니다.etching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 10.5.0
...
Bundle complete! 3 Gemfile dependencies, 47 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
$

설치가 완료되면 지킬 샘플 블로그 처럼 웹호스팅이 가능하다. 아래 명령어를 실행하고 localhost:4000 주소를 확인하자

$ bundle exec jekyll serve

theme가 적용된 블로그를 생성한 것을 볼 수 있을 것이다.
여기서 끝난 것이 아니라 가장 중요한 부분으로 자신의 github.io주소로 웹호스팅하는 것만 남았다.

6. username.github.io 주소로 웹호스팅하기

지금까지는 본인의 로컬 컴퓨터에서만 웹페이지를 확인했다면, 이제 내 블로그를 github pages에 올릴 것이다.
전에 만들었던 github repository 를 사용할 것이다.

먼저, 다운로드 받았던 테마의 폴더가 있을 것이다. 앞으로는 내 저장소로 쓸 예정이니 폴더명 부터 바꿔보도록 하겠다.

$ mv jekflix어쩌고저쩌고 fabian.pages 
// 위는 폴더명을 바꿔주는 것이다. "mv 기존폴더명 바꿀폴더명이름"

그리고 전에 만들었던 repository , 즉 username.github.io 에
remote repository 로 등록할 것이다.

$ cd fabian.pages
$ git remote -v     // 이미 remote 되어있는 것을 확인할 수 있다.$ git remote remove origin // 기존의 remote 삭제
$ git remote add origin "본인이만들었던 repo 주소" 
$ git remote -v      // 본인의 repo가 remote 된 것을 확인할 수 있다.$ git push -u origin master     //본인의 git repo에 소스가 업로드될 것이다.만약 push 과정에서 에러가 생겼다면 pull 을 해야한다 이런 에러메시지를 확인할 수 있는데
(아마 reject 어쩌고...? )$ git pull  을 하면 될 것이고, 그래도 새로운 에러메시지가 보인다면
$ git stash 를 해준 다음에 다시 push를 해주자만약!!! 이것도 되지 않는다? $ git push -u origin +master  를 한다. 
master에 +를 붙인 것인데, 나 역시도 에러로 인해 이렇게 진행하였다.

git push origin master 에러 에 관해 참고했던 것.

여기까지 완료 하였다면,
username.github.io 로 접속했을 때, 테마변경까지 된 것을 확인할 수 있을 것이다.