Docsify와 netlify로 TIL 페이지 만들기

TIL : Today I Learn

오늘 배운 내용을 정리한다. 라는 뜻

개발자라면 한번 쯤 시작해볼까? 마음먹는 TIL

 

Vue, React ... 이것저것 옮겨다니면서 공부하는 요즘, 공부하는 내용 대부분이 휘발성인 것 같은 느낌이 들었다. 

 2020년을 맞이하여 공부한 내용을 정리하기로 마음먹었다.

 

현재 나는 Notion을 통해서 TIL를 작성하고 있다.

개인 notion 페이지 내의 TIL

 

Notion에서 웹 사이트로 옮기려는 이유?

Notion도 기록하기 편하고 좋지만, 웹 사이트로 옮기려는 이유는 아래와 같다.

 

1. 날짜가 아닌 주제를 기준으로 그룹핑하고 싶다.
2. 혼자 쓰고 혼자 보는 공간이다보니, 내용이 부실해진다.
3. Gitgub Public 잔디 심고 싶다. 
4. 마크다운 문법 연습하고 싶다.

 

영감을 받은 TIL

박준우님의 TIL 페이지를 보고 영감을 받아 같은 방법으로 TIL 페이지를 만들어보려고 한다.

 

https://junwoo45til.netlify.com/#/

Document

 

docsify.js 설정하기

docsify는 문서 형식의 사이트 제작을 도와준다.

마크다운 문법으로 작성할 수 있다.

docsify 자체 문서가 잘 되어있으니 참고해서 진행해도 좋다.

https://docsify.js.org/#/

docsify

docsify 다운로드

터미널을 켜고 dicsify 다운로드를 시작해보자.

npm i docsify-cli -g

docsify 초기화

원하는 폴더로 이동하여, init 해보자

docsify init

확인해보기

docsify serve

터미널 창에 출력 된 주소로 이동해서 페이지를 확인해 볼 수 있다.

아주 간단하게 완료!

 

github에 업로드 하기

현재는 해당 페이지를 로컬 서버에서 나만 볼 수 있다. 배포를 위해 github에 업로드하자.

 

repository 만들기

repo 이름은 원하는대로 하면 된다. 나 같은 경우에는 TIL로 했다!

repo에 push 하기

터미널로 돌아가서, init해 놓은 docs를 저장소에 push해보자

git init
git add .
git commit -m "first commit"
git remote add origin repo주소
git push -u origin master

처음에 git add . 로 모든 파일을 커밋하지 않고, git add README.md 그대로 복붙했다가, 배포 뒤에 index 파일을 찾지 못하는 오류가 발생했었다 ㅠ

 

netlify로 배포하기

이제 마지막 단계만 남았다!

https://www.netlify.com/

Netlify: All-in-one platform for automating modern web projects

위의 링크로 이동하여 가입을 진행한 뒤 새 사이트를 생성한다.

 

원하는 방식으로 가입

 

New site from Git 버튼을 클릭하고, github을 연결하자.

 

 

원하는 레포지토리가 없다면 Configure the Netlify app on GitHub. 버튼을 통해 등록한 후에 진행한다.

 

검색하여 등록

 

Deploy site 버튼을 누르면 끝!

 

 

완료!

TIL 페이지 완성!

 

https://stoic-thompson-62dd04.netlify.com/#/

Document

 

 

docs/ 폴더 안에 폴더를 생성하면 카테고리가 되고

그 안에 md 파일을 만들어서 글을 작성하는 구조인 것 같다.