본문 바로가기
공부, 배움, 익힘

Jekyll 이용한 Github 블로그 만들기 - 2. 포스팅

by 코곰 2021. 3. 31.

Jekyll 이용한 깃헙 블로그 페이지를 up and running했으니,

두 번째 비디오는 어떻게 포스팅 하느냐에 관한 이야기.

 

참고 비디오

www.youtube.com/watch?v=Td_NjdrwPkQ

 

참고 - 첫 번째 비디오: 블로그 페이지 만들기

piaflu.tistory.com/77

 

Jekyll 이용한 Github Page만들기

Github page를 Jekyll 테마를 이용하여 만들어보았다. 얼마나 쓸지는 모르겠으나 포트폴리오용으로. 이에 관한 수많은 블로그와 유투브 컨텐츠가 있는데, 그 중 이 비디오를 따라서 해봤다. www.youtube.

piaflu.tistory.com

 

블로그 포스트 올리기

- Jekyll 플랫폼에서는...

: .html 혹은 .md 파일 업로드가능

: 파일 이름은 "YYYY-MM-DD-TITLE"따라야 함

: 현재 날짜 이전의 포스트만 블로그에서 보임

 

bundel exec jekyll serve

로 블로그를 localhost에 띄워놓고 시작해보자.

 

- _posts폴더에 보면, 이미 생성되어 있는 기본 post들이 있다. 하나 빼고 다 지우기!

 

- 하나 남은 파일도, _drafts라는 폴더 만들어서 옮겨줌.

- 이 _drafts폴더는 말 그대로 draft 버전 포스트들이 머물다 가는 장소로 쓸 것이다!

- _posts에 있는 파일들만 블로그에 보이므로, _drafts에 있는 파일은 보이지 않음.

 

- _img에 들어있는 이미지 파일들도 지워주면,

  아무 포스트도 보이지 않는 블로그 상태가 된다!

 

- 올리는 포스트는 .html 형식이든 .md 형식이든 상관 없지만

  Github README에 복사하기도, 티스토리 블로그에 올리기도 .md이 편하니

  .md형식으로 올려보자.

 

- 예시로, _posts폴더에 "2021-01-03 web-scraping.md" 생성.

 

- 그리고 포스트의 시작엔, 포스트에 대한 정보가 있는 "YAML Front Matter"를 넣어줘야 한다.

jekyllrb.com/docs/front-matter/

 

Front Matter

Any file that contains a YAML front matter block will be processed by Jekyll as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:

jekyllrb.com

---, --- 사이에 필요한 데이터를 넣어주고, 파일의 시작부분에 넣어주면 Jekyll이 특별히 처리할 수 있다!

 

---
layout: post
title: "Dinosaurs are extinct today"
subtitle: "because they lacked opposable thumbs and the brainpower to build a space program."
date: 2020-01-26 23:45:13 -0400
background: '/img/posts/01.jpg'
---

기존에 있던 포스트에서 발췌

 

이를 새로운 포스트에 맞게 수정하면

---
layout: post
title: "Web Scraping"
subtitle: "testing blog post!"
background: '/img/posts/01.jpg'
---

수정한 내용!

 

date 부분은 보이지 않는 부분이므로 굳이 없어도 되어 지워버렸다.

 

- 포스트에 내용을 추가하고 세이브하면, 블로그에 이 포스트가 뜨는 걸 볼 수 있다.

Web Scraping포스트가 이제 뜬다!

 

- 포스트에서 수정하고 싶은 스타일 부분은,

  assets / vendor / startbootstrap-clean-blog / scss / _post.scss에서 설정하면 된다!

 

- 블로그의 어느 부분이든 넣고 싶은 이미지가 있으면,

  _img폴더에 넣어주고,

  각 포스트에서 상대경로(relative path)를 써주면 된다.

 

  여기서 이미지들은 각 포스트마다 따로 폴더를 만들어주는 게 관리하기 편하고 깔끔하다!

  예시 - "2021-01-03 web-scraping.md"에 삽입할 이미지들은, web_scraping폴더에 넣어 관리한다.

 

 

 

 

- 이제 포스팅을 하는 기본적 구조를 알았으니, 내 입맛에 맞게 포스팅도 하고, 꾸며줄 수도 있겠다.

- 커스터마이제이션 부분은 다음 페이지 참조.

 

piaflu.tistory.com/103

 

Jekyll 이용한 Github 블로그 만들기 - 3. 커스터마이제이션

Jekyll을 이용해 깃헙 블로그를 만들고, piaflu.tistory.com/77 Jekyll 이용한 Github Page만들기 Github page를 Jekyll 테마를 이용하여 만들어보았다. 얼마나 쓸지는 모르겠으나 포트폴리오용으로. 이에 관한 수.

piaflu.tistory.com

 

 

댓글