github pages

이번 포스팅에서는 깃허브 페이지가 무엇인지, 어떻게 만들어서 배포하는지 알아보는 시간을 갖도록 하겠다..!

공식문서도 도움이 되므로 한 번 확인해보자.

Github Pages

Github Pages는 깃허브에서 제공하는 웹 호스팅 서비스이며 .github.io의 도메인을 가진 나만의 홈페이지를 만들 수 있게 된다. Tistory, Velog처럼 인기있는 블로그 서비스 중 하나이다.

자신이 만든 홈페이지를 배포하려면 유료 서비스를 이용하거나 속도가 느린 무료 서비스를 이용하게 되는데, Github Pages는 무료로 빠르게 배포가 가능하다.

Do it

깃허브 페이지 만드는 것을 세 가지 경우로 나누어 살펴보도록 하자.
1. 자신이 만든 홈페이지를 올리기
2. Jekyll Theme를 이용하여 올리기
3. 리액트로 깃허브 페이지 만들기

▶ 깃허브 페이지 개설하기

1. 깃허브 페이지를 담을 repository를 생성한다.
   ※ repository name은 반드시 OwnerID.github.io 이다.
   (호스팅 받는 주소 = Repository name)

2. repository를 만든 후, Settings에 들어간다.
   

3. 왼쪽 목록에서 Pages에 들어간 후, 파란색 박스 부분에 저렇게 뜬다면 본인의 깃허브 페이지가 개설된 것이다. Visit site버튼을 통해 방문할 수 있다.
   ※ 페이지 개설은 5분 정도 걸릴 수 있으므로 개설되지 않았다면 조금 기다리자.

▶ 자신이 만든 홈페이지 올리기

1. repository에 html파일을 만들거나 Upload Files로 본인이 만든 홈페이지를 업로드 시킨다.
   

2. index.html 파일로 만든다. 여기서 깃허브 페이지는 index.html을 메인 페이지로 보기 때문에 index.html 이름으로 해줘야 한다.
   

3. index.html 파일이 업로드가 되면, 나의 깃허브 페이지에 내가 만든 홈페이지가 생성되었다.
   ※ 여기서도 마찬가지로 5분 후 새로고침을 해보자.
   

▶ React로 깃허브 페이지 하기

리액트로 깃허브 페이지 하는 방법도 2가지가 있다.
1. build 된 폴더 단순히 올리기
2. npm(or yarn)의 gh-pages 사용하기

먼저 각각의 방법을 하기 전, react-create-app을 하도록 하자 앱 이름은 편의상 mypage로 하겠다.

npx create-react-app mypage

cd mypage

리액트 파일 빌드 후 올리기 방법

1. 리액트 앱을 빌드한다.

npm run build

2. 빌드에 성공하면 build 폴더가 생길 것이다.
   

3. build 폴더의 하위 파일들을 깃허브 페이지 repository에 업로드한다.
   ※ build 폴더가 아님
   깃허브 페이지 repository 만드는 법은 위의 깃허브 페이지 개설하기 부분을 참조한다.
   

4. 자신의 깃 허브 페이지에 들어가면 리액트 앱을 볼 수 있다.
   

gh-pages 패키지 사용하는 방법

1. gh-pages 패키지를 설치

npm i gh-pages

2. package.json 파일을 다음과 같이 수정

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
  	"predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
"homepage": "https://Mzhong00.github.io/pages/",

3. 스크립트 실행

   npm run deploy

   정상적으로 실행 됐다면 github 인증 후 console에 Published라고 뜬다.
   

4. gh-pages 브랜치로 바꾸기

   스크립트 실행 후 gh-pages 브랜치가 새로 생긴다. 해당 브랜치로 설정한다.

   

5. 배포 완료
   5분 정도 기다린 후, 깃허브 페이지에 들어가면 자신이 설정한 리액트 앱이 보인다.

   gh-pages를 사용하면 리액트 앱(깃허브 페이지)을 수정 했을 때, npm run deploy 명령어로 빠르게 깃허브 페이지에 반영시킬 수 있다.

▶ Jekyll Theme 이용하기

지킬은 깃허브 페이지에서 사용할 수 있는 테마가 모여있는 곳 이다. 지킬 테마는 구글에 치면 사이트가 나온다.

나는 다음의 링크에서 테마를 가져왔다.
http://jekyllthemes.org/

그리고 해당 사이트에서 Atlas를 선택했다.

선택을 하면 다음과 같은 화면이 나온다.
Downlaod는 말 그대로 다운로드를 하는 것이고, Demo는 이 테마를 고르기전에 해당 페이지가 어떻게 생겼는지 확인해 볼 수 있다.

우리는 Homepage에 들어가도록 하자.

Homepage에 들어가면 해당 테마가 있는 깃허브 repository로 이동한다. 해당 repository를 Fork 한다.

Fork는 해당 repository를 내 repository로 포크로 찍어 가져오는 것을 의미한다.

마찬가지로 Fork할 때도, Repository name에 Owner아이디.github.io 형태의 이름으로 한다.

Fork 완료 후 해당 repository의 Setting -> Pages에 Branch를 main으로 해주고 자신의 깃허브 페이지 활성화를 기다린다.

짜잔.

이렇게 테마를 적용하는데 성공했다.

테마의 내용들은 Fork 해 온 테마의 Repository 파일 또는 폴더들을 수정해서 바꾼다.

가장 중요한 _config.yml 파일에서 title, 이름, description 등을 변경하고, _post 폴더에 .md 형식의 마크다운 파일을 넣어 글을 쓰는 방식으로 동작한다.

※ 가끔씩 깨져서 나오는 테마들이 있는데 그럴 땐 _config.yml의 url과 baseurl을 나의 깃허브 페이지 주소에 맞게 넣으면 된다. (구글링 ㄱㄱ)

다들 자신만의 예쁜 깃허브 페이지 갖기를...