Jekyll을 이용하여 Github Page를 만들어보자!
구글 검색을 하시다보면 많은 기술 자료들이 블로그를 통해 올라오는 것을 볼 수 있습니다.
그 블로그들의 공통점은 github.io 의 도메인을 가지고 있다는 것입니다.
github.io 와 Jekyll 을 이용하면 누구든 쉽게 개인 블로그를 만들고 많은 정보를 공유 할 수 있습니다.
한번 직접 만들어 보겠습니다.
Repository 생성
github 를 가입하고 이메일 인증까지 완료하면 다음과 같이 Repository 생성을 하도록 페이지가 나옵니다.
Repository 의 이름을 chhanz-test.github.io 로 생성을 합니다.
Repository 를 생성하고 위와 같이 Repository 초기화를 하는 단계가 나옵니다.
github 를 잘 활용하시는 분들은 command line 을 이용하여 초기화를 진행해도 됩니다.
간단한 페이지만 생성을 할 것이니, Web 에서 만들어 보겠습니다.
README.md 파일에 MarkDown 문법을 이용하여 페이지를 작성합니다.
MarkDown 문법에 대해서는 MarkDown - Basic-syntax 참조 바람니다.
Commit 을 합니다.
위와 같이 README.md 파일이 생성된 것을 볼 수 있습니다.
https://chhanz-test.github.io 로 접속을 해보겠습니다.
위와 같이 README.md 에 작성한 내용이 웹서비스가 되는 것을 볼 수 있습니다.
하지만 우린 이런 웹페이지를 원한 것은 아니죠…
Gibhub 테마
다른 사람들의 번쩍번쩍한 웹페이지와 같이 우리의 웹페이지도 반짝이게 만들어보겠습니다.
Repository 에서 Setting 메뉴로 들어갑니다.
해당 메뉴의 하단 부분에 Github Pages 라는 항목이 있습니다.
여기서 테마를 선택 할 수 있습니다. Choose a Theme 를 선택합니다.
Github 에서 기본적으로 제공되는 테마들을 볼 수 있습니다.
예제로 테마 하나를 선택해보겠습니다.
다크한 테마로 Select Theme 를 합니다.
_config.yml 파일이 생성이 되고 특정 테마가 적용된 것을 볼 수 있습니다.
다크 다크 하네요.
이후에는 Jekyll 구문을 이용하여 웹페이지를 풍성하게 만들 수 있습니다.
포스팅, 메뉴, Sitemap 등등을 말이죠.
http://jekyllrb-ko.github.io/docs/usage/
위 Jekyll 문서를 참고하여 작업을 하면 됩니다.
일일이 문서를 찾아서 페이지를 만드는 것은 많은 공부가 필요합니다.
github 에는 능력자 분들이 많습니다.
그 분들의 힘을 빌려봅시다 :)
Fork Jekyll Theme
능력자 분들은 이런 사이트를 제공해주셨습니다.
http://jekyllthemes.org/
해당 사이트에서 마음에 드는 테마를 선택하면 해당 테마의 Github Repository 로 연결됩니다.
마음에 드는 테마를 Fork 하도록 하겠습니다.
Fork 가 완료되면 아래와 같이 나의 Github Repository 에 Forked 된 Repository 가 생성이 됩니다.
Forked 된 Repository 를 Clone 합니다.
Clone 이 되면 해당 경로로 Jekyll 을 Build 할 수 있도록 아래와 같이 Script 를 만들어 보았습니다.
(Jekyll 을 이용하여 Build 하는 과정은 해당 테마에서 제공한 README 를 참조합니다.)
간단하게 웹페이지를 수정해보겠습니다.
페이지의 제목, 설명등등을 수정했습니다.
Jekyll 을 이용해서 Build 합니다.
위와 같이 테마가 반영이 된 것을 볼 수 있습니다.
그럼 이제 게시물을 작성해보겠습니다.
위와 같이 MarkDown 문법을 사용해서 글을 작성하였습니다.
Jekyll 에서 신규 파일 생성을 확인하고 웹페이지에 반영합니다.
새로 작성한 글이 잘 나오는지 확인합니다.
게시글의 내용까지 완벽합니다!!
이제 이렇게 수정된 소스를 chhanz-test.github.io 의 Repository 로 넣고 git push 를 합니다.
소스를 복사합니다.
git add 수행
git commit 수행
git push
실제 https://chhanz-test.github.io/ 에 접속하면 !!!
Jekyll 을 이용하여 테스트한 웹페이지가 Published 되는 것을 볼 수 있습니다.