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