Post 방법

본인은 블로그를 사용할 때 github desktop을 설치해두고, 글은 로컬 컴퓨터의 visual studio code에서 작성한다.
왜냐하면 보통 다음과 같은 커맨드를 통해 jekyll 로컬 서버를 열고, 내가 제대로 홈페이지를 관리하고 있는지 확인하기 위해서인데,

bundle exec jekyll serve

이렇게 로컬에서 확인하지 않고 github에 직접 push하고, 이게 실제로 내 깃헙 블로그에 반영될때까지 은근 딜레이가 심하다.
홈페이지 만들고 관리하는 것에 능숙하면 괜찮은데, 본인은 코드 한줄한줄 바꾸는게 어떤 식으로 반영이 되는지 직접 시각적으로 확인해야해서 위의 커맨드를 통해서 서버를 열고,
로컬 서버(127.0.0.1:4000으로 보통 접속)를 계속 새로고침하면서 확인한다.

새로운 포스트 만들기

암튼 깃허브 블로그가 있다는 가정 하에,

_posts
├── 2020-10-10-title1.md
├── 2021-11-11-title2.md
└── 2022-12-12-title3.md

요런 식으로 내부에 .md 파일을 _post 폴더 내부에 만들어줘야한다. 일단 제목이랑 이런거는 예시인데,
(오늘 날짜)-(제목).md로 만들어주면 된다.

아마 대부분 블로그는 jekyll 테마를 통해 만들게 되므로 구조는 크게 다르지 않을 것이다.
본인도 그냥 파일 이것저것 뜯어보면서 커스터마이징 중이다.

포스트 제목이랑 태그 달기

포스트를 새로 만들면 해당 포스트에 제목이랑 태그 등등을 입력해주어야 한다.
아마 jekyll 테마를 가져오면 post에 예시 파일이 있을텐데, 그 중에 아무 md 파일 하나 열어보면 다음과 같이 맨 위에 작성되어 있을 것이다.

---
title: 어쩌구저쩌구
layout: post
description: 예시파일
post-image: 이미지 링크
tags:
- 태그1
- 태그2
- 태그3
---

이 예시는 본인 블로그인데, title은 말 그대로 외부에 보이게 되는 포스트의 제목을 의미하고 layout은 html로 정의된 여러 레이아웃 중 어떤 형식을 사용하는지에 대한 옵션이다.
물론 포스트니까 포스트 옵션을 사용할거고, description은 긴 글을 싫어하는 사람들을 위한 한 줄 요약 정도로 보면 되고, post-image는 해당 포스트를 대표할만한 이미지나 gif 주소를 입력하면 된다.
그리고 태그는 해당 포스트와 관련된 태그들을 달면 되는데, 암튼 이런 형태로 글 맨 위쪽에 구성되어야 한다는 점이고, 세부사항은 각 블로그 테마에 따라 달라질 수 있으니 본인 블로그의 jekyll 테마 예시들을 참고하여 만들어주면 된다.

위의 그림이 바로 요 게시물에 대해 적용된 예시이다.

수식 입력 방법

아마도 대부분 수식 입력이 구현되어있거나, 사용할 수는 있는데 잠시 배제되어있는 경우가 있을 것 같다. 무지성으로 처음에 글을 쓰다보면 노션이나 latex처럼 달러 싸인 붙여서 수식 넣을라했는데, 안들어가는 슬픈 일이 생긴다. ~~왜냐하면 내가 그랬거든~~

config.yml 파일 수정하기

이런 슬픈 일이 있었다면 다음과 같이 따라해주면 된다. 우선 모든 블로그에 있을만한 “_config.yml”을 열어보도록 하자. 이게 없으면 진짜 말이 안된다.

# Math equation
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false

눈씻고 찾아봐서 위와 같은 내용이 없다? 혹은 인자가 다르게 설정되어있다 싶으면 위와 같이 해준다.
중요한 점은 중복이면 오류가 날 수 있으므로 Ctrl+F 눌러서 key value에 없는지 확인하고 복붙해주시길.

mathjax 사용하기 위한 include 파일 만들어주기

그 다음은 실제로 포스트를 작성할 때 수식 문법이 먹힐 수 있게끔 html 스크립트를 설정해주는 것이다.
_includes 안에 다음과 같이 “mathjax_support.html”이라는 파일을 만들어준다.

_includes
├── 어쩌구.html
├── 저쩌구.html
└── mathjax_support.html

거기다가 아래 코드를 복붙해서 넣고 저장

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        TeX: {
          equationNumbers: {
            autoNumber: "AMS"
          }
        },
        tex2jax: {
        inlineMath: [ ['$', '$'] ],
        displayMath: [ ['\[', '\]'] ],
        processEscapes: true,
      }
    });
    MathJax.Hub.Register.MessageHook("Math Processing Error",function (message) {
          alert("Math Processing Error: "+message[1]);
        });
    MathJax.Hub.Register.MessageHook("TeX Jax - parse error",function (message) {
          alert("Math Processing Error: "+message[1]);
        });
</script>
<script type="text/javascript" async
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

여기서 inlineMath라고 나와있는 건 다음과 같은 수식이고 글을 쓸 때 텍스트 중간에 수식을 넣고 싶을 때 쓰면 된다. 예를 들어

    함수 $y = f(x)$를 정의한다.

