GitHub Pages vol.1 웹사이트 만들기

안녕하세요.

 

저도 다른 분들의 깃헙 페이지 관련 포스트를 참고하여 포트폴리오 웹사이트를 구성하였습니다.

이 글은 제가 깃헙 페이지를 활용하며 느낀 점들과 흔적들을 기록으로 남깁니다.

---

이전 포스트에서 언급한 대로 저는 현재 블로그를 2개 운영 중입니다.

 

1개는 개인 생활 및 취미 활동과 관련한 블로그로 네이버 블로그를 활용하고 있습니다.

그리고 기술블로그는 이곳. 티스토리를 사용하고 있죠.

 

이렇게 파편화되다 보니 한번에 엮어 주기 위한 일종의 포탈이 필요하게 되었습니다.

또한 커리어 관리를 위해 포트폴리오도 정리할 필요성도 영향을 미쳤습니다.

 

2~3년 동안은 제가 직접 개발하고 도메인도 구입하는 등 a-Z로 진행하려 하였으나... 혼자 하려면 투입 공수 대비 생산성이 썩 나오지 않는다고 판단하여 포기했습니다.

 

그러던 중 깃헙 페이지를 알게되었고 제 목적에 80점 이상 부합된다고 판단하여 최근 구성하게 되었습니다.

사용자 ID로 도메인까지 제공을 해주니까요.

---

우선 저는 테마를 위해 무료 Jekyll 스킨들을 둘러보았습니다.

 

http://jekyllthemes.org/

Jekyll Themes

이 외에도 무료 지킬 테마를 구글링해보시면 찾아보실 수 있습니다.

 

Jekyll 이란?

흔히 개발자분들이 문서화 작업에 많이 사용하시는 마크다운 문법으로 작성된 정적 파일들로 웹사이트를 만들어주는 일종의 템플릿 또는 블로그 프레임워크입니다.

https://jekyllrb-ko.github.io/

Jekyll • Simple, blog-aware, static sites

위 링크에서 기본적인 구조와 문법을 확인하실 수 있습니다.

 

---

저는 우선 깔끔한 테마로 선택하였습니다.

여러 예쁜 테마들을 사용해 보았으나 한글 콘텐츠를 작성하면 폰트가 마음에 들지 않거나 프레임이 틀어지기도 하더군요.

 

그래서 깃북 테마로 선택하여 구성하였습니다. (아래는 제가 선택한 깃북 테마입니다.)

https://github.com/sighingnow/jekyll-gitbook

Step1. 프로젝트를 포크합니다. 

https://github.com/sighingnow/jekyll-gitbook

GitHub - sighingnow/jekyll-gitbook: Build Jekyll site with GitBook style!

 

Step2. 리포지토리 이름 수정하기

Fork해서 내 리포에 가져오고 나면 Settings 메뉴에서 리포 이름을 "{깃헙 아이디}.github.io"로 수정해 줍니다.

 

이것으로 개인 웹사이트가 구성이 되었습니다!!(?)

 

 

아래 Pages 메뉴로 이동해 보면 아래와 같이 본인의 웹사이트가 준비된 것을 확인하실 수 있습니다.

도메인을 클릭해보면 내 웹사이트로 이동됩니다.

 

아직 아무런 내용을 수정하지 않아 데모에서 확인했던 콘텐츠가 표시될 것입니다.

---

Jekyll 프로젝트 살펴보기

내 리포에서 소스를 로컬로 내려받아 보겠습니다.

(git clone ~ )

 

1. _config.yml

프로젝트 루트 위치에 있는 _config.yml 파일에 기본적인 구성에 대한 내용을 확인할 수 있습니다.

본인에 맞게 수정해 보세요.

처음에 본인 도메인에 접근할 때 URI는 "https://starrything.github.io" 인데 여기서 보여지게 되는 화면은 "/index.md" 파일입니다.

이곳에서 본인에 대한 소개를 구성해 보는 건 어떨까요.

 

---

지킬 디렉토리 구조에 대한 내용은 아래 링크에서 상세히 확인해보실 수 있습니다.

https://jekyllrb-ko.github.io/docs/structure/

Directory Structure

 

결국에 우리는 "_posts"디렉토리 아래에 마크다운 문법으로 콘텐츠만 작성하여 관리하면서 개인 웹사이트 및 블로그를 운영할 수 있습니다.

 

더 궁금하신 내용이 있으면 알려주세요.

 

 

아래는 현재 진행 중인 제 개인 웹사이트 입니다.

https://starrything.github.io/

About Me

 

다음 포스팅에서는 지금까지 구성한 기본적인 지킬 웹사이트에 댓글 기능을 추가해 보겠습니다.