[이재우] Jekyll Theme을 적용한 엄청난 깃허브 블로그 시작하기

# 깃허브 블로그 만들기
깃허브 블로그는 개발 블로그로 가장 많이 알려져 있다. 그래서 내가 공부를 하면서 그 과정을 기록하기 위해서 깃허브 블로그를 만들기 시작했다. 하지만, 그 과정은 정말 쉽지 않았다. 터미널에서 작업을 하는것 자체가 쉽지 않았고 깃에 대해서 1도 몰랐기 때문에 엄청난 고난과 역경을 겪어야 했다. 지금도 물론 깃을 안다고는 할 수 없다, 하지만 스스로 깃허브 블로그를 만들고 글을 포스트 하는것은 가능하다. `시작이 반이다.`라는 말이 있다. 깃허브 블로그를 일단 만들어 놓고, 그 후는 미래의 나에게 맡겨두자. 그럼 시작하자.

## 새로운 저장소 만들기
깃허브에 계정이 있다고 가정을 하겠다, 없다면 즉시 만들도록 한다. 그럼 이제 깃허브 블로그와 연동할 저장소를 만들어보자.

### 1. New Repository
>위의 사진과 같이 새로운 저장소를 만들기를 클릭한다.

### 2. Repository Name
>저장소 이름을 `계정.github.io`로 만들어주고, **README.md**파일을 추가 해주어서 새로운 저장소를 생성하자.


짜잔, 위의 사진과 같이 **README.md**파일이 있는 빈 저장소를 만드는데 성공하였다.

