[깃허브(Github)] 20. 깃허브 블로그 만들기(2)

1. 20. 깃허브 블로그 만들기(1)에선 CSS가 제대로 적용이 안된 채 포스팅을 종료했었습니다.

이렇게 테마를 fork받아서 사용하시게 된다면 생각했던거와 경로가 다를 수 있습니다.

제대로된 경로를 설정해 주기 위해서 자신의 깃허브 사이트에서 개발자 도구를 열어봅니다.

다음 사진을 봤더니 에러가 다섯개나 떠있습니다.

2. 대략 여기서 가장 파악이 간단하다고 생각되는 css가 어떠한 경로로 잡혀져 있는지 살펴보게 된다면 다음과 같습니다.

/gatok/css/bootstrap.css

이러한 경로로 잡혀져 있네요. 그럼 일단 github의 본인 저장소에서는 어떤 경로로 잡혀져 있는지 확인해 봅니다.

3. 본인의 깃허브를 보시는 방법은 아시리라 생각합니다.

https://github.com/자신의네임/자신의네임.github.io

css 폴더를 클릭해서 들어가 보겠습니다.

4. /css 로 되어있습니다.

상위 폴더에선 gatok 라는 폴더를 찾을 수 없습니다. 찾을 수 없다는게 문제가 아니라 css 상위 폴더는 root입니다.

경로를 어떻게 설정해야 할까요?

gatok 폴더가 없다는 생각을 하고서 진행합니다.

/gatok/css/bootstrap.css -> /css/bootstrap.css 가 됩니다.

4. 보통 모든 수정은 어디서 일어나는지 확인하기 위해 다시 상위 tree 를 보면 _config.yml 이라는 파일이 보입니다.

_config.yml 는 지킬로 만들어진 깃허브 블로그의 환경설정 옵션을 담아둡니다.

여러분이 다운 받으신 테마의 종류에 따라 _config.yml 에 어떠한 옵션들이 달려져 있는지 전부 다릅니다.

하지만 그 옵션은 다 이미 정해진 규칙이 있으며, 그 규칙은 지킬 한글번역 사이트에서 확인이 가능합니다.

http://jekyllrb-ko.github.io/docs/configuration/

5. _config.yml 파일을 열어본다면 이러한 내용들이 있습니다.

하나씩 살펴보기엔 바꿔줘야할 내용들이 너무나 많네요.

여기서 가장 급한 CSS, JS를 제대로 불러올 수 있게 경로를 만져주는게 첫번째 라고 생각합니다.

baseurl: XXX

사진에서 붉은색으로 표시해 둔게 보이실 꺼예요. 이 부분을 수정하셔야 합니다.

이 부분은 여기에 작성된 URL로 웹사이트를 작동시킨다 라는 옵션입니다. 모든것이 /gatok 가 꼭 들어가게 되죠.

하지만 저희는 gatok 폴더가 없으니 /gatok 이라는 글자만 지워주시면 됩니다. (물론 저와 같은 템플릿을 선택하신 분들에 한해서)

6. 수정을 위해선 우측 상단의 연필모양 아이콘을 클릭하시면 수정을 진행할 수 있습니다.

7. 아이콘을 눌렀다면 현재 보고있는 _config.yml 파일을 수정할 수 있게 됩니다.

다음 사진처럼 경로를 요렇게 바꿔주기만 하면 됩니다. 빈 공란을 남겨 두기만 하면됩니다.

저는 / 하나만 남겨두면 될줄 알았는데 /를 남겨두게 되면 경로가 //css/~~~ 이렇게 들어가네요. 그냥 /도 지워주셔야 합니다.

후에 다시 _config.yml을 변경해야 할 일이 생긴다면 branch를 master로 바꿔주셔야 수정 아이콘이 활성화 됩니다.

8. 스크롤을 조금 내리면  Commit changes  라는 버튼이 보입니다.

보통은 무조건 커밋메시지를 입력하시는게 좋습니다. 규칙을 정하고 언제 어떤파일 수정했는지 알아보기 쉽게 작성하시는게 좋습니다.

하지만 이건 일단 초보자도 초간단하게 깃허브 블로그 만드는 방법이라 규칙같은거 보단 아웃풋에 집중하겠습니다.

10. 이 부분만 변경하면 이렇게 블로그가 제모습을 하고 있는게 보입니다.

이제 이렇게 블로그를 개설했으니 블로그에 글을 남기는 방법을 알아야 하겠죠?

블로그에 글을 남기는 방식은 md 파일로 블로그에 글을 쓰게 됩니다.

md 파일은 MarkDown의 약자라고 생각하시고 마크다운 문법으로 글을 쓰게 됩니다.

아주 간단합니다. 그리고 그건 3부에서 다뤄보겠습니다.