GitHub 블로그 만들기 & Jekyll로 꾸미기

시작하며

• 안녕하세요, TaeBbong 입니다.
• 오늘은 지금 보고 있는 이 블로그를 만들어볼거에요.
• 블로그를 만드는 것은 예전부터 개발자의 간지로 간직하고 있었어요:)
• 이왕 만드는 거 네이버 블로그와 같이 귀찮고 조잡한(?!) 블로그 형태가 아닌 깔끔한 블로그를 원했죠.
• 그래서 깃헙 블로그를 열심히 알아보다가 2018년이 시작되어서야 제대로 시간을 써서 완성하게 되었네요.
• 깃헙 블로그를 배포하는 것 뿐 아니라 테마를 적용하고 커스터마이징 하는 것까지 기록하려 합니다:)

프로젝트 목표

• GitHub 제공 블로그 및 페이지 만들기
• Jekyll 테마를 사용하여 블로그 꾸미기
• 블로그 배포하기

1단계: GitHub Repository 만들기

• 우선 깃헙 블로그를 만드려면 당연히 깃헙 계정이 있어야겠죠?
• 본인 깃헙 계정에서 새로운 저장소 Repository 를 만들어 봅시다.
• 이때 규칙이 존재하는데,
• 본인계정이름.github.io 의 형태로 저장소의 이름을 설정해봅시다.
• 계정이름과 동일하지 않을 경우 제대로 실행이 되지 않는다고 깃헙에서 경고를 하거든요:)
• 이렇게 저장소를 만들면 1단계는 마무리가 됩니다.

2단계: Theme 선택, 다운로드

• 다음은 블로그를 꾸밀 테마를 선택하는 영역입니다!
• 우리가 정말 뛰어난 개발자라면 모든 html, css, 구성 파일들을 직접 만들 수도 있겠죠.
• 하지만 그러기에는 디자인도 해야하고 너무 귀찮은 일이 많으니 있는 테마를 가져와서 응용하는게 낫겠죠?
• 다음 링크에서 원하는 테마를 선택해서 다운로드 합니다!
• jekyllthemes.org
• 다운로드 받고 압축을 풀면 여러 파일들이 나올텐데, 이에 대해서는 추후 커스터마이징을 하며 알아보기로 합시다.
• 일단은 추후 작업을 위해 터미널을 열고 ‘본인의’ 해당 디렉토리로 이동합시다.

$ cd /Desktop/myblog

3단계: Jekyll, Bundler 설치(MAC OS)

• 다음은 테마를 사용하기 위한 몇 가지 라이브러리를 설치해야합니다.
• 깃헙 블로그 테마를 꾸미기 위한 라이브러리에는 몇 가지가 존재하는데,
• 우리는 그 중에서 Jekyll(지킬)을 사용할 겁니다.
• 위에서 다운 받은 테마도 Jekyll 로 만든 것입니다.
• Jekyll은 Ruby 언어를 베이스로 한 것인데, Mac에는 Ruby가 기본으로 설치되어있습니다.
• 하지만 대체로 Jekyll 설치를 할 때 버전이 맞지 않는다고 에러가 뜰 것입니다.
• 터미널을 통해 새로운 버전으로 업데이트를 해봅시다.
• Mac OS 기준으로 터미널을 열어 다음과 같이 입력합니다.

$ export PATH=/usr/local/bin:$PATH
$ brew link --overwrite ruby

• 업데이트가 되었으니 이제 본격적으로 Jekyll과 Bunlder를 설치해봅시다.
• 역시 터미널에서 다음과 같이 입력합시다.

