본문 바로가기
Github Blog

Git hub 블로그(3) 메인화면 커스터마이징

by GeekCode 2021. 9. 11.
반응형

블로그 커스터마이즈하기

  • jekyll 테마는 _config.yml 파일을 수정함으로써 테마의 대부분을 커스터 마이즈 할 수 있다.
  • config 파일에 들어있는 내용을 잘 살펴본다.

 

난 이미 vscode로 연동해서 편집하기 시작해서 좀 편해졌긴한데 그 전까진 터미널로 모두 작업했다.

처음엔 터미널에 익숙해질겸 터미널로만 몇시간 해봤더니 금방 익숙해졌고 

 

깃허브에 푸시하는 것도 그냥 터미널로 하는게 빠르긴 빠르더라.

 

내 블로그 레포지토리 폴더로 찾아들어가서 _config.yml 파일을 수정할 수 있는 코드를 입력한다.

vim _config.yml

그러면 또다시 만나게 되는 이 화면에서 많은 것들을 수정하면 된다.

 

나의 입력들을 한번 보면

locale                   : "en-US"
title                    : "Gikko's World"
title_separator          : "-"
subtitle                 : "Developer who started as a musician" # site tagline that appears below site title in masthead
name                     : "Hyeonseok Bang"
description              : "Developer who started as a musician."
url                      : "https://wisehyun0814.github.io" #the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
baseurl                  : ""

생각보다 설명과 예시가 은근 자세하게 되어있었다. 사진파일과 로고 파일이 필요했으니 준비해서 assets 폴더에 넣자.

 

모두 수정하고  :wq 를 누르고 나온다.

 

그다음 이제 적용한 화면을 한번 체크해봐야한다. 이상하면 바꿔야하니까!! 다행히 푸시하지않으면 이리저리 계속 수정해도된다.

 

다시 터미널로 돌아와서 블로그 레포지토리에 들어가 bundle exec jekyll serve --incremental 이걸 입력한다.

그러면 서버가 다시 열린당..

cd [블로그 레파지토리]
bundle exec jekyll serve --incremental

 

 

그럼 브라우저에서 http://127.0.0.1:4000 을 입력해보면 반영된 수정사항들을 모니터링 할수가 있다. 그냥 한쪽에 계속 이걸 띄워두고 

터미널 하나 더 틀어서 config.yml파일을 수정하고 저장하면 바로바로 확인 할 수 있는 듯했다.

짜잔!! 

 

 

마음에 들지않았다면 다시 수정하고.. 난 여기서 지쳤기 때문에 이제 푸시를 해야겠다. 깃허브에 커밋을 하면 서버에 업로드 하는 거라고 이해하면 된다.

 

cd [블로그 레파지토리]
git add .
git commit -m "메인화면 커스텀"
git push

여기까지 하면 끝!! 바로 내 블로그를 보면 안됐나 싶지만  1-2분정도 지나야 확인할 수있다.

 

그렇다면 여기까지 완성!!!

반응형