[Github Blog] 블로그 게시물 작성방법

Date: 2021.12.28 Updated: 2022.01.08

카테고리: Blog

안녕하세요, 방문자 여러분. 허니테크입니다. 😊😊 이번 게시물은 깃헙 블로그에 게시물을 업로드 하고 카테고리 관리를 하는 방법을 알려드리고자합니다.

이번 게시물을 이용한다는 건 여러분만의 멋진 블로그를 만들었다는 뜻이기에 정말 뿌듯한 마음이 듭니다. 외관을 잘 꾸몄다면 이제부터는 그에 맞는 내용들을 채워 넣어야겠죠?

어렵지 않으니 잘 따라오시기 바랍니다~😁😁

블로그 포스팅

우리가 만들고 있는 블로그는 깃헙 페이지에서 jekyll / Minimal-Mistakes 테마 입니다. 이에 모든 코드는 일정한 형식이 존재합니다. 게시물 또한 그 일정한 형식을 맞추어 작성하고 등록해야하는데요. 크게 카테고리와 게시물로 형식을 나누어 설명드리고자 합니다!

카테고리 페이지 만들기.

카테고리, 동일한 성질을 가진 부류나 범위. 우리의 경우에는 같은 결의 게시물들을 묶어 놓은 개념이라 즉 폴더라고 생각하면 편합니다. (다른 블로그 플랫폼은 당연히 있는 기능이고 익숙하기 때문에 ,, 굳이 설명할 필요가 있나 싶긴 하네요.😥)

깃헙 블로그에서는 따로 코드로 설정하지 않는다면 시간 순서로만 게시물이 등록됩니다. 나중에 게시물들을 찾기 쉽고 깔끔하게 분류하여 블로그를 꾸미기 위해서는 필수적인 기능이겠죠?!

카테고리 정보 만들기.

Root # 맨 처음 폴더
└── 📁_pages                     
    └── 📁_categories              

pages 폴더 속 categories 폴더는 카테고리 정보에 대한 코드가 들어갈 폴더입니다. 제가 만들어놓은 초기 코드에도 제가 연습을 위해 미리 카테고리 정보 코드를 남겨두었습니다.

마크다운 파일인데요. 코드를 살펴보면 아래와 같습니다.

앞으로 만들 카테고리 정보 코드는 위와 같이 모두 동일한 형식을 지켜 코딩하시면 됩니다!

예시 화면

title란은 카테고리 페이지의 제목이라 생각하면 됩니다.

permalink는 카테고리 링크에 대한 코드인데 밑에 형광색으로 칠한 부분만 카테고리명으로 고쳐주세요. 예를 들면 categories/blog를 categories/카테고리명 으로요. 영어의 경우 소문자로 입력해야 오류가 나지 않아요.

해당 부분 또한 카테고리명으로 바꾸되 영어인 경우 첫글자는 대문자로 해주세요.

나머지 코드는 절대 건들지 마시고, 정해져있는 형식을 잘 지켜주셔야합니다!

위 처럼 코드를 잘 짰다면 category-카테고리명.md 이름으로 코드를 _pages/categories 폴더에 저장해주세요. 그럼 끝입니다!

여러분이 만든 카테고리 코드를 활용하여 게시물에 카테고리 정보를 입력하면 블로그 카테고리 페이지에 카테고리 별로 정리가 되어 게시물의 개수, 목록이 만들어질 겁니다!

사이드 바 카테고리 설정하기.

카테고리 페이지에만 게시물을 분류하는 것만으로 만족할 수 있지만 저희 블로그에는 카테고리를 표시한 사이드 바가 있습니다!

블로그 홈에서 바로 카테고리 목록을 확인할 수 있는 기능을 추가해두었는데요. 이 부분도 저희가 직접 코드를 입력해야 만들어둔 카테고리 정보를 넣을 수 있습니다.

사이드 바 관련 코드 이해하기.

Root 
└── 📁_includes                    
    └── 📝nav_list_main # 잘 찾아보세요.              

해당 코드 파일은 사이드 바에 들어갈 정보가 들어있습니다.

사진 속에서 형광으로 표시해둔 부분이 하나의 카테고리 묶음의 코드 블록입니다. 웹 언어를 공부하신분들은 금방 이해할 수 있을 건데요. 이해가 안되는 분들도 코드를 하나하나 뜯어보면 전체 구조와 코드의 역할을 이해할 수 있을 거에요.

사이드 바 관련 코드 해석.

하나하나 뜯어볼게요!

<li>, </li>가 블록의 시작과 끝이라 생각하면 됩니다. 띄어쓰기를 잘 구분하여 입력해주셔야해요!
11번째 줄을 보시면 <span class=”nav__sub-title”>etc</span> 코드가 있고 제가 강조해둔 etc가 카테고리 묶음의 제목입니다. 해당 부분을 여러분이 원하는 이름으로 바꾸면 될거에요.
<ul>, </ul>은 카테고리 1개에 대한 코드입니다. 여기에 이전에 작성한 카테고리 정보 코드에 관해 입력하면 됩니다.

형광으로 강조한 부분 중 1번은 제가 대문자로 입력하라 했던 카테고리 정보를 입력하면 됩니다! (꼭 그대로 입력해야함), 2번은 permalink란에 작성한 카테고리 이름을 입력합니다. 3번째는 해당 카테고리 표시 이름입니다.

자신만의 사이드바 카테고리 만들기.

