[Github 블로그] 블로그 포스팅하는 방법
카테고리: Blog
1. Markdown 을 지원하는 에디터를 실행한다.
나는 Visual Studio Code 에디터를 선택했다. 집에 Atom이 깔려 있어 처음에는 Atom 으로 첫 포스팅을 했었으나 묘하게 불편했다. 프리뷰 기능을 키면 렉인지 뭔지 보여졌다 안 보여졌다 하기도 하고.. 😥 그래서 VS Code로 에디터를 바꿨는데 아주 만족하고 있다.😄 Atom 쓸 땐 뭔가 우왕좌왕 하게 됐는데 Vs Code는 편안하달까.
에디터를 열고 Jekyll 테마 내용물들이 들어 있는 깃허브아이디.github.io 이름의 로컬 폴더를 열어준다.
2. _posts 폴더를 생성한다.
깃허브아이디.github.io 이름의 로컬 폴더 위치에 _posts 폴더가 이미 있다면 냅두고 없다면 _posts 라는 이름의 폴더를 생성해 준다.
모든 포스트 파일은 이 _posts 내에 위치하여야 한다.
3. yyyy-mm-dd-title.md 형식의 파일을 만들어준다.
포스트 파일의 확장자는 md이어야 한다. yyyy-mm-dd 형식의 날짜와 함께 -포스트 제목을 붙여 준다. 포스트 제목은 영어로 쓸 것을 추천한다.
ex) 2020-05-23-my-first-post.md
4. 머릿말(Front-Matter)을 상단에 작성해 주어야 한다.
이제 md 파일에 포스트를 작성해보자. 내용을 작성하기 전에 이 포스트의 정보를 머릿말로 적어주어야 한다.
---
title: "[Jekyll] 블로그 포스팅하는 방법"
excerpt: "md 파일에 마크다운 문법으로 작성하여 Github 원격 저장소에 업로드 해보자. 에디터는 Visual Studio code 사용! 로컬 서버에서 확인도 해보자. "
categories:
- Blog
tags:
- [Blog, jekyll, Github, Git]
toc: true
toc_sticky: true
date: 2020-05-25
last_modified_at: 2020-05-25
---
난 이 포스트의 머릿말을 이렇게 작성했다.😊 우선 위 아래에 --- 를 써서 머릿말 쓰는 영역을 구분해주어야 한다.
title : 포스트의 제목을 큰 따옴표로 적어 준다. 이 title을 적어주지 않으면 .md 파일 이름으로 적어주었던 title 부분이 제목으로 업로드 된다.
excerpt : 포스트 목록에서 보여지는 블로그 소개 글로 들어가는 것 같다.
categories : 이 포스트의 카테고리는 Blog로 정했다.
tags : 태그와 카테고리의 차이점은 카테고리는 sub url이 붙는 페이지가 있지만 태그는 없다는 것이다. 카테고리 보다 좀 더 세부적. [] 대괄호 안에서 , 콤마로 구분해주어 여러개의 태그를 이 포스트에 지정해 주었다.
toc : Table of Contents. 포스트의 헤더들만 보여주는 목차를 사용할 것인지의 여부. ture 로 해주면 포스트의 목차가 보이게 된다.
toc_sticky : true로 해주면 목차가 스크롤을 따라 움직이게 된다! 스크롤을 내리면 목차도 따라 내려오게 됨. 이 밖에도 이 포스트의 toc_icon, toc_label 도 설정할 수 있다. 나는 따로 디폴트 설정을 바꿨기 때문에 추후 이에 대한 포스트를 올릴 것!
date : 글을 처음 작성한 날짜. yyyy-mm-dd 형식으로 작성했다.
last_modified_at : 이 글을 수정한 날짜.
이 밖에도 layout, permalink, published, author_profile 등등 머릿말에 쓰이는 여러 변수들이 있다. 내가 원하는 변수를 머릿말에 지정해서 사용할 수도 있다. 아직은 모르는 것이 많아서 차차 조사한 후 나중에 머릿말 전역 변수에 대해서 포스팅 해야겠다.
머릿말에 쓰인 변수는 page Liquid 변수로 사용될 수 있다. 예를 들어 머릿말에 적힌 categories 변수 값은 “Blog”이므로 Liquid 언어로 “{{page.categories}}” 를 본문 내에 쓰면 “Blog”값이 출력될 것이다. Liquid 언어 문서
5. 포스트 내용을 Markdown 문법으로 작성한다.
머릿말이 ---로 끝난 이후부터는 포스트 본문 영역이다.
jekyll은 HTML과 Markdown을 지원하는데 마크다운이 HTML보다 더 간략하고 편한 문법이다. 따라서 마크다운 문법으로 포스트를 작성해준다. 마크다운 문법에 대해서는 추후 포스팅 할 것!
6. 마크다운으로 쓴 포스트 내용을 미리 보기
마크다운 문법으로 포스트 본문을 작성하기 떄문에 쓰는 것과 보이는 것은 많이 다르다. Visual Studio Code 내에서 설치하여 사용할 수 있는 Preview 기능과 로컬 서버로 내가 작성한 마크다운 글이 어떻게 보여지는지 확인해보며 포스팅 하자.
Markdown Preview Enhanced
마크다운으로 작성한 문서가 웹에 올리면 어떻게 보여질지 보여주는 기능이다. 이를 동시에 보면서 마크다운 문서를 작성할 수 있다. 나는 마크다운 문법이 틀렸는지 이를 통해 확인하며 포스팅을 한다. Visual Studio Code 에도 있지만 Atom에서도 설치하여 사용할 수 있다. 😺
우선 Visual Studio code 왼쪽 상단 다섯번재 아이콘인 확장(extension)에서 Markdown Preview Enhanced를 검색하여 설치한다.
빨간 동그라미 칠한 아이콘을 클릭하면
이렇게 마크다운 문법으로 글을 작성하면서 동시에 웹에서 어떻게 보여질지 확인할 수 있다.
로컬 서버에서 블로그에 적용될 모습 확인하기
명령 프롬프트 cmd를 켜고 cd로 깃허브계정아이디.github.io 폴더로 이동한다. 그 다음 bundle exec jekyll serve 명령어를 쳐주면 로컬 환경에서 jekyll 서버가 가동된다. 작성 중인 .md 파일을 저장하고 웹 브라우저를 켜고 http://127.0.0.1:4000 로 접속하면 블로그에서 어떻게 보여질지 미리 확인해볼 수 있다. .md 파일을 저장하여야 로컬 서버에 반영이 된다. 로컬 서버 가동 중인 cmd를 켜놓고 http://127.0.0.1:4000/ 페이지를 새로 고침하여 현재 작성 중인 글이 블로그에서 어떻게 보여질지 확인하며 포스트를 작성한다. git push 하여 원격 서버에 반영하기 전에 어떻게 보여질지 미리 확인해볼 수 있는 좋은 방법인 것 같다.
7. 작성한 포스트 파일을 git push 하여 Github Pages 서버에 업로드 한다.
깃허브계정아이디.github.io 폴더 내의 현재 변동 사항은
- _post 폴더가 새로 생김.
- 그 속에 포스트 .md 파일이 새로 생김.
이다. 이를 git push 해주어 Github Pages 원격 서버에 올려주어야 한다. 그럼 이제 내 블로그 페이지에 포스트가 올라온 것을 확인할 수 있을 것이다.
🔔 git이 미리 설치되어 있어야 한다.
git bash로 일일이 git add, commit, push 명령어를 칠 필요 없이 VS code UI로 Github 원격 서버에 포스트를 업로드 할 수 있다.
작업 중인 이 폴더는 이미 git과 연결되어 있는 폴더이기 때문에 그냥 VS code 왼쪽 상단 세번째 아이콘을 클릭하면 바로 git을 사용할 수 있다.
모든 변경 내용 스테이징을 누르고 (= git add .)
커밋메세지를 쓴 후 체크 표시를 누르면 커밋 된다. (= git commit -m “블라블라”)
그리고 체크 표시 옆에 …를 눌러 푸시 (= git push) 해주면 블로그에 포스트가 잘 업로드 될 것이다. 최소 1분 정도는 기다려주어야 하는 것 같다. 😥
8. 다른 컴퓨터에서 포스팅 작업을 하고 싶을 때 git pull
다른 컴퓨터에서 내 깃허브 블로그 작업을 하고 싶다면 깃허브(Github) 블로그를 생성 해보자.포스트에서 설명되있듯이 다른 컴퓨터에서도 루비를 설치하고 jekyll를 설치한 후 내 블로그 Github Repository 를 clone 해와야 하는 작업이 필요하다.
다른 컴퓨터에서 작업할 때, 처음에만 내 블로그 Github Repository를 git clone 해오고 그 이후부턴 매번 git pull 하여 원격 서버에 올려진 내 포스트 글들(.md파일들)을 받아와 작업하면 된다. git pull 또한 Visual Studio Code같은 에디터상에서 할 수 있다.
🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄
댓글 남기기