[Blog] 깃 블로그 구조파악

필자의 깃 블로그 커스텀 방식들을 정리하려고 한다! 알아두면 좋을 깃 블로그 구조를 파악해보자.

정리 안 하니까 매번 똑같은 걸로 시간 낭비..

아래는 지킬 홈페이지 에서 가져온 구조도

이렇게만 보면 사실 뭐가 뭔지 보기 어렵다.

알아두면 좋은 부분들만 추적해서 구조를 파악해보자

_config.yml

yml 파일은 보통 setting을 할 수 있는 파일이며 필자의 테마 버전도 확인할 수 있다!

• remote_theme : "mmistakes/minimal-mistakes@4.24.0"
• 해당 버전을 기준으로 설명합니다

핵심 : # Site Settings, # Site Author, # Site Footer

(1) Site Settings

• locale : 언어
• title : 사이트명과 대표 이름
• logo : 대표 이름 옆에 로고 -> 아래 사진의 BH_Notes 왼쪽 로고

(2) Site Author

• name : 프로필 이름
• avatar : 프로필 사진 -> 아래 사진속 BH Note 그림
• bio : 프로필 소개
• location : 지역명
• links : 하위에 Email, Github 등등 본인 꺼 추가 가능

(3) Site Footer

• 사이트 아래에 별도로 표시하는 Footer 공간

_data 폴더

네비게이션 바 부분을 커스텀 할 수 있고, 네이밍을 위한 변수를 등록한다.

폴더 하위 : navigation.yml, ui-text.yml

navigation.yml

(1) main : 웹사이트 상단 네비게이션 바

• title : 버튼 이름
• url : 보여줄 html -> 예로 아래 /search/ 는 _layouts/search.html 으로 이동

(2) docs : 게시물의 왼쪽 프로필 자리에 위치

• title : 이름
• childeren : 원하는 링크 등록

ui-text.yml

• 버튼 이름 같은 것들을 따로 변수 등록한 파일

예시로 “이전”, “다음” 버튼 명 적용 모습을 보자

• 아래 코드는 _includes/post_pagination.html 이며,
• 게시물 속 하위에 있는 “이전, 다음” 게시물로 이동하는 버튼

_includes 폴더

반복하여 삽입하기 좋은 파일들의 모음집으로 볼 수 있다.

개인적으로 spring-thymeleaf 의 fragment 같은 느낌이었다.

폴더 하위 : archive-single.html, breadcrumbs.html, footer.html, head.html, page__meta.html, post__taxonomy.html, post_pagination.html, scripts.html, nav_list_main

archive-single.html

네비게이션 바의 “Recent Posts” 와 “Category” 페이지와 게시물 하단의 “참고” 부분에 사용된다.

특히, 필자는 사이트 왼쪽에 정리한 카테고리들에 접근 했을 때는 archive-single2.html 로 따로 만들어 사용한다.

(1) Recent Posts, Category 페이지, 참고

(1-1) Recent Posts

(1-2) Category

(1-3) 참고

(1-4) archive-single.html -> archive__item 확인!

(2) 카테고리 중 Knowledge(지식) 페이지

• 이것은 따로 만든 archive-single2.html 를 적용했기 때문에 UI 가 다른 것이다.

breadcrumbs.html

페이지의 네비게이션 부분으로 상단 부분에 “경로” 를 나타낸 부분이며, 아래 사진을 보고 이해하자

• Home/Categories/지식/정보 를 의미

footer.html, head.html

footer.html 은 footer 태그 부분이라고 생각하고 사용하자

head.html 은 head 태그 부분이라고 생각하고 사용하자

• 참고로 본인은 폰트를 그냥 _layouts/default.html 에서 등록하였다.

page__meta.html

archive-single 부분에 있던 날짜 부분을 커스텀 할 수 있다.

• 아래 그림의 2023-12-02 처럼 나오게끔 날짜 부분을 커스텀 진행한 모습이다.

post__taxonomy.html

archive-single 부분에 있던 “카테고리, 태그” 단어들을 커스텀 할 수 있다.

참고로 필자는 “태그” 안 보이게 수정했다.

• Knowledge 부분을 의미하며 실제로 디자인을 커스텀 진행한 모습이다.

post_pagination.html

게시물 내부 하위에 “이전, 다음” 버튼을 커스텀 할 수 있다.

• 참고로 최신 글(Recent Posts) 기준으로 “이전, 다음” 게시물이 책정 되는 것을 확인했고,
• 필자는 이를 카테고리별로 “이전, 다음” 게시물이 책정되게끔 수정했다.
• “참고” 부분은 _layouts/single.html 에서 커스텀! (뒤에서 정리한다)

scripts.html

자바 스크립트 사용하는 부분들은 여기서 커스텀 하자

• 참고로 필자는 mathjax 문법을 사용할 수 있게 이곳을 수정했다.

nav_list_main

웹 사이트의 왼쪽 부분 카테고리 목록은 이 파일로 구성한다고 볼 수 있다.

특히, 카테고리 추가할 때 _pages/categories/ 하위에 md 파일로 카테고리 생성을 같이 해야 한다.

• 아래 그림 참고
• 자세한 설명은 따로..

_layouts

tag, category, archive 및 다양한 페이지 layout 정보들이 담겨 있다.

• 여러 개가 있어서 조금만 소개해보겠다

(1) single.html -> 게시물 하위에 “참고” 부분 커스텀

(2) home.html -> “Recent Posts” 부분 커스텀

• 단, 필자는 archive.html 에서 수정하긴 했다.

(3) archive.html

• 이곳에서 “Recent Posts”를 추가하여 archive__subtitle 을 관리하였다.

(4) default.html -> 필자는 그냥 이곳에 “폰트” 적용

• html 태그 가 들어가므로 가장 첫 페이지로 보면 된다.
• 물론 index.html 의 구조는 아래에 따로 정리했으니 참고하자!

_pages

네비게이션 바 (navigation)에서 로드 가능한 페이지가 저장된다.

• 웹 사이트 상단바 네비게이션 부분
• 카테고리들 생성했던 네비게이션 부분
• 등등..

이부분을 이해하기 위해 한가지 예를 보자!

예시 : 필자가 생성한 _pages/category-archive.md

---
title : "Category"
layout : categories
permalink : /categories/
author_profile : true
sidebar_main : true
---

• layout이 categories로 설정함으로써 실제 _layouts/categories.html 이 실행!
  • 따라서 웹 상단 네비게이션 부분의 Category 가 정상 작동
• categories.html에서는 layout: archive 로 설정되어 있어서 _layouts/archive.html 도 실행!
• archive.html에서는 layout: default 로 설정되어 있어서 _layouts/default.html 도 실행!

_posts

이 경로가 바로 “게시물 작성” 하는 공간이다!

_sass

폰트, 사이즈, 색상 등의 정보가 해당 폴더에 담겨 있다 -> 중요!

필자의 블로그를 보면 “폰트, 사이즈, 색상, 마진” 등이 기존 지킬과 다르므로 이 부분이 중요!

assets

font, css, images (ex:사이트 로고) 등이 담겨 있다.

• asset/css/_main.scss 에서 구글 폰트 @import 할 수 있으므로 참고
• 실제로, 필자의 프로필 로고도 이곳에 저장

index.html

index.html 로 시작되는 것은 어느 웹사이트든 같다고 볼 수 있다.

깃블로그 지킬의 구조는 어떤지 추적해보면 아래와 같은 구조임을 알 수 있다.

index.html -> home.html -> archive.html -> default.html

좀 더 알기 쉽게 그림도 참고하자! -> index, home, archive, default 글자를 참고