위에서 분석한 사이드 바 카테고리 코드를 이해했다면 그 형식 그대로 자신이 원하는 카테고리를 만들면 됩니다. 저는 매번 해당 코드를 일일이 입력하지 않고 이전에 만들어둔 코드 블록을 그대로 복붙하고 형광색 부분만 제가 원하는 대로 고쳐서 씁니다. 여러분도 그렇게 하시라고 제가 예시 파일을 만들어 둔거구요!

혹시라도 이해가 잘 안되신다면 허니테크 사이드 바 코드를 참고하여 작성해보세요!

게시물 작성하기.

게시물 작성 시에도 일정한 형식을 따라야합니다. 게시물 내용은 여러분이 담고 싶은 내용을 자유롭게 작성하면 됩니다! 하지만 그 밖에 파일 확장자, 파일 이름, 상단의 게시물 정보 코드 등은 제가 알려드리는 형식에 맞춰 작성해야합니다.

파일 확장자는 마크다운.

깃헙 블로그에 포스팅 되는 모든 게시물의 확장자는 마크다운입니다. fastai를 사용한다면 주피터 노트북을 자동으로 마크다운으로 변환하여 서버에 올려주지만, 지킬의 경우 마크다운만 서버에 올라갈 수 있습니다.

따라서 여러분도 깃헙 블로그를 이용하기 위해서는 마크다운을 익숙하게 사용할 수 있어야합니다. 우선은 마크다운 에디터를 잘 골라 사용해야겠죠? 저의 경우는 Visual Studio Code 에디터를 선택했습니다. 마크다운 뿐만 아니라 깃헙 블로그 코드들을 다룰 때 여러 확장자를 지원해주니까 편하더라구요. 그리고 마크다운 문법을 익혀야 합니다. 한글을 쓰는 것은 워드를 작성하듯 작성하면 되지만 글 표현 법(제목, 강조, 밑줄 등), 기호, 수학 공식, 코드 등을 위한 문법들을 익혀야 합니다. 간단하니까 구글링을 해서 익히시거나 이후 제가 만들 게시물을 참고하시면 될 것 같아요.

파일 위치.

Root 
└── 📁_post                                

깃헙 블로그 코드들이 담긴 레파지토리의 _post폴더에 저장합니다. 저는 파일들을 잘 구분 할 수 있도록 카테고리 별로 폴더를 생성하여 해당 게시물을 저장합니다.

반드시 post 폴더에 게시물 파일이 업로드 되어야 합니다!

파일 이름.

파일 이름은 반드시 yyyy-mm-dd-title.md 형식으로 저장합니다.

예시) 2022-01-08-practice post.md

게시물 정보 코드를 입력합니다.

게시물을 만들기 위해 마크다운 파일을 만들었다면 내용을 작성하기 전 상단에 아래와 같은 코드를 입력합니다.

---
title:  "[Github Blog] 블로그 게시물 작성방법" 
excerpt: "깃헙 블로그는 무엇이고 왜 쓰는 걸까?"

categories:
  - Blog
tags:
  - [Blog, Github]

toc: true
toc_sticky: true
 
date: 2021-12-28
last_modified_at: 2022-01-08

---

위의 코드는 게시물 정보에 관한 예시 코드입니다. 이번 게시물의 정보를 그대로 가지고 왔습니다.

title : “” 안에 게시물의 제목을 입력합니다.
excerpt : “” 안에 게시물의 부제 혹은 설명을 간략하게 입력합니다.
categories : 위에 작성한 형식에 맞춰 게시물이 속한 카테고리 명을 입력합니다. (꼭 첫 문자는 대문자로)
tags : 이 글의 태그를 붙입니다. 태그는 자유롭게 작성하세요.
date : 게시물을 작성한 날짜를 입력하세요. 게시물이 쌓이는 순서가 됩니다.
last_modified_at : 수정한 날짜를 입력하세요.

반드시 위 형식에 맞춰서 입력을 해줘야만 게시물이 깃헙 블로그에 업로드 됩니다!

이렇게 게시글 정보를 입력한 뒤 바로 게시물의 내용을 입력하면 됩니다!

지금까지 깃헙 블로그 게시물 작성방법을 알려드렸습니다! 설명드린대로 따라하신다면 큰 문제 없이 원하는 카테고리에 게시물이 잘 업로드 된 것을 확인 할 수 있습니다. 다만, 카테고리를 만드는 부분은 헷갈릴 수 있어요. 이 부분은 사실 경험이 중요하다고 생각해요. 모르는게 있다면 여쭤보시고 제 깃헙 히스토리를 보며 반복하다보면 익숙하게 만들 수 있을 것이라 생각합니다!

짧은 소감

마지막으로 ,, 감개무량합니다. 21년 9월 포트폴리오를 위해 X고생하며 블로그를 만들며 다짐했습니다. 내가 아는 사람들에게 꼭 노하우를 전수하여 덜 고생시켜야겠다. 그런 굳은 의지로 Blog 게시물을 포스팅했는데 ,, 삶에 치여 이제야 계획했던 블로그 게시물을 완성하게 됐네요. 큰 숙제를 마친 것 같아요~~

앞으로도 깃헙 블로그 운영에 도움이 될만한 정보는 조금씩 포스팅을 하겠지만 반드시 필요한 내용은 모두 작성했습니다!! 방문자 여러분의 멋진 블로그를 응원합니다! 모두 화이팅해서 원하는 목적 모두 이루길 바랍니다! 😁😁😁

꿈 양봉자🍯