이카루스 테마에서 메인 로고 및 파비콘 설정 Tip
최근에 Hexo 기반의 깃허브 블로그에 대해서 이것저것 해보고 있는 중입니다. 깃허브 블로그에서 글을 본격적으로 쓰기 전에 화면 구성과 설정등을 하고 있는데 이카루스(Icarus) 테마에서 로고와 파비콘 설정 중에 헷갈렸던 부분에 대해 공유를 해 볼까 합니다.
Hexo 기반의 “정적 사이트 생성기”에 대한 설명 및 깃허브 블로그에 대한 내용은 위 글을 통해서 시작해 보시면 될꺼 같습니다.
저는 Hexo 와 Hexo 테마중에 유명한 Icarus(이카루스) 테마를 사용하고 있습니다. 그런데 메인 로고 및 파비콘 설정을 하였는데 정상적으로 내 깃허브 페이지에 표시가 되지 않는 문제가 발생했습니다.
# Version of the configuration file
version: 5.1.0
# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk
# Path or URL to the website's logo
logo: /image/mainlogo.jpg
# Page metadata configurations
head:
# URL or path to the website's icon
favicon: /image/android-icon-192x192.png
# Web application manifests configuration
# https://developer.mozilla.org/en-US/docs/Web/Manifest
manifest:
# Name of the web application (default to the site title)
name:
# The displayed name of the web application
# when there is not enough space to display full name
short_name:
# The start URL of the web application
start_url:
# The default theme color for the application
theme_color:
# A placeholder background color for the application page to display
# before its stylesheet is loaded
background_color:
# The preferred display mode for the website
display: standalone
# Image files that can serve as application icons for different contexts
icons:
-
최신 이카루스 테마의 경우에는 루트 경로에 있는 “_config.icarus.yml” 파일에서 메인로고와 파비콘을 설정할 수 있습니다.
그런데 위와 같은 경로로 설정을 하고 루트 경로에 “image” 라는 폴더를 만들어서 거기에 이미지 파일들을 올려 두었는데 아무리 확인을 해도 이미지 파일들이 정상적으로 보이지가 않았습니다.
예를 들어 메인로고의 경우에는 “logo : /image/mainlogo.jpg” 와 같이 설정을 하고 루트 경로에 “image/mainlogo.jpg” 파일을 올려 두었는데 아무리 확인을 해도 이미지 파일이 보이지 않더군요.
그래서 이리저리 알아보다가 꽤나 간단하게 원인을 알 수 있었습니다.
이미지 파일의 경로를 “source 의 하위” 에 두면 됩니다.
위 그림에서도 보이듯이 “루트/source/image” 와 같은 형태로 폴더를 만든 다음에 image 폴더에 이미지 파일들을 올려두면 됩니다. 저는 _config.icarus.yml 파일에서 설정해둔 경로와 같이 “루트/image” 형태로 만들고 이미지 파일들을 올려 두었는데 이렇게 하면 이미지 파일들을 불러오지 못하네요.
즉 포스트 파일 및 이미지 파일들도 전부 “루트/source” 하위에 올려놔야 합니다. 이 부분 때문에 고생하시는 분들께 도움이 될까 해서 공유를 해 봅니다.
