GitHub Blog 란
GitHub 에 대한 정의는 아래와 같다.
대표적인 무료 Git 저장소. 2008년 공개했다.
Git 호스팅 기능 덕분에 GitHub는 자유 소프트웨어의 성지로 떠올랐다.
GitHub Blog 는 GitHub Page 에서 제공하는 서비스로,
GitHub Repository
에 저장된 정적 웹 페이지 들을 무료로
웹호스팅을 하여 만들어진 Blog 이다.
왜 GitHub Blog 일까?
블로그를 만들 수 있는 사이트가 많이 있지만,
GitHub Blog 만큼 개발자가 직접 Front End 를 개발 할 수 있는 곳은 (아마)없다.
이번에 Front End 를 공부하면서 직접 Front End 개발을 해보고 싶었고,
이 블로그 자체가 나의 포트 폴리오가 될 것이란 판단도 있었다.
그리고 개발 내용을 체계적으로 관리하고 싶어서 GitHub 를 사용하게 되었다.
즉 아래와 같은 이점이 있어 GitHub Blog 를 선택하였다.
- 직접 Front End 개발이 가능하여 개발 경험을 쌓을 수 있다.
- 이 블로그 자체가 나의 Front End 개발 포트폴리오로 쓸 수 있다.
- GitHub 를 사용하면, 내 소스 코드나 공부한 내용들을 체계적으로 정리가 가능하다.
이 글을 읽는 사람은?
이후에 내가 필요할때 다시 보거나, 비전공자 또는 공부만 하고 실제 개발은 처음 하는 사람을 기준으로 글을 작성한다.
목표
비전공자 또는 실제 개발을 처음 하는 사람이 순차적으로 따라만 하면 GitHub 블로그를 만들 수 있게 하는게 목표이다.
소확행을 위해 각 글은 눈에 보이는 성과가 있는 한에서 최대한 짧게 쓰려고 한다.
중간에 겪었던 모든 삽질과 궁금했던 점과
관련된 개발 지식 등 필요한 내용을 짧게 쓸 예정이다.
최단 기간으로 개발을 하기 위한 글이 아닌, 실패와 그 극복 과정을 주로 쓰려 하기 때문에 시간은 좀 걸릴 것 같다.
하지만 꾸준히 쓸 예정이다.
개발 순서
지금 이 블로그를 만드는 과정을 쓸 예정.
각 기능의 완성 모습은 이 블로그를 보면 알 수 있다.
- GitHub Page Repository 생성
- Jekyll 설치
- Jekyll 을 이용하여 로컬 테스트
- 기본페이지 만들기
- 블로그 기본 설정
- Favicon
- Open Graph
- CSS 를 이용한 기본 레이아웃 변경
- 글씨체 적용
- Font Awesome 을 이용한 아이콘 사용
- CSS 를 이용한 반응형 레이아웃 변경
- JS 를 이용한 카테고리 기능
- JS 를 이용한 태그 기능
- JS 를 이용한 블로그 내 검색 기능
- 페이지 속도개선
- 팝업 각주 기능
- 블로그 Google 에 노출시키기
준비물
정말 개발을 처음 하는걸 기준으로 쓸 예정이라, 아래와 같은 툴을 필요로 한다.
GitHub ID
GitHub Blog 를 만들기 위해선 GitHub 가입을 우선 해야한다.
가입을 먼저 해두자.
Visual Studio Code
소스 코드 편집기이다.
많은 소스 코드 편집기가 있는데 설명의 편의를 위해 내가 쓰는 툴을 기준으로 설명한다.
따라서 소스 코드 편집기를 처음 사용 한다면, 이 툴을 쓰는게 글의 이해가 쉬울 것이다.
사용법에 대해선, 실제 사용할때 필수적인 최소한의 부분만 잠깐잠깐 언급할 예정이다.
GitHub Desktop
Git 버전 관리를 윈도우에서 쉽게 사용하기 위한 툴.
기본적으로 Git 의 명령어를 아는게 좋지만, 일단 처음이므로 쉽게 사용해보자.
사용법은 실제 사용할때 언급할 예정이다.
다음 주제
참고
- 나무위키 - GitHub
