깃헙을 이용하여 호스팅하기
- 1. 깃헙을 이용하여 호스팅 하기 양권성
- 2. 양권성이란…? ▸ 스타트업 프론트 엔드 개발자 ▸ 돈까스, 힙합을 사랑하는 사람. ▸ https://perfectacle.github.io/
- 3. 포트폴리오 ▸ 채용 공고에 필수, 우대사항에 있는 포트폴리오 ▸ 만들기 싫어도 취직을 위해서는 만들 수 밖에 없음.
- 4. 포트폴리오 - 파일로 제출 ▸ USB, 메일 등등으로 파일을 공유
- 5. 포트폴리오 - 웹상에 공유 ▸ 웹 상에 올려서 주소를 공유 ▸ 피드백을 받고자 할 때도 매우 유용 ▸ 원초적으로 웹상에 공유하는 방법은 자신의 컴퓨터 를 서버로… ▸ 하지만 설정해야할 게 많고 기타 등등 문제가 많음.
- 6. 웹 호스팅 업체 ▸ 웹상에 공유하기 쉽게 해주는 호스팅 업체들을 이용 ▸ 1주일 정도만 공유하고 그 이후엔 신경쓰지 않음. ▸ 결국 돈 내고 쓰기엔 좀 아까움.
- 7. 기존 호스팅 업체의 문제점 - 트래픽 ▸ 무료 서비스는 일일 트래픽이 존재 ▸ 언제 트래픽이 터질지 모름. ▸ 트래픽이 터지면 매번 수동으로 초기화해줘야 함.
- 8. 기존 호스팅 업체의 문제점 - 백업 ▸ 국내 모 호스팅 업체, 보안 부실로 해킹을 당함. ▸ 랜섬웨어에 속수무책인 기존 백업 방식들. ▸ 사용자 입장에서는 호스팅 업체들에 대한 불신 형성
- 9. 구세주 - GITHUB PAGE ▸ 웹 호스팅 업체와 비슷하나 공짜에 트래픽 무제한. ▸ 버전 관리가 굉장히 용이 ▸ 동적 페이지(JSP, PHP 등등), DB의 사용이 불가능. ▸ 정적인 페이지(웹 사이트, 어플리케이션) 게시 가능.
- 10. 구세주 - GITHUB PAGE ▸ (백업)파일들을 스냅샷 형태로 저장. ▸ 랜섬웨어에 걸려도 타임머신 돌리듯이 이전 스냅샷 으로 복구 가능.
- 11. 구세주 - GITHUB PAGE ▸ 사람들이 누구나 파일을 열람 가능. ▸ 사적인 자료는 올리면 안 되고, 공개해도 되는 자료 들만 호스팅해야 함.
- 12. GITHUB PAGE의 저장소 ▸ 깃헙 저장소 이름을 자신의id.github.io와 같이 만듦 ▸ 계정이 들어가기 때문에 계정 당 하나 밖에 만들지 못 함.
- 13. GITHUB PAGE의 저장소 ▸ 기존 호스팅 업체에 파일 올리듯이 올리면 됨. ▸ 자신의id.github.io로 접속하면 결과 확인 가능.
- 14. 기술 블로그 ▸ 또 하나의 포트폴리오의 형태. ▸ 내가 관심있는 분야와 뭘 알고 있는지 어필 가능. ▸ 추후에 정리한 내용을 참고 가능.
- 15. 블로그 후보 네이버 티스토리 깃헙 페이지
- 16. 기존 블로그의 문제점 - 정형화 된 스킨 ▸ CSS를 사용하지 못하기 때문에 100% 만족하는 스 킨을 만들기 힘듦.
- 17. 기존 블로그의 문제점 - 이사가기 힘듦 ▸ 쓸 데 없이 들어간 태그들로 인해 스타일이 깨짐. ▸ 어디서부터 어디까지가 태그의 시작과 끝인 줄 모름.
- 18. 기존 블로그의 문제점 - SEO ▸ 동일한 이슈를 네이버, 구글에서 검색 시 구글이 훨 씬 높은 정확도와 신뢰도를 보여줌. ▸ 따라서 개발자들은 구글을 많이 사용함. ▸ 하지만 네이버 블로그는 구글에서 노출이 잘 안 됨. ▸ 구글에 노출이 되지 않는 기술 블로그는 비효율적.
- 19. GITHUB PAGE - 자유로운 커스터마이징 CSS(전처리기 사용 가능) 마크업(템플릿 엔진 사용 가능) ▸ 변수와 함수 등등을 사용할 수 있는 CSS 전처리기 ▸ 헤더, 푸터 등등의 파일을 따로 관리할 수 있고, 마 크업 내에 스크립트 구문이 들어갈 수 있는 템플릿 엔진
- 20. GITHUB PAGE - 뛰어난 이식성 ▸ 마크다운 문법을 사용, 배우기도 쉬움. 직관적. ▸ 다른 곳으로 퍼갈 때 스타일이 깨지지 않고, 수정하 기도 용이함. ▸ HTML로 변환해주는 툴들이 다수 존재.
- 21. GITHUB PAGE - 블로그의 버전 관리 ▸ 오늘 작업하던 내용이 깨졌음. ▸ 그러면 바로 전에 잘 작동하던 버전으로 롤백 가능. ▸ 로그만 남기면 백업 파일들을 스냅샷 형태로 만들기 때문에 용량도 작고, 버전의 이동이 자유로움.
- 22. GITHUB PAGE - 블로그 + 포트폴리오 ▸ 이전에는 블로그는 네이버 등등에, 포트폴리오는 호 스팅 업체에 분리시켜서 관리했음. ▸ 블로그와 포트폴리오를 한 공간에서 관리 가능.
- 23. GITHUB PAGE - GIT 쓸 줄 안다고 어필 가능 ▸ 채용 공고를 보면 필수, 우대 사항에 git이 심심찮게 보임. ▸ 깃헙 페이지를 쓴다면 깃을 쓸 줄 안다고 어필할 수 있는 요소가 됨.
- 24. GITHUB PAGE - 기본적인 기능 부재 ‣ 서브 메뉴 구현 ‣ 페이지네이션 ‣ 댓글, 검색, 방문자 수 등등
- 25. GITHUB PAGE - 기본적인 기능 부재 ‣ 테마 적용하기 ▸ 기존 블로그에서는 클릭으로 몇 번으로 끝날 작업들 이 직접 구현해줘야하는 경우가 많음. ▸ 포스팅은 뒷전이 되고, 기능 구현과 디자인 꾸미는 데 급급하여 주객이 전도되는 현상 발생. ▸ 적절한 선에서 디자인과 기능이 구현된 테마를 찾는 것을 추천.
- 26. 어떻게 만들지…?
- 27. BLOG 제작 도구 - JEKYLL ▸ 루비 기반으로 만들어져있음. ▸ liquid 라는 템플릿 엔진을 사용. ▸ 웹 서버를 내장하고 있음.
- 28. BLOG 제작 도구 - JEKYLL(장점) ▸ liquid 템플릿 엔진 그대로 사용 가능 ▸ 왜냐하면 깃헙 페이지에는 지킬이 내장돼있음. ▸ 지킬은 liquid 템플릿 파일의 해석이 가능.
- 29. BLOG 제작 도구 - JEKYLL(장점) ▸ 깃을 몰라도, 루비를 몰라도, 지킬을 몰라도!! 깃헙으로만 블로그를 만들어주는 저장소 ▸ 물론 맛보기 정도로만…
- 30. BLOG 제작 도구 - JEKYLL(단점) ▸ 깃헙에서는 커스터마이징 힘들기 때문에 대부분은 로컬에서 작업 후 확인을 거친 후 실제 블로그에 적 용. ▸ 로컬에서 확인하려면 지킬은 무조건 설치해야함.
- 31. BLOG 제작 도구 - JEKYLL(단점) ▸ 루비를 모르면 플러그인 등등 커스터마이징 하는데 불편할 수 있음.
- 32. BLOG 제작 도구 - JEKYLL(단점) ▸ 윈도우에서 사용하려면 상당한 삽질이 필요함. ▸ Mac에서는 설치하기가 훨씬 쉬움.
- 33. BLOG 제작 도구 - HEXO ▸ Node.js 기반으로 만들어져있음. ▸ 윈도우 지원도 빵빵함. ▸ Node.js가 설치돼있어야하고, 기본적인 npm 사용 방법을 알아야 함.
- 34. BLOG 제작 도구 - HEXO(단점) ▸ Node.js의 템플릿 엔진을 그대로 사용 불가능. ▸ 왜냐하면 깃헙 페이지에는 지킬이 내장돼있음. ▸ 지킬은 Node.js의 템플릿 파일들을 해석하지 못함.
- 35. BLOG 제작 도구 - HEXO(단점) ‣ 정적 파일 브랜치 ‣ 포스팅 전용 브랜치 ▸ 버전 관리를 위해서는 두 가지 브랜치를 따서 관리 해야함.
- 36. BLOG 제작 도구 - HEXO(단점) ‣ 중국인이 만들어서 질답이 중국어인 경우
- 37. FAQ