jekyll 테마 찾기
https://jekyll-themes.com/free/
저는 이 많은 무료 테마 중에서 다음과 같은 이유로 chirpy 테마를 선택하게 되었습니다.
- 왼쪽에 카테고리나 네비게이터가 있어 사용자 입장에서 이동이 자유로우며 현재 위치가 어디인지 쉽게 파악이 가능함
- 검색 기능으로 쉽게 글이나 자료를 찾을 수 있음
- 프로필 사진 첨부와 브라우저 탭에 icon을 넣을 수 있어 차별화 된 블로그 제작 가능
- 블로그 첫 페이지에서 포스트의 제목과 글이 간략하게 나와서 복잡해 보이지 않음
- jekyll 테마 중에선 비교적 유명하여 문제가 발생하면 다른 사람들이 사용했던 방법들을 찾아 볼 수 있음
- 꾸준한 관리로 최근까지 업데이트 되어있음
이제 부터는 chirpy 테마 위주로 글을 작성하겠습니다. 다른 테마는 적용 되지 않을 수 있으니 참고 바랍니다!
Prerequisites
Jekyll, ruby, bundler 등을 사전에 설치해야 chirpy를 수월하게 설치할 수 있습니다. 설치 방법은 제 이전 포스트에 나와있습니다. 주소는 아래와 같습니다.
만약 여기서 이해가 잘 안된다면 제가 참조한 블로그들에서 확인 부탁드립니다. 블로그들은 이 포스트 제일 하단에 있습니다.
참고사항
저는 GitHub Desktop 앱을 사용해서 제가 작성한 커맨드를 모두 사용하지는 않습니다. GitHub Desktop 이 매우 편리하지만 모든 사람들이 GitHub Desktop 앱을 사용하지 않아서 커맨드 형식으로 포스트를 작성했습니다. 문제가 생기는 경우 메일 주세요!
chirpy-starter로 레포지터리 생성
저는 제가 참조했던 블로그 들과 다르게 했습니다. 먼저 아래 사이트로 접속해서 레포지터리를 새로 만듭니다.
중요한건 리포지토리 이름을 <자신의 github이름>.github.io로 설정해야 합니다.
만약 이전에 <자신의 github이름>.github.io로 레포지터리를 만드셨다면, 이 리포지토리를 삭제하고 다시 생성하시기 바랍니다.
삭제하는 방법은 settings에 들어가셔서 맨 아래 가시면 Delete this repository를 선택하시면 됩니다.
자신의 컴퓨터에서 원하는 위치에 이동해서
cmd 나 Start Command Prompt With Ruby를 실행하여
위에서 생성한 자신의 리포지토리 주소를 입력후 git clone을 실행합니다.
또는 자신의 리포지토리를 깃허브에서 ZIP파일로 다운 받아 압축을 해제합니다.
그 후 다음 명령어를 실행합니다.
bash tools/init.sh만약 bash가 실행이 안되거나 bash가 설치가 안되어있는 경우 아래 사이트를 참조해서 bash를 설치하시기 바랍니다.
저는 bash 때문에 시간이 많이 뺏겼고 아무도 이 문제가 발생하지 않아 저 혼자 해결하느라 시간이 많이 걸렸습니다.
제가 이 글을 남기는 이유도 여기에 있습니다.
init.sh 명령어는 <자신의 github이름>.github.io 폴더에서
.travis.yml 파일과,
docs 폴더,
_posts폴더 안에있는 파일들을 삭제해주는 기능이 있습니다.
(A) Gemfile.lock을 .gitignore 텍스트 파일 맨 아래에 추가하고 저장합니다. 그리고 Gemfile.lock을 삭제합니다.
(A) 부분은 chirpy 블로그의 getting-started 포스트의 내용과 다르지만 저는 이렇게 해서 오히려 잘 되어 이 방법을 사용하고 있습니다. 자신에게 맞는 방법을 하면 될 것 같습니다.
그리고 Gemfile.lock을 삭제해도 다시 생기는 경우가 있는데 계속 삭제 안해도 저는 잘 되어서 .gitignore 파일에만 Gemfile.lock을 추가하면 되는 것 같습니다.
아까 git clone이나 ZIP파일을 압축 해제한 경로에서 다음 명령어를 실행합니다.
bundle exec jekyll s첫 블로그 페이지 설정 및 변경
_config.yml 파일을 열어서 수정 합니다. 저는 VScode 편집기로 다음과 같이 수정했습니다.
timezone: Asia/Seoul
title: osnim
tagline: Python, Android(java), React, Node.js, C++, C, Linux.
url: “https://osnim.github.io”
username: osnim
name: osnim
email: osnim0320@gmail.com
links: 는 다른 부분은 두고 url 부분만 수정했습니다.
theme_mode: [light]
아래 부터는 프로필 사진을 변경하는 부분입니다. 여기 자세한 부분은 따로 포스트 할 예정이니 일단 넘어가 주세요
img_cdn: “https://cdn.jsdelivr.net/gh/osnim/ Images@edc68e382d111f90dae130584bed36d2c5be1015”
vatar: “/commons/hi_noglasses.jpg”
Running Local Server
git clone을 실행한 위치 또는 chirpy 테마가 설치된 폴더 경로로 이동하셔서 다음 명령어를 실행합니다.
bundle exec jekyll s로컬 서비스가 실행되고 다음 주소를 인터넷 브라우저 주소창에 입력해주시기 바랍니다.
만약 로컬 서비스를 종료하고 싶은 경우cmd 나 Start Command Prompt With Ruby에서 ctrl + c 를 입력하면 됩니다.
이 페이지는 다른사람은 보지 못하고 오로지 자신의 컴퓨터에서만 확인이 가능합니다.
실제 GitHub 블로그에 적용하기
위에서 변경한 사항이 모두 로컬 서비스에서 적용이 잘 되었으면 이제 자신의 github.io
블로그에 chirpy 테마를 진짜로 적용시킬 차례입니다. 저는 블로그 글까지 적용 잘 되는지 https://github.com/cotes2020/jekyll-theme-chirpy/tree/master/_posts의 포스트들을 제 _post 폴더에 넣어 글이 잘 게시되는지 확인하는 방법으로 진행했습니다.
cmd 나 Start Command Prompt With Ruby에서 git push를 진행합니다.
git add --all
git commit -m "커밋 메시지"
git push -u origin main여기서부터가 가장 중요합니다. chirpy는 다른 jekyll 테마와 달리 브랜치가 main이 아닌 chirpy 제작자가 만든 gh-pages라는 branch를 새로 생성해서 bot을 이용하여 자동으로 pages build and deployment을 실행해서 GitHub에 반영합니다.
이와 관련해서 자세한 사항은 chirpy getting-started 페이지를 확인하면 될 것 같습니다.
만약 pages build and deployment에서 빨간 불이 들어온다면 글 제목이나 Gemfile에서 문제가 생긴 것이니 다시 한번 확인 부탁드립니다.
글 제목의 경우 되도록 영어로 작성하기를 권장드리며, 띄어쓰기 대신 - 를 사용해주세요
gh-pages라는 branch를 적용하는 방법은 자신의 GitHub 페이지로 이동해서 <자신의 github이름>.github.io 리포지토리로 이동합니다.
그 후 Settings의 Pages 메뉴로 이동해서 Branch를 main에서 gh-pages로 선택하고 /(root)폴더는 그대로 놓고 save 버튼을 클릭합니다.
만약 gh-pages Branch가 생성되지 않은 경우
bash tools/init.sh 에서 문제가 생겼거나 Gemfile.lock에서 문제가 생긴 것일 수 있으니 .gitignore 파일에서 Gemfile.lock을 넣어보시고 안되면 리포지토리를 삭제하고 처음부터 다시 하기를 권장합니다. 저 또한 그랬습니다.
save까지 잘 되었다면 이제 리포지토리의 Actions로 이동하셔서 블로그에 적용되는 진행사항을 볼 수 있습니다.
Action에서 노란 불이 들어오며 진행상황을 알려줍니다. 평균 30초~ 2분 정도 소요되며 이보다 더 오래 걸린적도 있지만 5분을 넘기진 않는 것 같습니다.
그리고 초록불이 들어와 GitHub 블로그에 적용이 되었다고 하더라도 실제 저희가 보는 데에는 시간이 더 걸리니 10초~30초 정도 블로그를 확인해보시기 바랍니다.
저도 처음에는 변경할 때 마다 블로그에 적용했는데 이러면 시간이 오래 걸리고 바로 확인을 못하는 문제가 발생했습니다.
그래서 지금은 로컬에서 먼저 수정을 하고 최종만 블로그에 포스팅하는 방식으로 진행하고 있습니다.
혹시라도 잘 안되는 부분이 있으면 왼쪽 메일로 문의 주세요!
제 블로그를 방문해주셔서 정말 감사합니다.
참조한 사이트
여기는 제가 참조한 사이트입니다.
https://kkminseok.github.io/posts/startblog/
'jeykll theme' 카테고리의 다른 글
| Chirpy jekyll 테마에서 프로필 변경하기 (0) | 2022.03.28 |
|---|---|
| jekyll(지킬)로 Github 블로그 만들기 (Windows10, 64bit) (0) | 2022.03.28 |