프로필사진

IT Anthology/how-to

깃헙(github) 블로그 개설부터 글쓰기까지 총정리

다각 2021. 11. 24. 11:25

(이 글은 2019년 8월 24일에 처음 작성한 글입니다)

 

깃헙 블로그는 자유도가 높은만큼 핸들링하는 방법이 손쉽지는 않다.
실력에 따라 무궁무진하게 디자인할 수 있지만, 이제 막 프로그래밍을 시작한 초보 개발자에게는 진입장벽이 있는 것이다.

지금의 블로그는 여러 이유 때문에 티스토리로 옮겨왔지만, 깃헙 블로그를 처음 시작할 때 꽤나 애먹었기 때문에 글을 써서 남겨놓았다.

 

깃헙 블로그를 선택하는 이유는 여러가지가 있을 수 있다.

당시 깃헙 블로그를 개설했던 첫번째 이유는 간지가 나서였다.

무려 'github'이 내 블로그 주소에 박히는 거니까.

깃헙으로 블로그를 개설하면 따라오는 '.io'도 뭔가 특별해 보였다.

 

두번째 이유는, 정해진 틀 없이 화면을 내 마음대로 요리할 수 있다는 점이었다.

하지만 나는 웹 디자인에 특화되어 있는 사람은 아니었고, 결국은 이미 만들어진 테마를 찾아 헤매기 시작했다.

다행히도, 입맛에 따라 고를 수 있는 깃헙 블로그 테마는 많이 풀려있다.

 

가장 많이 사용하는 테마는 역시 jekyll 기반으로 만들어진 테마들이다.
종류가 어마어마한데, 나는 당시 두가지 기준을 가지고 테마를 골랐다.

  1. 심플할 것
  2. code block의 색상 배합이 미학적일 것.

최종적으로 선택한 테마는 kiko-now라는 테마였다.
심플한 테마를 선택한 이유는, 차차 익숙해지기 위함이었다.
너무 복잡한 테마는 핸들링해야 하는 요소가 많아서 그냥 포기해버릴 위험이 있다.
단순한 테마를 먼저 적용해보고 익숙해지면 점차 복잡한 테마를 적용해보는 것이 좋다.

 

github 블로그 개설에는 Eun0 님의 블로그를 많이 참고했다.

 

GitHub 블로그 개설

git hub 블로그 개설을 위해서는 먼저 git hub 아이디로 로그인해 들어간다. 그리고 새 Repo를 생성한다.

새 Repo를 설정하는 과정에서 아래와 같이 자신의 아이디.github.io를 입력한다.

자신이 아이디가 아닌 값을 입력해도 만들어지긴 한다.

다만 주소가 매우 지저분해지므로 가급적 자신의 아이디를 적자 (경험담 맞음)

이제 만들어진 repo의 setting에서 아래로 쭉쭉 내리면 아래 사진과 같이 자신의 블로그 주소를 확인할 수 있다.

 

테마 가져오기

테마를 결정했다면 해당 테마를 제공하는 github 페이지로 간다.

제공되는 테마를 전체 Fork 뜨거나, Download Zip을 통해 전체 파일을 다운받는 방법, 이렇게 두 가지가 있다.
본인의 github 아이디로 이미 github 블로그를 개설했다면 Download Zip 하는 편이 낫고,

그렇지 않다면 Fork 뜨는 것도 나쁘지 않다 (이것이 더 간편하긴 하다)

나는 Download Zip을 통해 필요한 파일을 모두 다운로드 받았다.

 

다운받은 zip을 풀고 만들어놓은 repo에 파일을 모두 올린다.
README.md에도 나와있듯, 2016년 3월부터 단순히 "_config.yml"라는 이름의 파일을 변경하여 사용자에 맞게 수정할 수 있도록 업데이트 되었다.
"_config.yml" 파일은 root에 있다.

 

git hub의 페이지에서 위의 파일을 들어가면 다음과 같은 화면이 나타난다.
연필 모양 아이콘을 꾹 눌러 편집을 시작할 수 있다.
kiko-now 테마의 경우, 이보다 더 상세할 수 없게 주석을 달아두었다.
보고 차근차근 사용자에 맞게 바꿔나가면 된다.

 

파비콘 설정

파비콘 설정 역시 Eun0 님의 블로그를 참고하였다. (감사합니다 은영님...)

파비콘이란, 인터넷 웹브라우저의 주소창에서 페이지 이름 옆에 뜨는 로고를 얘기한다.

원하는 이미지를 찾고 파비콘을 생성해주는 사이트에서 파비콘 설정에 필요한 파일들을 얻을 수 있다.

'파일 선택'으로 내가 설정하고자 하는 사진을 로컬에서 찾아 넣고 'Create Favicon'을 누른다.

그럼 아래와 같은 창이 뜬다.

빨간 화살표 부분을 누르면 필요한 파일을 다운받을 수 있다.

다운 받고 성급하게 페이지를 나가면 안된다. 밑에 있는 코드가 필요하다.
코드를 만지기에 앞서 다운 받은 파일을 깃헙에 올려준다. 기존 것과 섞이면 헷갈리니 폴더를 만들어준다.

이제 깃헙에서 "_includes" 폴더에서 "head.html" 파일을 찾아준다.
아까 복사한 코드를 아래에 붙여넣기 한다.
여기서 href 뒤에 있는 경로를 자신의 경로로 바꿔준다. 저 아래로도 쭉 바꿔준다.

커밋을 하면 자신의 파비콘이 떠있는 것을 확인할 수 있다.

 

깃헙 블로그에 글쓰기

깃헙 블로그의 포스트를 올리는 법에 대해서는 생각보다 자료를 찾기 쉽지 않았다..
하는 방법은 간단하다. 마크다운(md) 형식의 문서를 레포에 올리면 된다...!! (너무 간단해서 아무도 적어주지 않는 걸까)
깃헙 페이지에서 바로 markdown을 생성해 작성하는 방법도 있지만, 포스트를 올릴 때마다 해당 레포에 찾아 들어가야 하는 번거로움이 있다.

마침 마크다운 편집기를 찾아보다가 좋은 플랫폼을 찾았다. 바로 stackedit이다.
이전에 쓴 포스트 (나의 개발환경) 마지막 부분에 언급되어 있으니 stcackedit로 글쓰는 방법은 생략하겠다.

각 테마마다 마크다운 파일을 시작하기 전에 형식을 지정해준다. 내가 가지고 있는 테마에서는 다음과 같이 형식을 지정해주고 글쓰기를 시작한다.

---
layout: post
title: "github 블로그 개설부터 글쓰기까지"
tags: [github, blog]
comments: true
---

title에는 반드시 따옴표를, tags에는 리스트(대괄호) 기호를 붙여줘야 한다.
layout의 경우 메뉴의 index.html에서는 page인 것을 확인할 수 있다.

 


(이 글을 참고해서 깃헙 블로그를 개설하신 분이 있다면 아주 감사합니다. 댓글로 적어주시면 놀러가보겠습니다)