Git Hub 간편하게 배포해서 포트폴리오 관리하기 - GitHub pages

오늘은 GitHub Pages, 깃허브 배포에 대한 포스팅을 써보려고 합니다. 리액트를 배우면서 GitHub에 자체 url을 만들어 배포 기능이 있다는 것을 처음 알았습니다. Git 블로그를 많이 들어보긴 했지만 저는 티스토리 블로그를 사용하기 때문에 '아.. 그런것이 있군' 정도로만 넘어갔었는데 알고보니 GitHub Pages 배포 기능을 활용한 블로그더라고요.

이번 포스팅에서는 아래와 같은 배포 방법에 대해서 다뤄보려고 합니다.

 

• 기본 배포 방법
• 배포 할 작업이 여러개일 때 배포 방법
• 리액트 배포 방법

기본 배포 방법

저장소(레파지토리 - reposiotry) 만들 때 저장소 이름을 배포에 맞게 정해주는 방법입니다. 레파지토리의 이름을 아래와 같은 형식으로 지어주시면 됩니다.

 

GitID.github.io

예를 들어 제 아이디(유저 네임)가 k-worker 라면, k-worker.github.io 를 아래와 같이 입력해주면 됩니다.

gitHub 배포 주소

오른쪽 상단 내 프로필 사진 - your repositories - new 로 들어가셔서 해당 Repository name을

본인gitHubID(유저네임).github.io 로 입력한 후 배포하고자 하는 코드를 해당 repository에 push 해두면 됩니다.

저는 레파지토리를 만든 후에 아래와 같은 순서로 소스들을 push를 하곤 합니다. ( 혹시라도 처음 push 하시는 분들이 계실 수도 있으니 적어봅니다. )

 

git init
git add .
git commit -m "아무말이나 입력"
git branch -M main
git remote add origin git@github.com:k-worker/k-worker.github.io.git
git push -u origin main

배포 할 작업이 여러개일 때 배포 방법

제가 원하는 배포는 위와 같은 배포가 아니었습니다. 많은 repository가 있고 그 repository들 각각 고유의 주소, url(경로)를 가졌으면 했습니다. 아이디로 배포해야 한다면 한번밖에 배포가 안되는것 아닌가? 라는 생각을 했습니다. 생각보다 간단했습니다. 해당 repository에 들어가셔서 setting을 클릭하고

setting

스크롤을 내리다 보면 GitHub Pages를 볼 수 있습니다. 여기서 아래와 같이 설정해주신 후 역시 remote로 push 해주시면

GitHub Pages

k-worker.github.io/apple-clone 과 같은 주소로 따로 url을 생성하여 배포할 수 있습니다. 만약, 여기서 none 셀렉트 박스 클릭시 아무것도 나타나지 않는다면 아직 소스를 레파지토리에 push 하지 않은 상태기이 때문일거에요. 소스들을 올려둔 상태여야 배포 설정 가능합니다.

리액트 배포 방법

1. npm install gh-pages

2. package.json 에 "homepage"를 아래와 같이 추가해줍니다.

 

  "devDependencies": {
    "http-proxy-middleware": "^1.0.6"
  },
  "homepage": "https://k-worker.github.io/react-project/"
} //홈페이지 위치는 마지막 괄호 바로 위

이 때 유저ID(유저네임)와 저장소 이름(레파지토리 명) 모두 소문자여야 하며 띄어쓰기가 있으면 안됩니다.

해당 주소 또한 위와 같이 "https://깃아이디(유저네임).github.io/레파지토리명/" 으로 입력해주시면 됩니다.

3. package.json 의 script 에 아래와 같이 deploy 와 predeploy 를 추가 해줍니다.

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  }, // deploy 와 predeploy 위치는 scripts '안'

4. 터미널 명령창에 npm run build 명령어를 입력합니다. Create React App 을 통해 리액트 프로젝트를 시작했다면 "build": "react-scripts build" 가 이미 있기 때문에 build 폴더가 만들어집니다.

5. 마지막으로 npm run deploy 명령어를 마찬가지로 터미널 창에 입력해줍니다. predeploy가 먼저 호출된 뒤 deploy가 실행되며 publish 된 것을 확인할 수 있습니다.

6. 페이지의 타이틀을 변경하고 싶으시다면 index.html 에서 <title>프로젝트 이름</title>으로 수정해줍니다.

 

2021.04.30 - [업무이야기] - Git, 깃 잔디밭 아이폰 위젯, 맥북으로 관리하기

Git, 깃 잔디밭 아이폰 위젯, 맥북으로 관리하기