minimal mistakes 테마를 이용해 github.io 블로그 구축하기(2)

오늘 블로그 2주차 포스팅에서는 저번 주에 완성하지 못한 이 블로그의 인터페이스를 수정하고, 전반적인 인테리어를 점검한 내용을 간단하게 담고자 한다.

크게 개선하고 싶었던 점은 다음과 같다

1. 각 포스트에 적용가능한 카테고리를 만드는 것

2. 블로그 상단에 네비게이션 바를 조정해서, 상단 분류를 만드는 것

3. 괜찮은 기능 추가 및 깔끔한 디자인 (내 취향대로)

이에 대한 변경내역은 다음과 같다

1. 카테고리를 적용하기 위해서는 카테고리가 적용될 페이지와 해당 페이지의 레이아웃을 추가해야한다

---

-1) 페이지 설정하기

(1) 깃허브에 띄워놓은 본 블로그의 Repository 하위에 새로운 폴더 _pages 를 추가한다

(2) 해당 폴더 밑에 만들고 싶은 ‘카테고리’에 해당하는 .md 파일 을 생성한다 (참고)

(3) .md 파일에 들어가는 내용들 중 layout 이 바로 해당 페이지의 레이아웃을 가르키며, permalink 가 해당 파일의 디렉토리이자 카테고리가 되겠다

-2) 레이아웃 설정하기

(1) 깃허브에 띄워놓은 본 블로그의 Repository 하위에 새로운 폴더 _layouts 를 추가한다

(2) 해당 폴더 밑에 만들고 싶은 ‘카테고리’에 해당하는 .html 파일 을 생성한다 (참고)

(3) .html 파일에 들어가는 내용은 중간에 ‘for 문’ 사이에 카테고리명을 적절히 입력해주면, 해당 카테고리가 헤더에 적힌 포스트들을 규합해주는 것으로 보인다

(4) 추가적인 레이아웃 관련 정보는 공식 다큐멘테이션을 참조하자

2. 네비게이션 바에 상단분류를 추가하기 위해서는 Repository에 yml 파일 하나를 추가해야 한다

---

1) 깃허브에 띄워놓은 본 블로그의 Repository 하위에 새로운 폴더 _data 를 추가한다

2) 해당 폴더 밑에 navigation.yml 파일을 생성한다

3) 해당 파일 내용에 각 메뉴 이름과 url (아까 추가했던 permalink ) 를 추가하면 완성 (참고)

3. 그저 마음가는대로

---

1) 블로그 스킨 수정 : 기존 ‘dark’ 스킨에서 ‘neon’스킨으로 바꾸어 보았다 ( _config.yml 파일 > minimal_mistakes_skin 옵션) 테마바꾸니 첫번째 포스트 뭔가 망해버렸다

2) 상단 네비게이션 바에 검색기능 추가 : ( _config.yml 파일 > search 옵션)

3) 프로필사진 추가 : kaggle러에게 언제나 초심을 선물하는 Goose.png ( _config.yml 파일 > author > avatar 에 사진 경로 추가)

---

이제 얼추 블로그가 정리된 모습이 되었으므로, 앞으로 포스팅은 비로소 관심있는 영역의 내용들로 채울 수 있을 것 같다

그럼 이만 총총

bug fix (1)

---

어제 계속 커밋이 안되고, 해당 페이지가 반영이 안되는 현상이 오래 지속되었다.

나는 뭐가 문제일지 한참을 고민하며, 날짜가 이상하게 지정되있나? 아니면 깃허브 서버 상의 점검이라던지 반영이 밀려있는 건가?

삽질만 하고 있던 차에 블로그 개설에 도움을 받아왔던 andole87 님께서 메일로 깃허브 build fail 시 나타나는 안내문에 대해 친절히 안내해주셨다!

마침 메일을 보니 andole87님 메일 외에도 깃허브에서 내가 잘못 작성한 포스트 코드부분을 지적하며, 안내 메일이 와있던 것을 확인할 수 있었다…

앞에서 나온 Layout 코드 for문을 인용시에, 코드 블럭이 제대로 닫혀있지 않아 커밋이 fail하고 있었다고한다

저런 형태의 코드가 어떤 언어인지? 도 잘 모르겠지만, html에 속해있는 것 같아 html 코드로 블럭을 작성해보았다.

하지만 이게 제대로 먹히지 않은 것인지, 자꾸 블럭을 뚫고나와 시작된 for 루프를 닫는 구문 endfor를 못찾겠다며 커밋 fail이 발생했다

일단은 코드블럭 대신 인라인 인용을 이용하여 해당 버그를 fix 해보았는데..

사실 이게 무슨 문제인건지는 추후 찾아보고 정리해보아야겠다

(jekyll 에서 코드 블록을 컴파일할때 발생하는 에러같긴하다)

끝으로, 혼자 삽질하고있는 사람을 도와준 andole87 님께 감사의 마음을 전합니다

bug fix (2)

---

어제 포스팅에서는 코드블록을 적용하여 _layout 문서에 있는 코드를 보여볼려고 했던 곳에서, 에러가 발생하여 commit이 실패하고 애를 먹은 시간이 있었다.

그러던 중 andole87 님의 도움이 있었고, 그 분의 설명에 따르면

• 깃허브 블로그에 적용되는 Jekyll은, Ruby 언어에 기반한 문법인 Liquid Template이 적용된다고 한다.

• 어제 포스팅하고자 했던 코드내용인 {% for post in site.categories['Miscellaneous'] %}을 코드블럭사이에 넣어놓았기에, 문법에 상관없이 커밋이 가능할 줄 알았으나,

• Liquid Temaplate에서 예약어에 해당되는 ` {%… ` 과 같은 문자가, md파일이 커밋되어 웹페이지로 뿌려지는 과정에서, 예약어로 분류되어 문법검사를 시행하였고, 에러가 발생한 것이다.

• 그리하여 Liquid Template 문법을 구글링하였고, 또 다른 분의 정리글에서” { % raw % }{ % endraw % } “를 사용하는 방법에 대해 알게되었다.