깃허브 블로그 꾸며보기
안녕하세요 여러분! 이번 포스팅은 깃허브 블로그를 꾸미는 방법에 대해 알아봅시다!
Avatar(아바타) 바꾸기
위에 표시한 부분을 다른 사진으로 교체하기 위해서 자신의 깃허브 블로그 repository에 들어가 assets폴더 클릭 -> img/favicons폴더 안에 자신의 avatar사진을 Add file을 통해 넣어줍니다!
저는 profile2라는 png 파일을 넣었습니다! 😀
이미지 파일을 넣었다면 repository에서 _config.yml파일에 들어갑니다! _config.yml파일을 내리다 보면 위 사진처럼 avatar를 변경할 수 있는 부분이 있습니다. Avatar를 바꾸기 위해 1번 부분을 “ “만 남기고 지워주고, 2번 부분에 위에서 했던 이미지 파일 경로를 넣어줍니다! ex) /assets/img/favicons/profile2.png 경로를 틀리게 입력하시면 안됩니다!!😰
자 이제 자신의 깃허브 블로그를 들어가 Avatar가 바뀌었는지 확인 해봅시다! 😃
테마 모드 바꾸기 (ex 다크 모드)
깃허브 블로그에 테마 모드도 변경할 수 있습니다! 한번 바꿔 볼까요? 🤭
깃허브 블로그 repository에 _config.yml에 들어가 위 사진처럼 theme_mode를 찾아봅니다! theme_mode를 보면 light모드와 dark모드가 있는 것을 확인해 볼 수 있는데요 기본적으로는 light 모드가 사용됩니다!
다크 모드가 잘 적용된 것을 확인할 수 있습니다!
Favicon 바꾸기
Favicon은 위 사진을 바꾸는 건데요! 한번 바꿔봅시다! 😃
Real Favicon Generator -> 원하는 이미지를 favicon으로 만들어주는 유용한 사이트입니다! 원하는 이미지를 favicon으로 변경해 Favicon package를 다운을 받아줍니다!
Favicon package를 다운받으면 이런 파일들이 보입니다! 위 사진에 밑줄 친 파일은 모두 삭제해 주면 됩니다!
압축된 파일을 풀고 깃허브 블로그 repository에 assets->img/favicons 안에 위 사진처럼 파일을 덮어쓰기를 해줍니다!
Favicon 이미지를 넣어줬다면 repository에 들어가 -> _includes 폴더 -> favicons.html을 들어가줍니다!
assets/img/favicons에 덮어쓰기 한 파일에 이름이나 사이즈가 달라질 수 있기 때문에 favicons.html에서 변경사항을 추가해줍니다!
위 과정을 마치셨다면 Favicon 변경이 완료됩니다! 한번 확인 해봅시다!😁
Favicon이 잘 바뀐 것을 확인할 수 있습니다!!
여러분 고생하셨습니다! 지금까지 블로그를 만들어보고, 블로그를 꾸미기까지 헤보았는데요 다음 포스팅에서는 블로그에 글 쓰는 법(포스팅)에 대해 포스팅을 해보겠습니다. 감사합니다!!
🫡블로그를 꾸미느라 수고하신 여러분! 즐거운 하루 보내세요!! 🫡