'리소스를 어떻게 하면 보기 좋게 정리할 수 있을까?'라는 고민을 하던 중 깃북이라는 npm 라이브러리를 알게 되었습니다.
여기에서 말씀드릴 내용은 깃북을 설치하고 초기 셋팅까지 만들어보는 것 입니다.
1. Gitbook 설치하기
1. Gitbook cli를 글로벌로 설치합니다.
npm install gitbook-cli -g
gitbook --version
2. 깃북 저장소를 clone 합니다.
git clone https://github.com/(여기에 주소 입력)
2. 로컬 환경에서 gitbook 웹 서버를 띄워 브라우저 확인
1. Gitbook 저장소로 이동
cd (gitbook 설치 폴더)
2. Gitbook 실행하기
gitbook serve
3. 배포하기
1. 불필요한 요소 삭제
gitbook build
cp -R _book/* .
git clean -fx node_modules
git clean -fx _book
2. 깃에 올리기
git add .
git commit -m '작업한 내용'
git push origin 브랜치명
Gitbook은 마크다운 형식으로 작성해주시면 됩니다.
1. Gitbook에 대해 알아보기
깃북은 크게 README.md영역과 SUMMARY.md 영역으로 이루어져 있습니다.
README.md는 아래 캡처 기준으로 글이 작성되는 부분이며, SUMMARY.md는 목차와 같은 기능을 해주는 영역이라고 생각하시면 이해하기 쉬우실 겁니다 : )
2. 작성 방법
처음 Gitbook 디렉토리를 열면, README.md 파일만 있을겁니다.
README.md 파일은 Introduction 목차를 클릭했을 때 나타나는 페이지이며 필요한 페이지들을 *.md 파일로 만들어 주면 됩니다. 이후 SUMMARY.md 파일을 생성한 후 아래 캡처와 같이 링크를 사용해서 연결해주면 됩니다.
SUMMARY.md 파일 예시.
[결론]
처음에는 GitHub에 있는 README.md 에 리소스 정리를 진행하려고 했습니다만,
GitHub의 README.md에는 많은 양을 정리하기에는 한계가 있고, 가독성을 중요시 하는 저에게는 뭔가 2% 부족하다는 느낌이 들었습니다. 그래서 구글링 중 우연히 알게 된 Gitbook을 사용하기로 했고, 설치와 사용법이 간단하다는 점이 가장 마음에 들었습니다.
다만, 한 가지 아쉬웠던 점은 마크다운 기반이다보니 폰트, 색상 등을 바꿀 수 없다는 점입니다.
'기타 > 유용한 툴' 카테고리의 다른 글
[iOS&Safari]핸드폰 내 브라우저 검사하기 (0) | 2021.09.27 |
---|