새로운 강의는 이제 https://memi.dev 에서 진행합니다.
memi가 Vue & Firebase로 직접 만든 새로운 사이트를 소개합니다.
github hosting
github를 이용해 무료로 블로그를 운영할 수 있다는 소식을 듣고 찾아보았다.
그러면 jekyll이란 것이 필요한데..
지킬과 하이드의 그 지킬 맞다
지킬이 알고싶으면 클릭 지킬공사이트 : http://jekyllrb-ko.github.io (무려 한글!)
핫한 것만 쫒아다니는 하이에나인 내가 선택한 이유는…
1. 정적이다
이말인 즉슨 양방향이 아님(댓글 이딴거 없음)
양방향이 안되는 건 아니지만 태생이 그런쪽이 아니다.
2. 공짜다
깃헙 기준.
당연히 public repo.여야하며 소스는 모두 오픈임
3. 개발자스럽다(geek,nerd)
*.github.io를 한번 둘러보면 냄세가 올라온다.
새로 글을 쓸때 git commit&push를 해야함.(인풋폼 같은거 없음:단방향)
개발자라면 terminal만 있으면 어디서나 작업가능(vi와 git 만 있으면 됨)
그냥 개발자 소개 대문용, 기록용이 적당함
4. 유지관리
깃헙이 망하진 않을듯..
디비 같은 거 필요 없다 그냥 파일임
어느 블로그나 마크다운을 임포트할 수 있다.
사이트를 만약 옮긴다해도 파일카피만 하면 끝난다.
5. 간단
아래 후술하겠지만 몇번 클릭하면 완성
가볍게 소스 리뷰하면서 지금껏 커밋한 내용들을 정리,회고할 수 있는 가벼운 사이트에 적합
조사
기본적인건 구글링해서 지식을 습득할 것
- ‘github 홈페이지’ 검색해서 보고 대략 확인
- jekyll 공식사이트가서 살짝 봄.. 빠져들지 말고
- github는 ruby를 쓴다. 그래서 jekyll도 당연 루비로 만들어져있다.
- github는 markdown을 쓴다.
- 루비는 몰라도 된다.
사용
지킬 사이트에서 잘 보고 따라하면 된다.
여러가지 방법이 있지만 가장 간단한 방법으로 생성해보았다.
-
github에서 유명한 jekyll-now 를 fork함
해당 사이트에서 사용방법을 대충 숙지하면된다 몇개 안됨..git에서 fork는 포크다.. 말그대로 해당 소스를 포크로 찍어서 내 저장소에 담는다는 것임
-
홈페이지가 열리는 지 확인
https://id.github.io만든분들이 역시 개발자라 헬로월드가 두둥 떠있을 것이다
-
내 리포에 담아놨으니 내 피씨에 다운 받으면 된다.
git clone https://github.com/id/id.github.com.git
id.github.com라는 폴더에 소스파일이 주욱 들어온다 -
_config.yml의 이름 몇가지 바꾸면 됨
name, description등을 자기껄로 바꾼다.
git commit, push 하고 다시 해당 주소로 들어가본다. -
포스트추가하기
_post폴더에 2014-3-3-Hello-World.md 하나 있을 것이다
파일명과 내용 변경 후 깃푸쉬 한다음 다시 확인해본다.파일명은 규약이 있다 샘플서식대로 하지 않으면 당연히 오류가 난다.
깊게 빠져들 거 아니면 커스터마이즈에 미치지 말고 있는거나 잘 쓰자. -
markdown
포스트든 페이지든 죄다 .md(즉 마크다운) 으로 만들어져 있다.괜히 마크다운마니아가 되서 시간 뺏길 필요 없다.
마크다운 작성한 걸 바로 네비게이션 해주는 콤포넌트 라이브러리등이 너무 많다 즉시 보면서 작성하는 것이 좋다 -
디버깅하기
위까지만 해도 일반사용자는 아무 문제가 없지만…
아무래도 마크다운 네비게이터로는 실제 웹과는 거리가 있었다.
웹 개발자라면 역시 로컬에서 테스트 하고 푸쉬하는게 미덕..그래서 포크한 사이트에 가보면 Local Development에 관해 자세한 설명이 되어있다.
하지만 이상한 소릴한다. gem install github-pagesgem : ruby의 appstore 라고 생각하면된다.(이해를 돕기위한 설명일 뿐임,nodejs의 npm 개념)
윈도우 머신에서는 gem 때문에 ruby를 깔아야한다.(뭐 gem만 까는 법도 있겠지만..)
mac에는 기본으로 sierra기준 2.0이 깔려있다.
다 깔리고 나면 jekyll serve –watch 해주면 실시간 감시가 된다.
코드를 수정해가면서 http://localhost:4000 누르면서 확인이 가능하다.
파일이 변경되면 아래와 같이 알아서 제네레이션 해준다.
Regenerating: 2 file(s) changed at 2017-02-15 18:20:44 ...done in 0.143274 seconds.
Regenerating: 2 file(s) changed at 2017-02-15 18:26:56 ...done in 0.191594 seconds.
참고
위의 사용 내용만 보고 따라하는 당연히 무리가 있다. 그럴 필요도 없고…
그냥 구글링을 해서 따라하는 게 나으며 디버깅까지 가능하다라는 일종의 증빙자료 같은 것이다..
궁금한 사항은 메일을 보내기 바람…
결론
뭔가 더 애드온 시키면 부트스트랩정도는 올릴 것 같긴한데… 디폴트 디자인은 솔직히 거지같다…
클릭 몇번으로 내가 원하던 긱스러운 홈피가 완성되었다.
혼자 개발하는 것들이 대부분이다보니 git은 commit push pull clone 이런 기초적인 것만 쓰는데…
이런 시덥지않은 웹사이트 소스를 이용해 컨플릭트 머지처리 연습하기 딱 좋을 것 같다…
댓글남기기