차근차근 Github 블로그 만들기(3) - Github 블로그 커스터마이즈하기

이번에는

이전 포스트 통해 내 개인 블로그를 생성하고 블로그 개발 환경 설정도 끝났다.

이번 포스트를 통해 본격적으로 블로그를 내 스타일로 커스터마이즈 해보자!

블로그 커스터마이즈하기

jekyll 테마는 _config파일을 수정함으로써 테마의 대부분을 커스터 마이즈 할 수 있다.

config 파일에 들어있는 내용은 무엇이고 한번 바꿔보자.

_config.yml

일단 config 파일 중 Site settings라는 부분의 코드를 보도록 하자.

# Site settings
title: Centrarium
subtitle: "A simple yet classy theme for your Jekyll website or blog"
email: blcentra@gmail.com
name: Ben Cen>ra
description: >
A simple yet classy theme for your Jekyll website or blog.
# Base URL of site (i.e. /blog). It should always start with a slash,
# and never end with a slash. Set it to a blank value if hosting at the
# root of your server.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "https://gitblogdemo.github.io/" # the base hostname & protocol for your site
cover: "/assets/header_image.jpg"
logo: "/assets/logo.png"

각 부분이 무엇을 의미하는지 아래 그림을 참고하자.

그럼 이제 해당 내용을 자신이 원하는 대로 변경해보자!

나는 config 파일을 다음과 같이 변경했다!!

# Site settings
title: 줌코딩의 코딩일기
subtitle: Zoom in Coding
email: zoomkoding@gmail.com
name: Jinhyeok Jeong
description: 'Zoom in Coding from the Basic.'
baseurl: ''
url: https://gitblogdemo.github.io
cover: "/assets/Rodman.jpeg"
logo: "/assets/Crewcials.jpeg"

변경한 후에 config 파일을 저장하고 다음 명령어를 실행해서 localhost:4000을 확인해보자!

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

아직 많이 심심하다 이번에는 배경사진과 로고를 변경해보자.

배경 사진과 로고 변경하기

배경 사진을 바꾸기 위해서는 사진의 주소를 알아야 한다.

원하는 사진을 assets에 넣어주고 해당 사진의 정확한(!) 주소를 cover와 logo에 입력한 후 저장한다!

cover과 logo에 해당하는 두 이미지 파일을 assets라는 폴더에 넣어주고

config의 cover와 logo를 변경한다.(아래 파일명이 아니라 자신이 추가한 파일명을 입력해야한다!)

cover: "/assets/Rodman.jpeg"
logo: "/assets/Crewcials.jpeg"

이 때 유의할 점은 확장자명(jpeg, jpg, png)를 헷갈리지 말고 대소문자 구분을 잘해줘야 한다!!

그런 후에는 다시 bundle exec jekyll serve를 진행하면 다음과 같이 사진이 변한 것을 확인할 수 있다!

자 이제 거의 그럴싸한 나만의 블로그가 완성됐을 것이다!

여기까지 잘 만들어졌다면 깃헙에 올려주자.

cd [블로그 레파지토리]
git add .
git commit -m "커스터마이즈1 끝!"
git push

여기까지

만들어진 블로그에 애매한 하늘색 글씨색과 딱딱한 영어 폰트를 바꿔주고 싶을 지도 모르겠다ㅎㅎ

그래서 다음 포스팅에서는 글씨색과 폰트를 변경에 대해 정리하려 한다.