jekyll로 GitHub Pages 만들기(3)

개발자 도구

저는 보통 CSS를 수정할 때 크롬 개발자 도구(F12)를 활용하여 미리 구성을 확인한 다음, VSCode에서 수정하는 방식으로 진행하고 있습니다.

커스터마이징

• 프로필 사진 변경
• 사이드바 수정
• Favicon 이미지 변경

프로필 사진

프로필 이미지는 /assets/img/ 폴더에 넣으면 됩니다.
로컬에서는 해당 경로만 적어도 잘 나오지만 원격에 올리면 이미지가 제대로 뜨지 않는 오류가 발생할 수 있습니다. 이 문제를 해결하기 위해 절대 경로를 사용해야 합니다.

https://pingppung.github.io/assets/img/사진이름.확장자

사이드바

개발자 모드로 찾아본 기존 Chirpy의 사이드바 CSS는 아래와 같습니다.

#sidebar {
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    width: 260px;
    z-index: 99;
    background: #c7d6e6;
    border-right: 1px solid var(--sidebar-border-color);
    text-align: center;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

사이드바 배경 설정

사이드바의 CSS를 변경하려면 _sass/addon 폴더 내의 custom.scss 파일을 수정합니다. 예를 들어, 사이드바의 색상을 변경하려면 background 속성을 변경하면 됩니다.

사이드바에 배경 이미지를 추가하려면 custom.scss 파일에 다음 코드를 추가합니다.

.sidebar {
  background-image: url('https://pingppung.github.io/assets/img/background.jpg');
  background-size: cover;
}

Contact 정보 변경

_data 폴더 내의 contact.yml 파일을 수정하여 연락처 정보를 업데이트합니다. 필요하신 부분 이외에는 삭제하거나 주석처리하면 사라집니다.
아이콘부분은 fontawesome에서 원하는 아이콘으로 변경할 수 있습니다.

favicon 이미지

Favicon은 브라우저 탭에 표시되는 이미지를 말합니다.

Favicon은 이미지나 글자 등 본인이 원하는대로 제작을 하신 후 favicon 제작 사이트에서 ico를 생성합니다. 생성한 파일들을 /assets/img/favicon/ 폴더에 덮어씌웁니다.
만약, 파일명이 다르면 favicon을 적용시키는 파일을 찾아 경로를 수정해야 합니다. 저는 파일명이 같기 때문에 경로를 수정하는 과정은 진행하지 않았습니다.

저는 작가 rawpixel.com 무료 이모지를 사용했습니다. 출처 Freepik