Home 깃허브 블로그 꾸미기
Post
Cancel

깃허브 블로그 꾸미기

깃허브 블로그 꾸며보기

안녕하세요 여러분! 이번 포스팅은 깃허브 블로그를 꾸미는 방법에 대해 알아봅시다!

Avatar(아바타) 바꾸기

avatar

위에 표시한 부분을 다른 사진으로 교체하기 위해서 자신의 깃허브 블로그 repository에 들어가 assets폴더 클릭 -> img/favicons폴더 안에 자신의 avatar사진을 Add file을 통해 넣어줍니다!

avtar2 저는 profile2라는 png 파일을 넣었습니다! 😀

avatar3

이미지 파일을 넣었다면 repository에서 _config.yml파일에 들어갑니다! _config.yml파일을 내리다 보면 위 사진처럼 avatar를 변경할 수 있는 부분이 있습니다. Avatar를 바꾸기 위해 1번 부분을 “ “만 남기고 지워주고, 2번 부분에 위에서 했던 이미지 파일 경로를 넣어줍니다! ex) /assets/img/favicons/profile2.png 경로를 틀리게 입력하시면 안됩니다!!😰 avatar5

자 이제 자신의 깃허브 블로그를 들어가 Avatar가 바뀌었는지 확인 해봅시다! 😃

avatar4 귀여운 돼지 그림으로 잘 바뀌었네요!!😙

테마 모드 바꾸기 (ex 다크 모드)

깃허브 블로그에 테마 모드도 변경할 수 있습니다! 한번 바꿔 볼까요? 🤭

mode

깃허브 블로그 repository에 _config.yml에 들어가 위 사진처럼 theme_mode를 찾아봅니다! theme_mode를 보면 light모드와 dark모드가 있는 것을 확인해 볼 수 있는데요 기본적으로는 light 모드가 사용됩니다!

mode2 위 사진처럼 변경해주면 theme_mode를 다크 모드로 변경할 수 있습니다!

다크 모드로 잘 적용되었는지 확인해볼까요?😄 mode3

다크 모드가 잘 적용된 것을 확인할 수 있습니다!

Favicon 바꾸기

favicon Favicon은 위 사진을 바꾸는 건데요! 한번 바꿔봅시다! 😃

Real Favicon Generator -> 원하는 이미지를 favicon으로 만들어주는 유용한 사이트입니다! 원하는 이미지를 favicon으로 변경해 Favicon package를 다운을 받아줍니다!

favicon3

Favicon package를 다운받으면 이런 파일들이 보입니다! 위 사진에 밑줄 친 파일은 모두 삭제해 주면 됩니다!

favicon4

압축된 파일을 풀고 깃허브 블로그 repository에 assets->img/favicons 안에 위 사진처럼 파일을 덮어쓰기를 해줍니다!

f5 f6

Favicon 이미지를 넣어줬다면 repository에 들어가 -> _includes 폴더 -> favicons.html을 들어가줍니다!

f7 f8

assets/img/favicons에 덮어쓰기 한 파일에 이름이나 사이즈가 달라질 수 있기 때문에 favicons.html에서 변경사항을 추가해줍니다!

위 과정을 마치셨다면 Favicon 변경이 완료됩니다! 한번 확인 해봅시다!😁 f9

Favicon이 잘 바뀐 것을 확인할 수 있습니다!!

여러분 고생하셨습니다! 지금까지 블로그를 만들어보고, 블로그를 꾸미기까지 헤보았는데요 다음 포스팅에서는 블로그에 글 쓰는 법(포스팅)에 대해 포스팅을 해보겠습니다. 감사합니다!!

🫡블로그를 꾸미느라 수고하신 여러분! 즐거운 하루 보내세요!! 🫡

This post is licensed under CC BY 4.0 by the author.