배운 것을 기록하고 나중에 다시 찾아보기 위해 블로그를 만들었다.
블로그 요구사항
| 항목 | 설명 |
|---|---|
| 1.레이아웃 | (1) 좌측 사이드바, 우측 포스트 (2) 모바일은 좌측 상단 버튼 누르면 사이드바 나오게 |
| 2.사이드바 | (1) 최상위탭-트리구조 내비게이션바 (2) 다른 포스트로 이동 시 사이드바 새로고침 방지 (3) 포스트 상단 링크를 클릭시 사이드바 카테고리가 자동으로 열림 (4) 링크 길이가 길 경우 마우스 커서를 올리면 전체 제목이 뜨게 |
| 3.포스트 | (1) 마크다운 언어로 포스트 작성 (2) 포스트를 카테고리에 맞게 자동 분류 (3) 포스트 목차 생성 및 링크 클리시 해당 제목으로 이동 (4)비공개글 작성 |
| 4.호스팅 | (1) 비용X |
구현 방법
- 요구사항 1-(1) : (생략)
- 요구사항 1-(2) : 기기에 따라가 아닌 화면 크기에 따라 반응형으로 구현(css
@media사용) - 요구사항 2-(1) : 구글 탭을 연상해서 만듦, css로 탭 전환 및 카테고리 열고 닫기 등 애니메이션 구현
- 요구사항 2-(2) : JS로 SPA 구현, html을 받아와 내용만 붙여넣기(Post.js)
- 요구사항 2-(3) : 사이드바 카테고리 엘레멘트마다 data-url을 부여, 링크 클릭시 탐색 후 열기
- 요구사항 2-(4) : (구현 미완료)
- 요구사항 3-(1) : jekyll을 이용해 마크다운으로 작성 후 자동으로 html로 변환
- 요구사항 3-(2) : yaml으로 카테고리 구조를 정의하고 jekyll로 카테고리 생성
- 요구사항 3-(3) : JS로
<h1>태그를 탐색해 목차 생성, href와 id를 부여 - 요구사항 3-(4) : (구현 미완료)깃허브 프라이빗 레포지토리에서 받아오도록
- 요구사항 4-(1) : jekyll을 지원하고 비용이 없는 github page에 호스팅
왜 github page와 jekyll을 선택했는가
이 블로그는 jekyll 정적 사이트 생성기(SSG)를 사용하고, Github에 호스팅 중이다.
가장 중요한 것은 포스트를 쉽게 써야한다는 것이다. 따라서 마크다운으로 포스트를 작성하는 것은 초기에 확정을 지었다. 이제 마크다운을 어떻게 html로 바꾸는지가 문제였다.
클라이언트 사이트 렌더링- 마크다운 파서를 만드는 건 둘째 치고 일부 크롤러가 자바스크립트를 실행시키지 않기 때문에 검색 엔진 최적화가 어렵다서버 사이드 렌더링- 내 블로그는 그렇게 동적인 컨텐츠가 존재하지 않는다.정적 사이트 생성- 서버에서 한 번만 생성하기 때문에 효율적이고, 깃허브 페이지가 jekyll을 지원한다는 것을 알게 되었다.
따라서 정적 사이트 생성기인 jekyll을 선택하였고, github page에 호스팅하였다. github page를 무료이기 때문에 더욱 좋다.