github.io 페이지 만들기3 성공

Posted Nov 11, 2023 Updated Nov 11, 2023

By 호롱고양이 8 min read

지난 포스트에서는 jekyll로 오프라인 사이트 구동까지 성공했고
이제는 원하는 테마를 입힐 차례랍니다.

1. 원하는 테마 고르기

jekyll은 수많은 테마를 가지고 있고 그 중 원하는 테마를 선택하여 다운로드 하시면 됩니다.

http://jekyllthemes.org/
제가 선택한 테마는 http://jekyllthemes.org/themes/jekyll-theme-chirpy/ 테마로 프론트엔드를 공부해본 적이 없는 저에게 다른 사람들이 많이 사용하는 이 테마는 꽤나 좋은 테마입니다.

사이트에 들어가보면
이런 화면을 보게 될 텐데 저는 여기서 download를 누르지 않고 Homepage를 눌러 직접 github에서 다운받았습니다. 만 딱히 차이가 없는 것 같더군요.

이제 여기서 다운로드 한 파일의 압축을 풀고, 폴더안에 있는 모든 파일을 전에 만들었던 로컬 폴더에 모두 넣으시면 됩니다.

중복된다는 이야기가 있다면 무시하고 모두 덮어씌우세요.

2. 테마 설치 & 세팅하기

로컬폴더에 있는 폴더는 이미 chirpy 개발자가 많들어놓은 세팅이 되어있기에, 초기화를 시켜줍시다.

저는 윈도우 사용자이기에 윈도우 기준으로 설명합니다.

Gemfile.lock 파일 삭제
.travis.tml 파일 삭제
_posts 디렉토리 삭제
docs 디렉토리 삭제
.github/workflows/pages-deploy.yml.hook 파일을 제외한 나머지 파일 삭제
.github/workflows/pages-deploy.yml.hook 파일명을 pages-deploy.yml로 변경

이라고 하던데 일단 저는
Gemfile.lock -> Gemfil 파일 삭제
_posts 디렉토리 삭제
docs 디렉토리 삭제
.github/workflows/pages-deploy.yml.hook “파일도 삭제” deploy를 쓰는게 아니라 github actions을 사용할 것이기 때문에.

이정도로 세팅을 마무리 하였습니다. 이후 아래 커맨드를 실행하면 테마 적용은 끝입니다.
1 $ bundle install

3. _config.yml 설정하기

이 부분은 테마에 따라 다를 것 이기에 Chirpy 테마가 아니라면 검색해서 찾아보기!
아래는 제 설정값입니다.


*lang*	웹 페이지 언어 선택, 지원하는 언어의 종류는 *`/_data/locales/`* 에서 확인하실 수 있습니다. 저는 한국어로 설정 해 놓아서 ko(kr 아닙니다 이것땜시 얼마나 검색을 했던지…)로 써 주시면 됩니다.
*timezone*	Timezone 설정입니다. 한국에 거주 중이라면 *`Asia/Seoul`*을 입력해주세요.
*title*	블로그의 타이틀 입니다.
*tagline*	블로그의 서브 타이틀 입니다.
*description*	자세히는 모르겠으나… 블로그 소개 적으시면 될 듯 합니다.
*url*	*`"https://{my_github_username}.github.io"`* 형식으로 적어주세요. 훗날 github아이디를 바꾸게 되면 여기를 다시 바꾸어야 한답니다!(제가 그랬죠)
*github_username*	자신의 github username을 적으면 됩니다.
*social_name*	자신의 이름이나 닉네임을 적으시면 됩니다.
*social_email*	자신의 이메일 주소를 적습니다.
*social_links*	자신의 소셜 링크 주소를 적습니다.
*avatar*	자신의 프로필 사진 링크를 적어주시면 됩니다. 주로 *`/assets/img/`* 디렉토리 안에 이미지를 저장합니다. avatar: “/assets/img/avatar.jpg” 이런식으로

기본적인 설정은 모두 끝났습니다! 만약 추가로 할 것이 있다면 아래로.

추가적인 설정


*google_site_verification*	나중에 설정 할 것으로 구글 검색에서 블로그가 보일 수 있게 설정하는 코드입력 자리

이제 다시 설정이 완료되었을지 아래 커맨드로 테마 적용을 확인하러 가 봅시다.

$ bundle exec jekyll serve

테마가 잘 적용 되었다면 이런식으로 본인이 넣은 아바타와 설정된 것들을 볼 수 있을겁니다.

4. 나의 실수

나중에 블로그를 github에 올리다보면 buil fail이라는 문구와 함께 ~~.json not found라는 문구를 보게 됩니다. 적어도 저는 그러했다죠..

그리고 이것을 해결하기 위해 우리는 미리 node.js를 설치하도록 합시다.
node.js사이트에 들어가서 본인의 os에 맞는 파일을 다운로드 하세요.