Github Blog 만들기 #4 - SideBar 꾸미기 + 내 블로그처럼 보이게 하기
지금까지 따라오시면 Hydejack의 사진테마 그대로 이실텐데요, 오늘은 사이드바를 꾸미는 작업을 해보려고 합니다.
정체성을 부여하는 과정이죠. 꾸미는 과정이라 아마 즐거우실겁니다.
그럼 시작해볼까요?
banner 수정
먼저 Banner를 수정해보겠습니다.
원하는 배너 이미지 Searching
먼저 원하는 그림을 Searching 합니다.
저는 핀터레스트 사이트에서 배너 이미지를 찾아서 사용했습니다.
블로그가 비영리 목적이지만 저작권 주의하세요!
_config.yml 설정 수정
사진을 찾으셨다면 _config.yml 파일을 수정해야합니다.
# file: `_config.yml`
# Sidebar image and theme color of the site.
accent_image: /assets/img/sidebar-bg.jpg //여기에 jpg 경로를 수정
accent_color: rgb(79,177,186)
- accent_image: 우리 배너 파일의 경로입니다. 이부분을 수정해야겠습니다.
- accent_color: 하이드잭에서 제공하는 밑줄 강조 색 수정입니다. 내가 원하는 배너를 수정하고 알맞게 바꿔줘야겠죠?
저는 그냥 원하는 파일을 `/assets/img/sidebar-bg.jpg로 overwrite해서 수정했습니다.
gif로 배경화면 수정하는 방법
저는 배너를 gif로 수정했습니다.
gif로 수정하는 방법은 아래와 같습니다.
accent_image에 살짝 다른 설정들을 추가해줘야합니다.
accent_image:
background: center / cover url(/assets/img/sidebar-bg.gif) //여기에 gif 경로를 수정
overlay: false
accent_color: rgb(79,177,186)
저는 저작권 표기만 하면 비영리로 사용이 가능한 minimoss님의 gif를 사용했습니다.
저작권을 위해 footer에 표기
배너기 때문에 어디다 특별히 기재할 곳이 없죠. footer에 출처를 표기해보겠습니다.
<!-- file: `_includes/body/footer.html` -->
{% if site.copyright.size > 0 %}
{% if site.copyright.size > 0 or site.legal.size > 0 or site.hydejack.advertise %}
<footer class="content" role="contentinfo">
<hr/>
{% if site.copyright.size > 0 %}
<p><small class="copyright">{{ site.copyright | markdownify | replace:'<p>','' | replace:'</p>','' }}</small></p>
{% endif %}
{% if site.legal.size > 0 %}
<nav class="legal"><small>
{% for node in site.legal %}
{% assign url = node.url | default: node.href %}
<a class="heading flip-title" href="{% include_cached smart-url url=url %}">{{ node.name | default:node.title }}</a>
{% unless forloop.last %}{{ site.data.strings.separator | default:'|' }}{% endunless %}
{% endfor %}
</small></nav>
{% endif %}
<p><small>Banner gif by <a class="external" href="https://mini-moss.tumblr.com/">minimoss</a> </span></small></p>
<p><small>Powered by <a class="external" href="https://hydejack.com/">Hydejack</a> v<span id="_version">9.1.6</span></small></p>
<hr class="sr-only"/>
</footer>
{% endif %}
하단부분에 아래 코드를 추가해줬습니다.
<p><small>Banner gif by <a class="external" href="출처경로">출처표기명</a> </span></small></p>
logo 수정
로고를 수정해보겠습니다.
logo 만들기
블로그의 아이덴티티를 결정짓는 로고를 직접 만드시는 경우
캔바 혹은 미리캔버스 를 이용하시면 됩니다.
둘 다 30일 무료 이용권이 있지만, 캔바는 투명배경이 유료버전이고 미리캔버스는 배경 투명이 무료입니다.
그래서 저는 미리캔버스를 이용했습니다. 드래그 앤 드랍으로 손쉽게 만들 수 있습니다.
여러 시도가 있었다..
생각보다 어울리는 로고 디자인을 만들기란 쉽지 않았습니다. 흑흑..
꿀팁은 자신이 원하는 배너 색의 팔레트를 검색해서 어울리는 색상을 찾아보는 것입니다.
아이콘을 만드신다면 색상변경이 됩니다.
최종 당첨작. 심플이 베스트였다.
메뉴를 내려다보는 모습을 구현하고 싶었는데 성공한 것 같습니다.
입이 아니라 연필을 물고 있는것입니다.
로고 반영을 위해 _config.yml 수정
반영은 간단합니다. _config.yml 의 로고 부분을 수정하면 됩니다.
# file: `_config.yml`
# 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/logo3.png
저는 그냥 기본 logo.png가 있던 경로에 추가해줬습니다.
내 블로그처럼 커스텀하기
_config에서 수정 가능합니다. 하나씩 보시죠
기본적인 설정
기본적으로 사이드바에 표출되는 부분입니다.
# file: `_config.yml`
# The title of your blog. Used in the sidebar and the browser tab.
title: nomoreFt
tagline: nomoreFt's Dev Blog
이렇게 바뀝니다요~
post 하단 소개글 about 수정하기
# file: `_config.yml`
author:
# Used by `jekyll-feed`:
name: Hyunwoo Kim
email: hyunwoo.kim1108@gmail.com
# # Used by `jekyll-seo-tag`:
# twitter: <username>
copyright: © 2023. All rights reserved.
# file: `_data/authors.yml`
author1:
name: Hyunwoo Kim
email: hyunwoo.kim1108@gmail.com
# Used at the bottom of each page and at the top of the `about` layout
# Markdown enabled, can use multiple paragraphs (enabled by `|`)
about: |
Hello, I'm Hyunwoo Kim, a Web Backend Developer specialized in Java and Kotlin.
My ultimate goal in coding is to implement the correct architecture to make software highly maintainable.<br>
- 🛠 Tech Stack: Java, Kotlin, Spring Boot, Gradle
- 📚 Currently Learning: Clean architectural patterns, DDD, TDD
# This photo will be used in the about section
picture:
path: /assets/img/about128.png
# srcset is optional, but can be used to provide higher res versions for retina displays
srcset:
1x: /assets/img/about128.png
2x: /assets/img/about256.png
social:
github: nomoreFt
email: hyunwoo.kim1108@gmail.com
- author1 : about에 표기되는 사항입니다. _config와 동일한 내용을 입력하시면 됩니다.
- picture : about에 표기되는 사진입니다. 128x128,256x256 사이즈로 준비하시면 됩니다.
- social : sidebar,about에 표기되는 github,email 등의 경로 설정입니다.
- copyright : 하단의 footer 카피라이트 문구가 변경됩니다.
글 밑에 이렇게 달리거나 About 카테고리를 클릭시 나오는 페이지에 적용됩니다~!
favicon 변경하기
마지막으로 파비콘을 수정해보겠습니다~.
파비콘이란 웹 탭에 표시되는 아이콘입니다.
추가적으로 apple_touch_icon도 변경할 수 있는데 이건 apple에서 내 웹을 저장할 때 생기는 아이콘입니다.
파비콘 제네레이터 에서 196사이즈 정도의 png를 넣어주면 다앙햔 사이즈, ico 파비콘 파일을 자동으로 만들어줍니다.
이후 assets/icons에 있는 파일들을 전부 변경해주시면 됩니다.
하이드잭이 화면 해상도마다 다른아이콘을 쓰나봅니다. 사이즈별로 전부 교체해줬습니다.
요 파일들을 전부 변경해줬습니다.
이후 _config.yml에 내 웹 경로를 앱처럼 바로가기를 만들 때 수정될 경로를 추가해줍니다.
# file: `_config.yml`
apple_touch_icon: /assets/img/logo4.png
마치며
축하합니다~! 이정도면 Hydejack을 거의 다 커스텀한 것 같아요.
추가적으로 남은건 구글,네이버에서 내 블로그를 잘 찾을 수 있게 sitemap을 등록해주는 것 정도 남았겠네요.
사이트 별 검색과 RSS 등록 에 정리가 잘 되어있습니다.
그럼 다음으로 드디어 post를 잘 쓰는 하이드잭의 제공 기능을 설명드리고 마무리지으면 되겠네요.
다음 글에서 뵙겠습니다.
