지킬(jekyll)에서 첫 화면 바꾸기 index.html

이제 본격적으로 홈페이지를 내 스타일로 바꿔 봅시다.

먼저 서버를 구동 시키고 bundle exec jekyll serve
테마 폴더로 이동한다.
그리고 브라우저 창에 http://127.0.0.1:4000으로 접속해서 홈페이지 첫화면을 .감상해 보자

홈페이지 글자 바꾸기

글자 바꾸는 건 간단하다.

브라킷으로 테마 폴더의 index.html을 파일을 열어 본다.
브라우저에서 바꾸고 싶은 글자 드래그 해서 카피
index에서 찾기누르고 바꾸면 된다.

바꾸면서 구조가 어떻게 되어 있는지 찬찬히 뜯어 보면 좋다. 일단 메인 이미지 있는 영역, 아래 문구와 이미지 있는 부분, 하단에 3단으로 나뉜 영역이 있다.

홈페이지 메인 이미지

이미지를 바꾸려면 먼저 바꾸고 싶은 이미지가 있어야 겠죠? 나는 제부도에서 새벽에 찍은 밤하늘 사진을 준비 했다. (사진 크기는 500k 이하로 해야 홈페이지 속도가 그럭저럭 나오겠죠? )

이미지를 바꾸는 건 코드를 수정하는 방법과 기존의 이미지를 단순히 교체 하는 방법이 있다.

기존의 이미지를 교체 하는 방법

내가 준비한 이미지의 파일 이름을 bg.jpg로 저장한다.
/assets/img/ 에 넣어 덮어쓰기 해 준다.

코드를 수정하는 방법은

내가 준비한 이미지를 테마 폴더의 /assets/img/ 폴더 안에 에 넣는다.

_scss/_jekyll-doc-theme.scss 파일에서

  .header-container {
  background-color: black;
  background: url('../img/bg.jpg') no-repeat 50% 0;
  color: #fff;

부분의 /assets/img/bg.jpg를 내가 준비한 이미지로 변경한다.

참고로 페이지 중간 이미지는 index.html에서 /assets/img/jekyll-dark.png 를 찾아 수정하면 되고
페이지 상단 로고는 /_includes/topnav.html/ 파일에서 /assets/img/logonav.png를 찾아 수정 하면 된다.

코드를 수정하는 방법은 지킬 버전에 따라 달라 질 수 있기 때문에 그냥 이미지 파일을 교체 하는 방법을 추천한다.

제일 위에 있는 로고는 /assets/img/logonav.png 가운데 지킬 로고는 /assets/img/jekyll-dark.png 브라우저에 나타나는 파비콘은 /favicon.ico 파일이다.

크기 등이 변경되면 이미지 레이아웃이 깨질 수 있기 때문에 내가 가장 자주 사용하는 방법은 원본이미지 그대로 이미지 편집프로그램을 연다음 내가 원하는 이미지를 가져와 덮어 쓴다.
이렇게 편집하면 캔버스 크기 변경 없이 편집이 가능하기 때문에 레이아웃이 잘 뒤틀리지 않는다.

Top