20201231_GitHubPage(Github Page +Jekyll)

Markdown 문법 : 텍스트에 양식을 입히는 마크업 언어의 일종, HTML과 연동이 가능

 그냥 텍스트는 연동시 따라오지 않음 그래서 마크다운 문법이 좋음    

(협업 툴 노션에서도 사용 가능 함)

 

1. VScode에 익스텐션 탭에서 markdown preview enhanced -> install

 - markdwon.md 파일 생성 하고 우측 위에 preview markdown 누르면 preview가 뜸

 

2. # -> Header 제목을 의미 총 H4까지 있음 (5개 이상은 안씀 주로, 본문과 크기가 같아져서)

3. *내용* , _내용_ -> italic 기울임체

4. **내용** -> bold 두껍게

5. **_내용_** -> 두껍게 기울임체

6. ~~내용~~ -> 글 위에 줄

7.  > 내용 -> 인용문

8. - or * -> list 불릿

9. 1. 2. 3.은 붙여서 쓰면 num list가 생김

10. |제목|description|비고|              -> 표  (i 대문자 아님 shift + \ -> | 임)

     |-|-|-|

     |안녕|1|2|

     |할로|3|4|

    

11. --- : 구분선

12. [링크이름](링크naver.com)

 아니면 html로 <a href="naver.com">링크이름</a> 

 

13.  -> 이미지 , 잘못된 링크면 이미지 이름으로 엑박?

중요한건 작성하는 파일과 같이 있어야 함, 아니면 따로 경로를 따줘야 함

보통 중앙 정렬, 와이드로 설정 됨 맘에 안들면 따로 지정해 줘야 함

<img src="/경로/이미지.jpg" width="" height=""> 로 하고 숫자는 단위가 1픽셀인거 같음

 

기술 블로그 사용시 코드와 수식을 가장 많이 씀

14. `코드` (1옆에 `)

15. ``` (3개) python (해당 문법 이름 붙이기) 

    코드 

     ```(3개)

보통 결과는 shell로

16. 코드 스샷은 carbon 사이트 툴을 이용해서

17. $a+b=c$ , $$수식$$ ($두개는 가운데 정렬임)-> 수식 편집기로 워드에 쓰는 것 처럼 이쁘게 나옴

18. ```mermaid     --> 다이어 그램

    graph LR

       1-->2

     ```

 

- TIL (Today I Learned) 오늘 배운 것

- Jekyll Blog :블로그를 깃헙으로 관리하기

  Ruby 베이스지만 Ruby 몰라도 됨 , 개인적으로 블로그 관리는 CLI를 추천

1. Theme Repo Clone / Fork   (개발하기 보단 이미 잘 되어있는 레포가 많기에 클론하자)

2. jekyll 구조 살펴보기

3. 기본 setting : _config.yml

4. 첫 포스팅 연습

5. About 페이지 작성

 

인기있는 블로그 테마 Minimal mistake

github page 구조 이해 및 연습하기 좋음

 

github minimal mistake의 블로그 템플릿 레포를 클론, 그리고 .git 파일 삭제

내 블로그 레포를 "Teayoung.github.io" 로 만들음 그리고 git init , git remote 해서 연결

git add, commit, push 까지 완료

 

 

setting 에서 github page source 를 master에 save

자기계정 이름.github.io 로 들어가면 됨

(근데 자기 계정 이름하고 레포 이름하고 다르면 사이트가 계정 + 레포 이름까지 들어간 사이트로 만들어짐 주의!)

 

jekyll 기본 파일들 

_config.yml : 설정 파일

_posts : 블로그 포스팅 (글을 쓰고)

_pages : 개별 페이지 (여러가지 테마 페이지로)

_includes : 글에 포함되는 개별 요소 (html을 조각 조각 불러들어여서 만들기 때문에 그 html을 말함)

_layouts :글의 양식

assets : image, css, js파일 등

index.html : 표지 (모든 페이지 기본)

 

liquid Tag 툴 : 중괄호 두개로 커스텀이 더 쉬움 (http://shopify.github.io/liquid/basics/introduction/) 

 

_includes 폴더 안에 mathjax_support.html 파일 생성

_layouts 폴더 default html 파일 수정

_posts 폴더 생성 해서 "2020-12-31-hello.md" 이름으로 파일 생성

hello.md 에 --- , --- 사이에 변수들 관리 

title , category, tag,  등의 파일 속성 양식들을 적어 줌 toc는 목차 생성 명령어?

 

_config.yml 작성

 

일단 여기 까지 블로그 개설 까지는 완성 하였다. 하지만 아직 커스텀이나 내용을 채우기는 더 배워야 한다.