GitHub 블로그 만들기 (3) - Jekyll 테마 적용

GitHub 블로그 만들기 (3) - Jekyll 테마 적용

🎨 GitHub 블로그에 테마를 적용해 봅니다.

안녕하세요, 해을입니다🦖

아직은 어디 내놓기에 너무나도 초라한 GitHub 블로그를 Jekyll을 사용하여 간Zl나게 꾸며볼건데요😏

이번 글에서는 Jekyll 테마 적용에 대해 알아보겠습니다!

실습 표시 : 🥨
(🥨 표시는 실습 부분임을 뜻합니다)

💡Jekyll 테마 결정

이전 글에서 말씀드렸다시피 Jekyll에는 무료로 제공되는 테마가 굉장히 많습니다.

또한 테마 검색 사이트도 무척 다양한데, 제공되는 테마는 거의 비슷하고 사이트의 구성만 다른 느낌입니다.

검색이 편리한 곳에서 반응형, 가독성, 지원 기능 등 자신만의 기준대로 테마를 결정하시면 됩니다.

결정이 어려우시다면 테마 추천글도 많이 있으니 참고하시면 좋을 것 같습니다.

저는 여러 추천 테마 중에서 고민 끝에 효과와 호환성이 뛰어난 Hydejack 테마로 결정했습니다.

GitHub블로그3-데모

Hydejack 데모 사이트

💡Jekyll 테마 적용

1. 테마 소스 파일 다운로드

🥨 결정한 테마의 GitHub 저장소에서 다운로드 받습니다.

GitHub블로그3-소스파일다운

검색 사이트에서 바로 다운로드 가능하지만, 제 경험담을 말씀드리면 파일이 누락되는 경우가 있습니다,,,

안전하게(?) GitHub 저장소에서 다운로드하는 것을 추천드려요,,,

2. 다운로드 파일 복사

🥨 파일은 압축을 풀고 전체 복사합니다.

GitHub블로그3-파일복사

3. 자신의 블로그 폴더에 붙여넣기

🥨 자신의 블로그 폴더에 붙여넣기한 후, 이름이 같은 파일은 덮어쓰기 합니다.

GitHub블로그3-블로그폴더

GitHub블로그3-붙여넣기

4. bundle 설치

🥨 터미널을 실행하고 아래 명령어를 사용하여 bundle을 설치합니다.

bundle install

GitHub블로그3-bundle설치

5. 로컬 서버 확인

🥨 브라우저에서 로컬 서버를 확인해 봅니다.

bundle exec jekyll serve

// 에러 발생할 경우(이전 게시글 참고)
bundle exec jekyll serve --trace

GitHub블로그3-테마적용확인

6. (선택) commit/push

🥨 원격 저장소에 push하면 username.github.io 주소에 반영됩니다.

git add --all

git commit -m "Jekyll 설치"

git push -u origin main

지금 commit/push 하셔도 좋고 커스텀까지 한 이후에 하셔도 괜찮습니다.



자! 이렇게 해서 Github 블로그에 테마를 적용해 봤습니다.

커스텀 할 생각에 조금 신나는 기분이네요😝

다음 글에서는 블로그 커스텀에 대해서 소개해 드리도록 하겠습니다.


오류 및 오타 지적, 질문, 인사 등 무엇이든 언제나 환영입니다!

읽어주셔서 감사합니다.

끝!🦕


🔗 다음 글 바로가기 GitHub 블로그 만들기 (4) - 블로그 커스텀

👍 참고


© 2022. Haeeul All rights reserved.

🐾해을의 개발자국🐾

Powered by Hydejack v9.1.5