라고 글 중간에 쓴다면 이는

함수 $y = f(x)$를 정의한다.

가 되는 것이다. displayMath는 수식이랑 글을 분리해서, 보다 수식을 강조할 때 많이 쓴다. 예를 들어

    함수
    \[y = f(x)\]
    를 정의한다.

라고 글 중간에 쓴다면 이는

함수 [y = f(x)] 를 정의한다.

처럼 나타난다. 수식이 글 중앙으로 움직인 것을 확인할 수 있다.
암튼 이렇게 mathjax html 파일을 만들어주었다면 다음 step으로 넘어가도록 하자.

mathjax_support.html을 레이아웃에 포함시키기

앞서 생성한 mathjax_support.html을 그냥 만들면 거기서 끝나고,
이제 실제로 해당 문법을 사용할 레이아웃에 include를 시켜줘야한다.
일종의 import나 include 전처리와 비슷한 것, 모듈을 만들어놓고 레이아웃에 포함을 안시키면 말짱 도루묵이지 않은가..
사실 이거 include 시키는 법은 엄청 다양해서 한 가지 방법만으로는 설명하기 좀 뭐하다. 일단 다음과 같이 _layouts 파일들 내에서 post를 담당하는 녀석을 찾아보자.
본인 같은 경우에는 post.html이 해당된다.

_layouts
├── 어쩌구.html
├── 저쩌구.html
├── default.html
└── post.html

여기서 post.html의 내용을 보면 맨 위부분이 다음과 같이 구성되어있는데,

html을 잘 모르는 사람들을 위해 간단하게 언급하자면, <>, </>처럼 꺾쇠 사이에 있는 것이 해당 레이아웃에서의 블록을 의미하고,
각각의 꺾쇠 사이에 {$\%$ include}로 표시된 것이 해당 html 파일에서의 내용을 가져오겠다는 의미가 된다. 그리고 포함이 된 head.html이

이 친구이다.

그래서 사실 그냥 post.html에다가 다음과 같이 mathjax를 include 해줘도 되고(if page.use_math는 뒤에서 따로 설명하겠다),

그게 아니라면 include해오는 head.html에 추가된 내용을 기입해주면 된다. 정말 단순하게 해석하면, 페이지에서 use_math가 true라면 우리가 앞에서 정의한 mathjax 파일을 불러오라는 소리.

수식을 사용해보자

할 일은 여기서 끝이다. 아까 각 포스트의 앞에 써주던 key value 값을 다시 remind 해보자.

---
title: 어쩌구저쩌구
layout: post
description: 예시파일
post-image: 이미지 링크
tags:
- 태그1
- 태그2
- 태그3
---

여기서 추가로 다음과 같은 태그를 넣어주면 된다(use_math: true).

---
title: 어쩌구저쩌구
layout: post
description: 예시파일
use_math: true
post-image: 이미지 링크
tags:
- 태그1
- 태그2
- 태그3
---

아까 앞서 if page.use_math를 설명 안했었는데, 바로 해당 내용이 page의 use_math 항목이 true라면 mathjax를 사용하겠다는 코드이다.
따라서 이제 만약 본인이 수식을 쓰고 싶은 markdown post 앞에는 위와 같이 use_math 항목을 true로 정의해주면 수식 입력이 가능해진다.

다양한 수식 적용

인라인 수학 공식은 다음과 같이 자유롭게 넣을 수 있다.

Cross entropy loss 식은 $-\frac{1}{n}\sum_{i=1}^n \sum_{c=1}^C L_{ic} \log (P_ic)$로 표현 가능하다. 여기서 $n$은 데이터의 갯수를 의미하며 $C$는 범주의 갯수, 그리고 $L$은 실제 값으로 주로 $0$ 또는 $1$이며 마지막으로 $P$는 실제 값에 대한 확률 값으로 $0 \sim 1$의 value를 가진다.

Cross entropy loss 식은 $-\frac{1}{n}\sum_{i=1}^n \sum_{c=1}^C L_{ic} \log (P_ic)$로 표현 가능하다. 여기서 $n$은 데이터의 갯수를 의미하며 $C$는 범주의 갯수, 그리고 $L$은 실제 값으로 주로 $0$ 또는 $1$이며 마지막으로 $P$는 실제 값에 대한 확률 값으로 $0 \sim 1$의 value를 가진다.

수학 공식 블록은 다음과 같이 자유롭게 넣을 수 있다. 주의할 점은 엥간한 latex 문법은 다 먹히는데 줄바꿈 할 때 “\\“는 잘 안먹히고 “\newline” 사용하는 걸 추천한다. 그리고 대괄호는 무슨 일인지 사용이 안되는 듯하다.

\[
    \begin{aligned}
        L(G,F,D_X, D_Y) =& L_{GAN}(G, D_Y, X, Y) \newline
        +& L_{GAN}(F, D_X, Y, X) \newline
        +& \lambda L_{cyc}(G, F)
    \end{aligned}
\]

[ \begin{aligned} L(G,F,D_X, D_Y) =& L_{GAN}(G, D_Y, X, Y) \newline +& L_{GAN}(F, D_X, Y, X) \newline +& \lambda L_{cyc}(G, F) \end{aligned} ]

github.io에 마크다운 작성 및 수식 입력하기