[github.io 블로그만들기 5편] 이미지 변경 - 로고, 사이드바 등

이전글

이전 포스팅에서는 github.io를 운영하면서 main branch에서 수정을 하는 실수를 방지하도록 dev branch에서 수정하는 방법을 알아봤습니다.

main branch가 아닌 다른 branch를 바라보도록 설정 (github.io 블로그만들기 4편)

 

다음 포스팅 부터는 로고, 사이드바와 같은 이미지 변경, 포스팅 작성 등의 세부적인 것들을 순차적으로 해볼 예정입니다.

이번 포스팅에서는 로고, 사이드바와 같은 이미지들을 변경해보도록 하겠습니다!

 

 

---

이미지 제작 참조 사이트

이미지들을 변경하기 전에, 원하는 이미지들을 만들거나 저작권이 없는 이미지를 다운받을 필요가 있는데요!

아래에 도움이 되는 사이트들을 적어봤습니다. (아마 구글링하면 더 좋은게 많이 뜰거에요...!!)

 

<저작권 없는 이미지 다운로드>

(1) Pixabay : https://pixabay.com/

(2) Unsplash : https://unsplash.com/

(3) Picjumbo : https://picjumbo.com/

(4) Imcreator : http://imcreator.com/free

(5) Splitshire : https://www.splitshire.com/

 

<이미지 제작>

(1) Canva : https://www.canva.com/ko_kr/create/logos/

(2) ChatGPT-4에 추가된 DALL-E (유료전환필요) : https://chat.openai.com/g/g-2fkFE8rbu-dall-e

(3) 참조사이트

[정보] 디자이너 없이 무료 로고 제작 사이트 모음.zip | 커뮤니티 | 이지캠퍼스

 

 

 

---

주의사항

지난 포스팅에서 main branch에서 수정하는 것 보다, dev branch에서 수정하는게 더 안전하다고 말씀드린거 기억하시죠?!

따라서, 이번 포스팅부터는 main branch에서 작성하는게 아니라 dev branch에서 작성하고, 최종적으로 PR을 통해 main branch에 반영하는 것을 생략하고 작성하겠습니다!

기억이 안나시는 분들은 지난 포스팅을 참조해주세요!

main branch가 아닌 다른 branch를 바라보도록 설정 (github.io 블로그만들기 4편)

 

 

---

1. 로고 이미지 변경

 

먼저, 이미지 제작 참조 사이트를 통해 원하는 로고 이미지를 생성한 다음, 원하는 폴더에 넣어줍니다.

(폴더구조는 편하신대로 작성하시면 됩니다!)

 

저는 기존 구조와 동일하게 "/assets/img/"에 넣어주겠습니다.

다만, Hydejack 테마를 다운받았을 때는 "/assets/img/" 하위에 docs, blog 폴더들이 있는데,

저는 좀 더 쉽게 알아보기위해서, blog-main이라는 폴더를 만들어, 여기에 logo.png 파일을 올려줬습니다.

 

다음으로, _config.yml 파일의 "General settings" 부분에서, "logo:"을 찾아 해당 이미지파일의 경로를 설정해줍니다.

아래는 예시입니다.

# ----------------------------------------------------------------------------------------
# General settings
# ----------------------------------------------------------------------------------------

...

# A (square) logo for your site.
# If provided, it will be shown at the top of the sidebar.
# It also used by the `jekyll-seo-tag` plugin.
logo: /assets/img/blog-main/logo.png

 

 

 

---

2. 사이드바 이미지 변경

사이드바도 로고와 동일하게 변경하면 됩니다.

_config.yml 파일의 "Customization" 부분에서, "accent_image:"을 찾아 해당 이미지파일의 경로를 설정해줍니다.

아래는 예시입니다.

# ----------------------------------------------------------------------------------------
# Customizaton
# ----------------------------------------------------------------------------------------
 
# Sidebar image and theme color of the site.
accent_image:          /assets/img/blog-main/accent_image.jpg

 

 

---

3. 사이드바 아래쪽의 링크 수정하기

다음으로, 사이드바 아래쪽의 링크부분을 수정해보겠습니다.

아래 사진에서 빨간색 부분에 해당하는 부분으로, 수정을 하지않은 상태에서는 잘못된 링크로 이동됩니다.

 

제대로 된 링크를 연결하기 위해서는, "_data/authors.yml" 파일에서 "Social media icons in sidebar" 부분을 찾은 뒤, 아래와 같이 "social:" 아래 부분에 원하는 아이콘 및 링크를 설정하면 됩니다.

  # Social media icons in sidebar
  # Comment/uncommet to show/hide
  # Rearrange to change the order in which they appear
  social:
    email:           hyuckjin23@gmail.com
    github:          hyuckjinkim
    rss:             https://data-scientist-techlog.tistory.com/

🔥 참고사항!
여기서, 콜론(:)의 왼쪽부분은 "_data/social.yml"에 있는 아이콘을 의미하며, 오른쪽부분은 연결 할 링크의 전체 또는 일부분을 의미합니다. social.yml 파일에서 prepend가 설정되어있다면 github과 같이 github username만 적으면 되고, prepend가 설정되어있지 않다면 rss와 같이 모든 주소를 적어야합니다. 자세한 사항은 social.yml 파일을 확인해주세요!

 

 

 

---

다음글

다음 포스팅은 github.io에 Google Ananlytics를 연동하는 방법에 대해서 알아보겠습니다!