[Blog] 깃헙 블로그에 포스팅하기

검색해보니 깃헙 블로그에 글을 올리기 위한 다양한 방법과,
마크다운 형식의 문서 작성을 편리하게 하는 에디터 들이 있었다.
이것 저것 시도해봤는데 나는 VScode를 사용하는게 가장 심플하게 느껴졌다.

1. 포스팅을 위해서는 _posts 디렉토리가 필요하다.

먼저 블로그 저장소에 _posts 디렉토리를 생성 해야한다. 방법은 여러가지가 있겠지만, 내가 시도해본건 두가지이다.

[repository에서 파일 직접 생성하기]

Add file > Create new file 을 누른다

_posts 입력 후 슬래시(/)를 누르면 디렉토리를 생성 후 파일을 만들 수 있다.
(posts! s를 빼먹지 말자)
파일 이름은 ‘YYYY-MMM-DD-post-title.md’ 로 설정하면 된다.

[로컬에서 폴더와 파일을 만들어 업로드하기]

원하는 로컬 경로에 _posts 폴더를 만들고, 그 안에 ‘YYYY-MMM-DD-post-title.md’ 이름의 파일을 생성한다.

Add file > Upload files 을 누른다

_posts 폴더를 드래그앤 드랍하면 경로생성 후 파일이 업로드 된다.

2. 포스팅의 옵션을 설정하기

머릿말을 통해 아래와 같은 옵션을 설정할 수 있다.
이 외에도 여러 설정들이 있다고 한다.

---
title: "글의 제목"
<!-- 제목을 지정해주지 않으면 파일의 제목이 title로 설정된다. -->
excerpt: "블로그 홈의 포스팅 리스트에 미리보기로 보여질 설명글"

categories:
  - 카테고리명
tags:
  - [태그, 키워드, 여러개]

toc: false
<!-- 글 오른쪽에 목차를 사용할지 설정 -->
toc_sticky: false
<!-- 목차를 스크롤해도 항상 따라다니게 할 것 인지 설정 -->

date: 2022-08-04
<!-- 글을 처음 작성한 날짜 -->
last_modified_at: 2022-08-04
<!-- 글을 수정한 날짜 -->
---

## 아래로 포스팅 내용 작성

3. 포스팅 내용을 마크다운 문법으로 작성하기

마크다운 문법으로 글을 작성해준다.
VScode에서 편리한 마크다운 작성을 위해 extension도 설치했다.

Markdown Preview Github Styling (마크다운 미리보기가 깃헙 스타일로 보여진다)

Markdown All in One (마크다운 작성 시 단축키를 사용할 수 있다)

4. 작성한 글을 repository에 업로드하고, 블로그에 올라온 글을 확인한다.

repo를 클론 받아온 후 VScode에서 바로 git push 할 수도 있지만,
여러 환경에서 왔다갔다하며 글을 쓰는 나는 매번 여러 환경에서 변동사항을 pulling해주는게 귀찮아서
md파일을 별도로 작성해 글을 쓰고, 깃헙에 직업 파일을 업로드하는 방식으로 하고 있다.

블로그에 올라온 글 확인하기

---

[TIP] 간단하게 이미지 추가하기

아무 저장소에서 issue를 생성한다. (블로그 repo는 fork해온거라 이슈생성이 안됨)

이미지를 드래그앤드롭하면 마크다운용 이미지 코드가 생성된다. 그걸 그대로 글에 복붙하면 끝! (이슈생성은 안해도 됨)

[TIP] 이미지에 캡션 달기

![](path_to_image)
_image_caption_

이렇게 캡션 텍스트를 처리해놓고 캡션 텍스트 디자인을 좀 캡션답게 다듬어주기 위한 코드를 추가한다.

img {
  margin-bottom: 8px;
}
img + em {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: #91939c;
}

위 css코드를 _sass/minimal-mistakes/_base.scss에 추가해준다.

캡션 적용이 완료되었다.