Jekyll 구축관련

Github Blog 용 메모

자주사용 커맨드

$bundle exec jekyll serve

$git add --all

$git commit -m "Init"

$git push

자주 사용하는 사이트

http://127.0.0.1:4000

https://mmistakes.github.io/minimal-mistakes/docs

마크다운 문법

특수 마크업

Tip

<br/> 는 강제 줄바꿈이 아니라서 레이아웃 설정이 그대로 됨

유튜브 링크

<iframe width="560" height="315" src="https://www.youtube.com/embed/[?v=뒤링크]" frameborder="0" allowfullscreen></iframe>

Color Code

{\% highlight [c++, ruby ...] %\}
...
{\% endhighlight %\}

위에서 백슬래스 빼고 코드타입(c++, ruby ..) 정해서 하면 됨.

Mermaid

스크립트 추가할 필요가 있음. 문서 아래 위 코드를 _includes/head/custom.html 에 추가하면 됨.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>

대강의 사용법은 아래와 같음

<div class="mermaid">
flowchart LR
    A --> B --> C:::common --> D 
    classDef common fill:#000,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5;
    class A,B,D common;

    id1(Start)-->id2(Stop)
    style id1 fill:#000,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    style id2 fill:#000,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
</div>

flowchart LR A --> B --> C:::common --> D classDef common fill:#000,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5; class A,B,D common; id1(Start)-->id2(Stop) style id1 fill:#000,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 style id2 fill:#000,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

수식(mathjax)

세팅

문법

단 Include 용인 mathjax_support.html 에 붙여넣는 js 코드인

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

를 이걸로 바꿔야 현재버전을 쓸 수 있음.

mathjax 가 ver.2 가 있고 ver.3 이 있고 지속적으로 업뎃을 하기 때문임.

ver.3 에서 $...$ 로 한줄 안되는 것에 주의

front matter 에 use_math: true 추가.

• 인라인, 디스플레이
  
  

  인라인으로 적는건 \\(  f(x) = x^2    \\) 이렇게 되네.
  인라인으로 적는건 $$  f(x) = x^2    $$ 이거도 되네 되네.
  처음에 $$ 로 시작하는 디스플레이는 한줄을 차지하네
  $$ f(x) = x^2 $$
  

  인라인으로 적는건 \( f(x) = x^2 \) 이렇게 되네.
  인라인으로 적는건 \(f(x) = x^2\) 이거도 되네 되네.
  처음에 $$ 로 시작하는 디스플레이는 한줄을 차지하네
  \(f(x) = x^2\)

여러줄

$$\begin{multline} 
{}_n \mathrm{ C }_k =  \frac{n!}{k! (n-k)!}  \\ \\ \shoveleft
\frac{n!}{k! (n-k)!}  = \frac{(n-1)! \times n}{k! (n-1-k)! \times (n-k)}  \\ \\ \shoveleft
\shoveleft = \frac{(n-1)! \times n}{k! (n-1-k)! \times (n-k)}  \\ \\ \shoveleft
\end{multline}$$

\(\begin{multline} {}_n \mathrm{ C }_k = \frac{n!}{k! (n-k)!} \\ \\ \shoveleft \frac{n!}{k! (n-k)!} = \frac{(n-1)! \times n}{k! (n-1-k)! \times (n-k)} \\ \\ \shoveleft \shoveleft = \frac{(n-1)! \times n}{k! (n-1-k)! \times (n-k)} \\ \\ \shoveleft \end{multline}\)

Front Matter

---
header:
teaser: "/assets/images/iruru.jpg"
---

이런식으로 md 파일 맨 앞에 작성하면 알아서 처리해주는 Jekyll 특수 기능

config.yml 이 default 값이라면 이건 각 문서당 적용되는 값

Github Blog Build 방법

사전준비

1. Ruby Install $gem install jekyll bundler
2. Create Repository - [githubName].github.io
3. Clone to local folder

구축

1. go to my local repository

2. $Jekyll new ./ (this is my local repository folder)

3. $bundle add webrick // 뭐가 없다고 하면 webrick 에서 딴거로 하면 됨

4. $bundle install

5. $bundle exec jekyll serve ( local server & build )

6. $git add --all 
   $git commit -m "Init" 
   $git push
   

7. Theme 찾기

   https://jamstackthemes.dev

   https://jekyllthemes.org

   https://jekyllthemes.io

   https://jekyll-themes.com

   https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide

   위 등에서 찾아서 다운해서 git 등에서 zip 받아서 내용 복붙 후

   $bundle install

8. gitignore 에 다음 추가

9. 구글 검색 등록 관련
   • sitemap 에러 (https://support.google.com/webmasters/thread/128630116/google-search-console-says-sitemap-is-unsupported-file-format?hl=en&msgid=128683398)

Github Blog 만들 시 에러

• jekyll serve 시 require’: cannot load such file – webrick (LoadError) 오류 => bundle add webrick

---

ToRead

• Minimal Mistake Site

jekyll-docs

jekyll-talk

---