$ sudo gem install jekyll bundler'''

• 설치가 끝났습니다! 고생하셨어요 잠시 쉬었다 올까요?
• 참고) 해당 디렉토리 내에 ‘_config.yml’ 파일에 보면 gems: 영역에 써져있는 라이브러리들이 몇 개 더 있을거에요.
• 그 친구들도 비슷하게 설치해주면 됩니다:)

4단계: 로컬 서버에서 블로그 실행시켜보기

• 어서 블로그의 모습을 보고싶군요!
• 블로그를 당장 배포하지 않고 로컬에서 실행시켜봅시다.
• 터미널에서 다음과 같이 실행시켜봅시다.

$ bundle exec jekyll serve

• https://127.0.0.1:4000 로 이동해서 확인해보면,
• 블로그가 나와있군요!! 거의 다 오셨습니다:)

5단계: 테마 블로그 커스터마이징 하기

• 이제 본격적으로 테마 블로그를 ‘내’ 블로그로 만들어 봅니다.
• 각 파일들에 대해 간단히 알아봐봅시다.

1. _config.yml

• 파일에 대한 전반적인 설정이 들어가 있어요.
• 여기서 title, description, email, logo 등 딱 보아도 아 이 부분은 내 정보를 쓰는 거구나 싶은 부분들을 수정하면 됩니다.

2. _posts folder

• 이 폴더에는 모든 포스트들이 저장될거에요.
• .md 파일들을 기억합시다:)

3. index.html

• 말그대로 블로그의 얼굴, 표지를 의미하죠.
• 테마를 사용하게되면 이 부분은 크게 고칠 필요는 없는데, 가끔 이 곳에도 내 정보를 써야하는 부분들이 있어 그 부분만 수정하시면 돼요.

6단계: 블로그를 GitHub으로 배포하기

• 자 우선 로컬 깃 Repository를 설정합시다.

$ git init

• 그러고 이제 폴더 전체를 add 해야겠죠.

$ git add --all

• 커밋, 푸쉬를 해줍니다.

$ git commit -m "Init blog!"
$ git remote add origin https://github.com/본인깃계정/본인깃계정.github.io.git
$ git push origin master

• remote를 초기화할 땐 다음 코드를 사용합니다.

$ git remote remove --all

• 이제 ‘본인깃계정.github.io’ 에 접속해보세요!
• 시간이 조금 걸릴지도 모릅니다:)

7단계: 블로그 포스팅하기

• 블로그 포스팅은 생각보다 심플해요 지금도 하고 있죠:)
• 아까 봤던 블로그 테마 폴더 디렉토리에 가보면 _posts 폴더가 있을거에요.
• 그 폴더에 들어가면 샘플 파일들이 존재합니다.
• 파일 확장자는 .md 일텐데, 이는 Markdown(마크다운)이라고 하며 텍스트 에디팅을 하는 하나의 문법 정도로 생각하시면 될거 같아요.
• 아주 간단한 문법만으로 지금 보시는 글 처럼 예쁜 디자인을 얻을 수 있답니다.
• 마크다운 문법에 대해서는 여기서 깊게 다루지 않고, 블로그를 포스팅하는데 필요한 규칙만 말씀드리자면,
• 일단 따라해봅시다. 샘플 md 파일을 하나 복사해봐요.
• 이름을 수정합시다. 이때 이름 규칙은 ‘yyyy-mm-dd-post-name’입니다!
• 그 후 파일을 열어보면 초반 ‘— —‘ 사이에 여러가지가 리스트업 되어있을겁니다.
• 이들이 해당 파일의 설정과 같은 존재인데 여기서 title, date, excerpt, tag 를 마음껏 고치시면 됩니다.
• 그러고 아까 열어두었던 터미널을 사용해 또 1) add –all, 2) commit -m, 3) push 를 시전합시다.
• 중간에

$ git status

• 를 입력하면 어떤 파일들이 변화되어 지금 업데이트가 되는지를 확인할 수 있어요.
• 이제 블로그를 새로고침하면서 새로 게시된 글을 확인합니다!! 역시 시간이 조금 걸릴 수 있어요:)

마치며

• 깃헙 블로그를 완성시켰군요!
• 처음 이런 블로그를 볼 때 참 멋있다고 생각했는데,
• 그래서인지 블로그를 하나 만든 것만으로도 참 뿌듯하네요:)
• 이렇게 만든 블로그는 앞으로 개발을 할 때 좋은 동기부여가 될 것입니다.