[Github Page] Hexo + Icarus 테마에서 로고, 파비콘 설정하는 방법

이카루스 테마에서 메인 로고 및 파비콘 설정 Tip

최근에 Hexo 기반의 깃허브 블로그에 대해서 이것저것 해보고 있는 중입니다. 깃허브 블로그에서 글을 본격적으로 쓰기 전에 화면 구성과 설정등을 하고 있는데 이카루스(Icarus) 테마에서 로고와 파비콘 설정 중에 헷갈렸던 부분에 대해 공유를 해 볼까 합니다.

Hexo 로 깃허브 블로그 설정 및 Private 저장소로 내 블로그 원본소스 저장하는 방법

Hexo 로 깃허브 블로그를 꾸며볼까? IT 기술은 정말이지 계속 알아가도 모르는게 다시 나오는거 같습니다. 며칠전까지 “깃허브 블로그” 운영에 대해 다소 회의적인 시각을 가졌었는데 좀더 자세히 확인을 해보면서 대안을 찾게 되었습니다. 깃허브 블로그는 내 깃허브 계정에서 Page 라는 공간에 “정적 사이트 생성기” 를 올려서 웹을 구동하는 원리입니다. 별도의 DB 가 필요없이 Raw 데이터로 사이트를 운영할 수… 더 보기 »

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” 하위에 올려놔야 합니다. 이 부분 때문에 고생하시는 분들께 도움이 될까 해서 공유를 해 봅니다.

관련 포스트

Hexo 로 깃허브 블로그 설정 및 Private 저장소로 내 블로그 원본소스 저장하는 방법 깃허브 블로그에서 포스트(글)을 쓰는 방법 [Github Page Hexo] 원본 저장소 소스에서 환경 셋팅하는 방법 깃허브 블로그의 치명적인 단점에 대해 깃허브 블로그(github pages)가 사용 고민일때 대안으로 선택할 수 있는 방법