리액트 앱 깃허브 페이지에 올리기

깃허브 페이지란?

깃허브는 가장 인기있는 오픈소스 저장소입니다. 이러한 깃허브에서 제공하는 깃허브 페이지는 html, css, javascript로 구성된 정적 페이지를 무료로 호스팅할 수 있게 만들어줍니다. 우리는 함께 만들었던 리액트 페이지를 깃허브 페이지에 올려보도록 하겠습니다. 

깃허브에 저장소 만들고 README.md 추가하기

우선 우리 디렉토리에서 REAMD.md를 만들어보도록 하겠습니다. create-react-app을 통해서 만들면 README.md라는 파일이 존재하는데 이 안에는 리액트의 설명이 들어가 있습니다. 그래서 지우고 우리 앱에 대한 설명을 넣도록 하겠습니다.

저는 간단하게 위 처럼 만들었습니다. # 하나는 h1 태그와 같습니다. #이 증가할수록 제목태그의 숫자도 커지는 셈입니다. 저는 "# Random Profile Maker" 이런식으로 제목을 준뒤에 그냥 "random profile maker made through react"처럼 간단한 설명문만 적었습니다. 

우선 README.md 파일을 다 만들었으면 깃을 시작해보겠습니다. 해당 디렉토리에서 "git init"이라는 명령어를 실행하면 깃이 시작됩니다.(.git이라는 파일이 생긴것을 확인할 수 있습니다.) 그리고 "git add ." 입력후 add가 되면 'git commit -m "madeby lemon" ' 을 입력해주시면 됩니다. 따옴표 사이에 쓴 madeby lemon은 다른 말로 바꾸셔도 됩니다.

저장소를 만들때 "Initialize this repository with a README"에 체크하지 않고 저장소를 만들면 아래와 같은 페이지가 보입니다.

...or push an existing repository밑의 두 줄을 복사합니다.

해당 명령어를 우리 커맨드라인에서 입력하면 우리의 파일이 깃허브에 보내집니다. 그리고 깃허브 페이지를 새로고침하면 파일들이 들어가 있고, 우리가 만든가 README.md가 보여지게됩니다.

홈페이지 추가하기

이제 우리 파일에서 package.json을 찾아서 홈페이지를 추가해야합니다.

"homepage": "https://<githubUsername>.github.io/projectRepo"를 package.json에 추가해주세요. 저의 경우는 randomProfileMaker가 저장소의 이름이기 때문에 https://minhanPark.github.io/randomProfileMaker"가 됩니다.

이제는 "npm run build"를 실행해주세요.

에러가 없다면 스크립트에 명령어를 추가하라는 안내문이 뜨게됩니다. 우선 명령어들을 추가하기 전에 "npm install --save-dev gh-pages"를 실행해주세요. 깃허브 페이지라는 브랜치가 있다면 업데이트 시켜주고, 없다면 만들어주는 명령어입니다. 그리고 남은 건 package.json의 scripts 안에 "deploy": "npm run build &&gh-pages -d build"를 추가해주시고 커맨드 라인에서 npm run deploy를 실행해주세요.

퍼블리시가 완료되었습니다.

이제는 우리가 적었던 주소로 가서 확인해보면 됩니다.

이상없이 나오고 있습니다.

써야하는 명령어들이 많아서 헷갈리실수도 있는데, 당황하지 마시고 한 줄씩 써내려 가시면 됩니다. 각 명령어가 무슨 뜻인지는 천천히 이해하셔도 됩니다.

모두 고생하셨습니다! 리액트에 입문한 것을 환영합니다!

깃허브에서 전체 소스코드 확인하기