3 minute read

깃블로그 개요

: 다음과 같은 이유로 깃블로그(GitHub Pages)를 선택했다.

  • 원노트 모바일 호환이 좋지않음 (폐쇠망 환경에서 기록할할때 모바일에 의존하는데 이 부분이 컸다.)
  • 원노트에는 코드가 예쁘게 들어가지 않아 IDE를 그대로 캡처하여 괸리했더니 클라우드 비용 증가
  • 이미지로 넣으면 나중에 코드를 복사해서 사용할 수도 없는 문제
  • 마크다운 언어를 써보고싶은 호기심

깃 이란?

프로젝트를 맡아 개발하고 운영을 하면 팀 협업을 통해 공동 작업을 하고 소스코드를 수정하는일이 잦다. 공동작업을 진행하며 팀원 들이 만든 소스코드를 합치거나 수정하는 작업이 반복되면 최신 버전을 관리하기 어렵고 실수로 중요한 코드가 누락되는 경우가 발생한다. 이를 방지하고 개발자들은 개발 중간중간 백업 파일을 저장하여 각 시점에 맞는 버전을 만들어둔다. 이 버전들을 확인하여 이전의 코드를 불러오거나 어떤 것들이 수정되었는지 최신 버전과 비교하며 확인하는 작업을 하게된다. 문제는 한 두개의 버전으로 프로젝트가 관리가 되지 않는다는 점이다. 프로젝트를 진행하면 무수히 많은 변곡점들이 생기고 그때마다 버전을 만들다보면 프로젝트에 사용된 용량이 커지고 어떤 버전에 어떤 수정사항이 있는지 확인이 어려운 번거러움이 발생한다. 또한, 팀 협업을 통해 개발을 진행할 때 코드의 일부분만으로는 코드를 돌릴 수 없으니 매번 최신 버전의 소스코드를 한번에 공유를 해야하는데 이 부분도 골치가 아픈것이다. 이러저러한 문제점들을 해결하기 위해 만들어진 도구가 바로 ‘버전관리1 도구 GIT’이라는 것이다.

깃허브 이란?

Git은 버전관리를 위한 ‘소프트웨어’였다면 Github은 이 Git으로 저장되어 원격전송된 내역들이 저장되는 공간을 제공하는 ‘서비스’이다. 우리가 버전관리를 위해 만든 git들을 얼마든지 Github에 무료로 전송하여 저장하고 공유할 수 있다. Github는 본인과 팀원들의 코드 뿐만 아니라 전세계 개발자들의 오픈소스를 서로 공유하고 발전시킬 수 있는 개발자에게 필수적인 플랫폼이니 반드시 사용법을 익혀두기로 한다.

깃블로그 제한 사항

: 깃블로그에서 제한하는 내용이 있다고 한다.

  • GitHub Pages 소스 저장소의 권장 제한은 1GB
  • 게시 된 GitHub 페이지 사이트는 1GB를 초과 할 수 없다.
  • GitHub 페이지 사이트의 대역폭 제한은 한 달에 100GB
  • GitHub 페이지 사이트의 builds 제한은 시간당 10회

깃블로그 사전지식

: 깃과 깃블로그의 필수적으로 알아야 할 요소는 다음과 같다.

  1. 로컬 저장소(local)와 원격 저장소(remote)
    git 저장소는 자신의 컴퓨터인 로컬 저장소와 서버에 있는 원격 저장소로 나뉜다. local에서 작업한 것은 remotepush 해줘야만 변경사항이 서버에 반영된다.
  2. add, commit, push
    자신이 작업한 내용을 remote 저장소 에 반영하기 위해서는, 변경사항을 추가하고(add), local에 저장하고(commit), remote에 업로드(push) 해야한다. (add -> commit -> push)
  3. branch
    여러 개발자들이 공동으로 작업할 수 있게 기본 master branch 에서 새로운 가지를 만들어 독립된 공간에서 작업을 수행할 수 있다. 이 때 주기적으로 변경사항을 합치는 것이 필요하다.
  4. pull
    remote 에 있는 내용을 local 에 받는 과정이다. 이때 현재 자신의 branch 가 어디인지 확인을 잘 하고 pull 하도록 한다. 만약 자신의 local 에 변경사항이 있다면 pull 할 시 에러가 나므로 add, commit을 진행한 후 pull하거나 stash하여 자신의 변경사항을 다른곳에 저장한 후 pull하도록 한다.
  5. 기본 흐름
    github 공간 만들기(clone, init) => 파일 작성 => 파일의 변경사항 임시저장(add) => local에 저장(commit) => remote에 업데이트(push) => 로컬 업데이트(pull) => add => commit => push ==> pull…(반복)
  6. 로컬 작업 시작 전 무조건 pull
    remote 저장소에 변경된 사항이 있을 수 있기에(여러명이서 작업시) 무조건 파일을 건들기 전에 pull 하도록 한다. 안그러면 conflict 이 일어나 수동으로 고쳐야한다.

원격 레파지토리 생성하기

: 웹을 구성하는 파일(HTML, CSS, JS …)이 업로드될 저장소(Repository)를 생성한다.

Creating a GitHub Pages site !

  1. 깃허브(GitHub) 메인화면 > Repository 탭
  2. new 버튼 > Create a new repository (정보 입력 후 생성)

    깃블로그 URL 뒤에 저장소 이름없이 생성하기
    레파지토리생성 과정은 예시가 많으니 생략한다.

    A. https://사용자이름.github.io/저장소이름/
    B. https://사용자이름.github.io/

    저장소이름 없이 간소화 된 B와 같은 형태로 URL 요청이 가능케 하려면 주의할점은 레파지토리명을 반드시 사용자이름으로 해야한다.

  3. Create repository 버튼
  4. Repository 최종 생성 완료

게시글 생성하기

: 단순하게 html 게시물을 생성해 본다. (1번을 통해 생성해본다.)

  1. Create new file
    파일 내용 입력 화면의 상단 파일명 입력칸에 “폴더명/파일명.확장자”를 입력하여 원하는 폴더 경로에 파일을 생성할 수 있다.
  2. Upload files
    이미지리소스 등의 리소스들을 올릴 수도 있다.

브랜치설정

: 자신이 보여주고자 하는 분기점을 선택해야한다.

  1. 생성한 repositiry 에서 상단 맨끝 Setting 탭 이동
  2. options 탭 > 좌측 GitHub Pages
  3. 브런치쪽에서 디폴트 [None]을 자신이 보여주고자하는 브랜치(Branch, 분기점)를 선택하고 [Save]

참고) Github Pages의 호스팅 원리
해당 리파지토리에 푸시된 브랜치를 루트 폴더로 삼아 호스팅을 하게 된다. 브랜치 이름은 아무거나 해도 상관없다.
Github Pages에 호스팅하는 브랜치 이름은 관습적으로 gh-pages 라는 이름을 쓴다고 하며, 다른 이름을 써도 무방하다.

깃블로그 동작 테스트

: 자신의 깃블로그 주소로 접속하여 결과를 확인하자. 아까 레파지토리에 만든 html 에 접속해본다.

  • 저장소 이름없이 생성하기 (적용O)
    https://사용자이름.github.io/
  • 저장소 이름없이 생성하기 (적용X)
    https://사용자이름.github.io/저장소이름/

잘 접속되었다.
이제 나만의 웹사이트가 개설되었다.

버전관리: 형상관리.

Leave a comment