지킬테마를 이용하여 깃허브 블로그를 생성하고 몇 가지를 커스터마이즈하였습니다.
1. 기본값 변경
_config.yml 파일에서 기본으로 설정되어 있던 title, description, image, url 등을 수정해주었습니다.
2. 상단 네비게이션바
기존에는 트위터, 깃허브, About 네비게이션바만 존재하였는데 About 네비게이션바를 참고하여 Project 네비게이션바를 추가하였습니다. About과 동일하게 project.md 파일을 생성하고 index.html에서 <a href=/project/>Project</a> 코드를 추가하여 버튼을 생성해주었습니다.
3. 글씨크기
글씨크기를 수정하기 위해서는 어느 위치의 어느 파일에서 테마의 글씨크기를 지정해주었는지 알아야합니다. /css/main.sass에서 지정해주었다는 것을 발견했고 포스트의 글씨를 의미하는 p 와 포스트의 리스트를 의미하는 li 의 글씨크기를 수정해주었습니다. header 4, 5, 6의 크기도 변경해주었습니다.
* post
* post-content
p
font-size: 18px
li
font-size: 18px
4. 파비콘(Favicon)
먼저 이미지를 아이콘으로 변환해주었습니다. 아이콘을 생성하는 사이트는 여러 사이트가 있는데 https://www.favicon-generator.org/ 사이트를 이용하시는 분들이 많았습니다. 하지만 해당 사이트에서는 아이콘의 배경을 투명하게 할 수 없어 https://realfavicongenerator.net/를 이용하였습니다. 배경이 이미 있는 아이콘의 경우 첫번째 사이트를 이용하셔도 무관할 것 같습니다.
사이트에서 생성한 파일을 /assets/images/favicon/에 저장해주었고 /_includes/head.html에 사이트에서 제공한 html 코드를 입력하였습니다. 생성한 코드를 입력할 때 파일의 위치 앞에 /assets/images/favicon/를 붙여야한다는 점을 유의하시길 바랍니다.
5. 수식 markdown
깃허브 블로그는 기본적으로 수식을 지원하지 않아 추가적으로 수식 markdown 기능을 생성하였습니다. /_includes/head.html에서 <head>와 </head> 사이에 아래와 같은 코드를 삽입하였고 글을 작성할 때 use_math: true를 추가하여 수식 마크다운 기능을 적용하였습니다.
6. Syntax highlighting
기존의 Syntax highlighting에서 디자인을 수정하였습니다. /css/main.sass에서 pre>code의 border, border-radius, background-color를 수정하여 코드블럭의 스타일을 변경하였습니다. 또한, code의 padding, background-color를 수정하여 인라인 코드블록의 스타일을 변경하였습니다.
7. 댓글기능
DISQUS 페이지에 가입하여 게시글마다 댓글기능을 추가하였고 글을 작성할 때 comments: true로 댓글기능을 사용하도록 하였습니다.
8. 로고분리
블로그 title과 함께 보여지는 대표 로고와 클릭하면 초기 화면으로 돌아가는 블로그 로고가 동일한 이미지를 사용하는 테마였는데 이를 logo와 blog-logo로 분리하였습니다.
9. 글 카테고리
Github Blog에서 F12 개발자 도구 디버거 창을 이용하여 기존의 카테고리를 확인하였고 이를 기반으로 카테고리를 수정하였습니다. index.html에서 사용하지 않는 카테고리는 삭제하고 새로운 container를 생성해주었습니다.
<!--headline 생성-->
<h5 class="index-headline algorithm"><span>Algorithm</span></h5>
<!--class 생성-->
<div class="container algorithm">
<!--해당 tag의 포스트만 보여지도록-->
</div>
위와 같이 index.html을 수정하고 글을 작성할 때 tags: algorithm로 태그를 달아주었습니다.