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부에서 다뤄보겠습니다.

댓글 9

  • kgy (2017.02.23 19:00 신고)

    쉽게 설명해주셔서 문제없이 셋팅했습니다~ 감사합니다 : )

    • 회복맨 (2017.02.24 22:58 신고)

      좋은 블로그 시작하게 되면 저도 꼭 보고싶습니다. ^^

  • yeram (2017.05.07 01:03 신고)

    감사합니다. 설명해 주신대로 따라하고 있습니다^^

    • 회복맨 (2017.05.10 03:56 신고)

      방문해 주셔서 감사합니다. :)
      계속해서 업로드 하겠습니다. ㅎㅎ

  • (2017.10.26 09:43)

    비밀댓글입니다

    • 회복맨 (2017.10.26 12:09 신고)

      아... 질문 주신것들은 제가 정확히 잘 모르는 부분이라 답변이 어렵습니다.
      깃허브로 페이지를 띄우는 두가지 방법은

      깃허브 페이지스
      https://pages.github.com/

      와 지킬, 헥소(jekyll, hexo) 등을 사용하는 방법이 있는것으로 알고 있습니다.

      이것 외에 방법을 제가 모르는 것일 수 있어서 찾아보고 방법이 있으면 답변드리겠습니다.

  • ZENEZ (2018.06.18 08:02 신고)

    잘 따라가다 정신줄 놓고 일단 보류중입니다. ㅎㅎㅎ
    맨정신 말동말동할때 다시 도전해볼께요.
    와드용 댓글 박아놓습니다.

    • 회복맨 (2018.06.18 08:34 신고)

      방문해 주셔서 감사합니다 ^^
      지킬 사용해서 블로그 꾸미는거 더 좋은 글로 업데이트 예정입니다! :)

  • 지나가던 (2018.10.07 23:31 신고)

    감사합니다 css 제대로 안보여서 build settings에 새로 baseurl 만들고 공백으로 뒀더니 해결됐네요!!!!