## Jekyll
**Jekyll**에 대해서 간단히 알아보고, 우리 깃허브 블로그에 적용시켜보자!
### Theme
`깃허브 블로그` 만들기를 구글에 검색하게 되면, 제일 먼저 마주하는 용어는 **Jekyll** 이다. 나도 무슨 역할을 하는지 잘 모른다, 하지만 내가 사용할 깃허브 블로그가 **Jekyll**을 사용하면 엄청나게 예쁜, 멋진 블로그가 완성이 된다. 쉽게 설명하면, 내가 만들 깃허브의 테마를 정할 수 있다.
[Jekyll Themes](http://jekyllthemes.org/)와 같이 정말 다양한 테마들이 존재하기 때문에, 취향에 맞는 가장 좋은 테마를 하나 선택하자. 내가 선택한 테마는 `Centrarium`이다.


홈페이지를 클릭하면, `Centrarium`테마가 담긴 저장소로 이동 할 수 있다.


## Jekyll 테마를 나의 블로그에 적용하기
### 1. 깃 설치 (Mac)
터미널을 실행한 후, 다음 두개의 코드를 실행시켜 보자.

* `brew -v` : [Homebrew](https://brew.sh/)의 설치 여부를 확인
* `git --version` : [Git](https://git-scm.com/download/mac)의 설치 여부 확인

> 만약 설치가 되어있다면, 위의 사진과 같이 각 Homebrew와 GIt에 대한 버전이 있을 것이다.

#### 1.1 Homebrew가 없는 경우
다음과 같은 코드를 터미널에서 실행하자.
* `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"` : Homebrew 설치
* `brew -v`를 실행하여 설치 여부 확인
* `brew install git`을 실행하여 깃을 설치
* `git --version` 을 실행하여 Git 설치 여부 확인

#### 1.2 Git 만 없는 경우
Git이 없는 경우에는 다음의 두 코드를 실행하자!
* `brew install git`을 실행하여 깃을 설치
* `git --version` 을 실행하여 Git 설치 여부 확인

### 2. 본인 저장소 Local에 복사하기
여기서 *Local* 현재 자신의 컴퓨터 또는 노트북을 의미한다. 따라서, 깃허브의 있는 아까 새로 만든 저장소를 나의 노트북으로 복사하는 것을 의미한다.

#### 2.1 바탕화면에 Blog 폴더 만들기
다시 터미널로 이동합니다.
* `~` 실행하여, home 위치로 이동합니다.
* `cd desktop/` 바탕화면으로 경로를 이동해줍니다.
* `mkdir blog` **blog**라는 폴더를 생성합니다.
* `cd blog/` **blog** 폴더에 들어갑니다.
> 위의 명령을 실행하였다면, 바탕화면에 blog 폴더를 확인해보세요!

#### 2.2 본인 저장소에서 저장서 주소 복사
> 본인 저장소에서 `Code`부분을 클릭하여 저장소 주소를 복사하자.

#### 2.3 Git clone을 통하여 복사하기
다시 터미널로 이동합니다.
* `git clone https://github.com/jingwoo4710/jingwoo4710.github.io.git`를 실행합니다.
* `cd 본인아이디.github.io/ ` 를 실행하면 해당폴더로 이동이 가능합니다.
* `ls`를 통해서 파일 리스트 확인
> 위의 사진과 같이 **README.md** 파일만 있고 비어있음을 알 수 있습니다.

### 3. Jekyll theme 저장소 Local에 복사하기
마찬가지로, 원하는 Jekyll 테마의 저장소를 Local에 복사하겠습니다.
#### 3.1 Jekyll theme 저장소에서 저장서 주소 복사
* `cd ..` 하나의 상위 폴더로 이동
* `git clone https://github.com/bencentra/centrarium.git` 복제 합니다.


> 다음과 같이 터미널에서 실행을 하면 됩니다.
> 다음과 같이 blog 폴더에 내 저장소 하나와, jekyll theme 저장소 하나가 있음을 알 수 있습니다.

### 4. 두 개의 저장소 합치기
현재 빈 나의 저장소에 Jekyll 테마가 담겨있는, 저장소를 합쳐봅시다! 다시 터미널로 이동합니다.
#### 4.1 Jekyll theme 저장소에 연결
* `cd jingwoo4710.github.io/` 본인 저장소 폴더로 이동
* `rm -rf README.md` 두 저장소를 합칠 때, 충돌을 막기 위해서 삭제
* ` git remote add theme https://github.com/bencentra/centrarium.git` Jekyll 테마 저장소를 연결
* `git remote -v`를 통해서 결과 확인


#### 4.2 Fetch & Merge
Jeykyll 저장소의 모든 정보들을 fetch 해서 나의 저장소에 merge를 해봅시다.
* `git fetch theme` : Jekyll theme 저장소의 모든 정보를 가져오기
* `git merge --allow-unrelated-histories theme/master` : Jekyll theme과 나의 저장소 합치기
> 충돌이 발생했음을 알 수 있습니다.

* `git status` : 현재 상황을 확인

> Unmerged path 라고 해서 README.md 라는 파일을 서로 추가했다는 내용을 알 수 있습니다. 우리는 이미 README.md 라는 파일을 삭제 했기 때문에, Jekyll theme의 README 파일을 가져오도록 합시다.

* `git add .` : 모든 변경사항을 추가합니다.
* `git commit -m "Jekyll theme"` : "Jekyll theme"의 메세지와 함께 변동사항을 업데이트 하는것을 승인 합니다.
* `git push origin` : 모든 변동사항을 내 저장소에 업데이트 하겠습니다.

> 변동사항 업데이트 완료!

#### 4.3 결과 확인
다시 깃허브의 내 저장소를 확인 해보면, 다음과 같게 많은 내용이 추가 되었음을 알 수 있습니다.


### 5. 테마 적용하기
지금까지 나의 저장소에 Jekyll 테마를 복사해왔다. 이제 적용을 시켜보자.
* `bundle install` : 필요한 플러그인을 설치
* `bundle exec jekyll serve` : 모든 설치 과정이 완료되면 아래 명령어를 이용해 서버를 시작

> 터미널 창에서 Server address: `http://127.0.0.1:4000/` 주소를 치면!

짜잔! Jekyll 테마가 적용된 모습을 확인 할 수 있습니다!

### 6. _config.yml
최종적으로 jingwoo4710.github.io에 jekyll 테마가 설치 되기 위해서는 `_config.yml` 파일을 수정해야 한다.
#### VScode
* `code .` : VScode 에서 파일들 보기
⚠️ zsh: command not found: code 일 경우 : VScode를 켜서 -> cmd+shift+p -> shell -> install code command in PATH

> 클릭을 한 후에 `code .` 실행

#### _config.yml 수정

> url 부분만 우리 블로그 저장소 주소(https://jingwoo4710.github.io)를 입력하게 되면 된다.

* `git add .` : 모든 변경사항을 추가합니다.
* `git commit -m "change _config.yml"` : "Jekyll theme"의 메세지와 함께 변동사항을 업데이트 하는것을 승인 합니다.
* `git push origin` : 모든 변동사항을 내 저장소에 업데이트 하겠습니다.


> 그러면 최종적으로, jingwoo4710.github.io가 jekyll 테마가 적용 된 엄청난 깃허브 블로그를 만들 수 있다.

지금까지 터미널에서 **git** 명령어를 통해 jekyll 테마를 적용 시켜보았다. 글을 올리고, 다음 단계는 다음 글을 확인해보자!