본문 바로가기

Github

Jekyll 테마를 사용하여 Github 블로그 만들기

이번 글에서는 Jekyll 테마를 사용하여 Github 블로그를 만드는 방법에 대해서 작성하고자 합니다.

Jekyll은 Github에서 개발한 무료 정적 웹사이트 생성툴입니다.

공식사이트에서는 다음과 같이 세 가지 장점이 있다고 합니다.

  • 심플함
  • 정적
  • 블로그 지향적

제가 실제로 사용(연구실 홈페이지 운영)하면서 느낀 가장 큰 장점은

다른 유저들이 만들어놓은 이쁘고 괜찮은 무료 Jekyll 테마들이 많다는 것입니다.

웹사이트를 생성 시 처음부터 전부 직접 작성하는 것이 아닌,

마음에 드는 테마를 바탕으로 커스터마이징을 하면 된다는 점이 쉽고 편했습니다.

이제 한 번 직접 만들어보겠습니다.

 

1. 새 저장소(Repository) 만들기

  • + 클릭, New repository 클릭
  • Repository name: {USERNAME}.github.io 
  • Public으로 체크
  • Add a README file 체크

저장소가 생성되면 다음과 같이 주소에 {USERNAME}.github.io 을 입력한 뒤 접속하시면,

다음과 같이 웹사이트가 생성된 것을 확인할 수 있습니다.

  

 

2. Jekyll Theme 선택 및 붙여넣기 

 

이제 무료 배포 테마를 검색한 다음 마음드는 테마를 선택합니다.

아래는 테마들을 모아놓은 사이트입니다.

저는 검색 중 Taylan Tatli가 제작한 Moon Jekyll Theme로 선택했습니다.

선택한 테마의 Github를 들어간 뒤 본인의 작업환경에 복제(clone)합니다.

  • 예시) git clone https://github.com/TaylanTatli/Moon.git

마찬가지로 처음에 만들었던 자신의 웹사이트 저장소도 복제(clone)합니다.

  • 예시) git clone https://github.com/Taemin-Choi/Taemin-Choi.github.io.git

다운받은 테마 저장소 폴더 내용본인의 웹사이트 저장소 폴더안으로 복사(README.md는 제외)합니다.

복사 전
복사 후

 

3. Push 하기

 

3.1. staging 영역에 변경사항을 추가합니다.

$ git add .

3.2. 추가사항에 대한 commit을 작성합니다.

git commit -m "initial commit"

3.3 변경사항을 원격저장소로 업데이트 합니다.

git push

* Push명령어 실행 시 Username과 Password를 입력하여야 합니다.

 

4. 업데이트 확인하기

업데이트 된 웹사이트를 접속하면 다음과 같이 테마가 반영된 것을 확인할 수 있습니다.

이상으로 Jekyll 테마를 사용하여 GIthub 페이지를 만들어보았습니다.

Github 자체에서 Jekyll를 사용하여 웹사이트를 랜더링하기 때문에 굳이 Jekyll 설치가 필수적이진 않습니다.

하지만,

실제로 페이지를 운영하려면 Jekyll를 설치하여 로컬 영역에서 커스터마이징 후 원격저장소로 업데이트하는 것을 추천드립니다.

 

추후에 이번에 만든 페이지에 포스팅하는 방법과 간략하게 커스터마이징 하는 방법을 올리도록 하겠습니다.

 

참고: https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll