[Github Blog] 블로그 커스터마이징하기

안녕하세요, 방문자 여러분! 허니테크입니다. 😊😊 이번 게시물에서 깃헙 블로그의 많은 코드들이 어떤 기능을 하는지 알려드리고자합니다. 여러분이 자신에게 가장 최적화된 블로그를 만들려면 단순히 제가 알려준 방법을 따라하는게 아니라 해당 코드에 대한 이해가 필요하다고 생각했습니다.

사실 저도 정확하게 모든 코드를 이해하는것도 아니고 웹 언어를 따로 공부한게 아니라 부족한 부분이 많습니다. 경험적으로 제가 하나하나 코드를 뜯어보고 실험해보며 얻은 정보이니 잘못된 부분이 있다면 양해해주세요~!

디렉터리 구조 확인하기.

Blog 첫번째 게시물에서 설명하였듯 저희의 깃헙 블로그는 Jekyll라는 정적 웹사이트 생성기를 사용합니다. 이미 다른 사용자들이 구성한 template을 이용하는 것인데 그 중에서도 Minimal-Mistakes 테마를 사용하고 있습니다. 이 테마는 사용자 편리하게 여러 코드를 용도에 맞게 분류하여 구성하였습니다.

minimal-mistakes
├── 📁_data                      # 블로그 구조 및 테마 관리를 위한 파일
├── 📁_includes                  # 블로그 속 정보 및 내용 관리
├── 📁_layouts                   # 블로그 디자인을 위한 파일 (구조)
├── 📁_pages                     # 카테고리 속 폴더 관리
├── 📁_posts                     # 블로그 게시물 파일
├── 📁_sass                      # 블로그 디자인을 위한 파일 (폰트, 색, 크기)
├── 📁assets                     # 블로그에 필요한 자료 저장(이미지, 영상 등)
└── 📝_config.yml                # 블로그 정보 관리 (경로, 사용자 정의)

root 폴더에서 제가 사용한 폴더와 파일만을 작성해두었습니다. 우선 위에 작성한 폴더 및 파일들만 잘 이해한다면 여러분이 원하는 블로그를 만드는데 충분 할거라 생각합니다.😛😛

코드 이해하기.

이제부터 각 폴더 및 파일들의 용도와 중요한 코드에 관련하여 간단하게 분석하겠습니다. 모든 코드를 하나하나 분석하는데는 어려움이 있으니 우선은 각 파일에 대한 용도를 이해하시고 제 깃헙 블로그 레파지토리의 히스토리를 확인하며 커스터마이징 하시면 될 것 같습니다.

허니테크 블로그 레파지토리 링크

📁_data

_data 폴더는 블로그 내의 페이지 그리고 블로그 이용에 필요한 여러 버튼 문구 등을 관리하는 파일 들이 있는 폴더입니다. navigation.yml은 블로그 우측 상단의 HOME, Categories, About 등의 하이퍼링크를 설정합니다. ui-text.yml은 각 언어별 블로그에서 사용되는 문구를 관리합니다. 예를 들어 ‘이전, 다음, 페이지가 존재하지 않습니다’ 등의 블로그 안내(?)와 같은 문구를 사용자가 설정할 수 있습니다.

📁_data 
├── 📝navigation.yml
└── 📝ui-text.yml

📁_includes

_includes 폴더는 블로그 구성에 필요한 컴포넌트를 모아둔 폴더라고 생각하면 됩니다. 제가 이해한 바로는 블로그의 여러 기능들 그리고 형태에 필요한 코드들을 쌓아둔 폴더라고 생각하면 됩니다. 주로 사용하는 코드 파일 및 폴더는 ‘footer’, ‘head’ 그리고 ‘nav_list_main’입니다.

• ‘footer’폴더 속 costom.html은 블로그의 최하단을 관리하는 코드 파일입니다. 많은 유저들이 광고 혹은 이미지를 넣는데 사용하는 것 같습니다.

• ‘head’폴더 속 costom.html은 파비콘을 설정하는 코드입니다. 파비콘은 아래 사진과 같이 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다. 설정 방법은 나중에 따로 게시물을 만들 예정입니다.

• nav_list_main 파일은 블로그 운영에서 가장 많이 사용하는 코드 파일 중 하나입니다. 이 코드를 통해서 카테고리를 생성하고 관리할 수 있습니다. 카테고리 생성 방법도 글 작성 방법과 함께 게시물을 만들 예정입니다.

📁_includes
├── 📁footer
├── 📁head
└── 📝navigation.yml

더 많은 파일 및 폴더가 있지만 사용하는 것만 올렸습니다. 이후에 사용하게 된게 있다면 바로 업로드 하겠습니다😀

📁_layouts

layouts 폴더는 블로그 구조를 커스터마이징하는 폴더라고 생각하면 됩니다. 폴더 속 파일들의 이름은 이해하기 쉽게 각 페이지의 이름을 딴 html파일 들이 있습니다. 각 코드 파일을 통해 블로그 페이지의 레이아웃을 설정할 수 있습니다. 스크롤바 모양, 화면 간격 (wide 설정시 토글이 위로 올라감. 대신 화면을 넓게 쓸 수 있음) 등.

📁_includes
├── 📝default.html
├── 📝home.html
└── 📝single.html

📁_pages

블로그 페이지를 관리하는 폴더입니다. 깃헙 블로그는 정확하게 말하면 Git Pages로 정적 웹 사이트입니다. 따라서 블로그 자체는 여러 웹 언어가 서로 이어진 형태이며 메인 홈 화면에서 각 페이지 (Categories, about, tags, 각 게시글)로 이동을 하며 사용한다고 생각하면 됩니다.

• categories 폴더는 사용자가 필요한 카테고리에 대한 코드를 만드는 공간입니다. 이후 글 작성 방법에 관한 게시글에 더 자세하게 설명드리겠습니다.

• about 파일은 about 페이지에 들어갈 내용을 작성하는 파일입니다.

📁_pages
├── 📁categories
└── 📝about.md

📁_posts

_posts 폴더는 여러분이 작성한 게시물, 마크다운 파일이 들어갈 폴더입니다. pages 폴더 속 categories 폴더에 들어간 설정 코드에 맞게 폴더 만든 후 게시물 마크다운 파일을 저장하면 됩니다. 이것 또한 글 작성 방법에 관한 게시글에서 자세히 설명하겠습니다.

📁_sass

_sass 폴더는 블로그의 전반적인 디자인을 관리하는 코드로 구성된 파일입니다. 주로 블로그 구성품의 색, 폰트, 테마 등을 설정할 수 있습니다.

• minimal-mistakes 폴더는 깃헙 블로그 테마에 관련한 코드가 있습니다. 해당 폴더에 있는 파일들로 커스터마이징을 하세요.

• skins 폴더는 깃헙 블로그 스킨 즉 디자인 종류를 설정해둔 파일들로 구성되어있습니다. 각 스킨별로 색상 테마가 설정되어 있는데요. 저는 따로 스킨을 만들었습니다. 이렇게 설정한 스킨은 root 폴더에 있는 _config 파일 속 theme 코드에서 사용됩니다. 히스토리로 확인해보세요.

• _archive.scss 파일에서는 블로그 기본 폰트의 색상과 크기를 바꿀 수 있습니다.

• _navigation.scss 파일에서는 사이드바의 색상에 대해 수정하였습니다.

• _sidebar 파일에서는 블로그 사용자란에 대한 커스터마이징을 수행할 수 있습니다.

📁_sass
└── 📁minimal-mistakes
    ├── 📁skins
    ├── 📝_archive.scss
    ├── 📝_navigation.scss
    ├── 📝_page.scss
    └── 📝_sidebar.scss

블로그를 디자인하며 가장 어렵고 많은 실험을 했던 곳이 sass 폴더 속 코드들입니다. 어떤 코드가 어떤 부분을 바꾸는지, 그리고 어떤 색과 폰트 크기가 나에게 적합한지 확인하는 작업이 꼭 필요한 것 같습니다. 제가 간략하게 작성하긴 했지만 블로그 디자인에 욕심이 있는 사용자들은 꼭 제 히스토리를 확인하며 블로그 커스터마이징 하세요~!

📁_assets

assets 폴더는 블로그 구성에 필요한 자료들을 모아둔 폴더입니다. 블로그 프로필 사진, 파비콘 이미지 파일 등을 저장합니다. 이후 사용할 땐 해당 경로를 입력합니다.

📝_config.yml

깃헙 블로그의 메인 코드 파일이라 생각할 정도로 중요한 코드가 잔득 담긴 코드파일입니다. 해당 코드 파일에서 테마 세팅, 사이트 정보 설정, 코멘트 사용 여부, og 이미지 설정, 블로그 주인 정보 입력 등을 입력합니다.

워낙 중요한 파일이다보니 제가 초기 파일을 만들때 각주를 달아두었습니다. 해당 코드 파일을 열어보면 필요한 코드 옆엔 제가 설명글을 작성해두었습니다. 설명글을 참고하며 _config.yml 파일을 완성해주세요.

---

블로그 생성과 커스터마이징에 필요한 코드들에 대한 설명을 마쳤습니다. 참 쉽죠?! 라고 말하기엔 사실 깃헙 블로그는 많이 복잡합니다. 다른 플랫폼에서 제공하는 블로그와 달리 한땀한땀 본인이 만들어야 하니까요.

당부드릴 것은 이 게시글은 제가 제공한 블로그 초기 파일 속 코드들의 용도를 파악하는 것입니다. 여러분이 블로그에 대한 아이디어가 떠올랐을 때 어떤 코드를 고쳐야 하는지 알아내고 제 블로그 레파지토리 히스토리를 확인하고 하나씩 고쳐나가야 합니다.

분명 그 작업이 힘들겠지만 아마 즐거움과 뿌듯함을 느끼는 분들이 계실거에요. 전 그런 분들은 앞으로도 블로그를 잘 운영하고 저보다 훨씬 멋진 블로그를 만들거라 자신있게 말 할 수 있을 것 같습니다!!! 🤩🤩🤩

마지막으로 ,, 제 블로그를 읽으실지 모르지만 ,,, 제 블로그 스승님 식빵맘님께 무한한 감사드립니다!!

Blog 카테고리 내 다른 글 보러가기