github web에서 작업하기

1. 해당 repository → 설정 → pages

<img src="https://devchocho.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F94edc7c2-9066-4544-894d-9b9368b657c2%2F_2021-05-17__4.36.29.png?table=block&id=04e12fb8-cc69-4651-869a-ab461a02ad3a&spaceId=a07b9679-e55c-4b34-ad51-a4e7fac6c83a&width=2000&userId=&cache=v2" width="80%" height="30%">

2. 사용할 브랜치 설정하기

 <img src="https://devchocho.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fde4aac57-0b08-4f86-b9e4-f59b3c18b537%2F_2021-05-17__4.40.02.png?table=block&id=0812132b-bec6-452d-baf8-18b677286155&spaceId=a07b9679-e55c-4b34-ad51-a4e7fac6c83a&width=1470&userId=&cache=v2" width="80%" height="30%">
  <img src="https://devchocho.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8ad93f77-9d62-4725-ae76-f83f5f661326%2F_2021-05-17__4.41.33.png?table=block&id=97afd0ec-a454-4a53-98ca-d6a162328d02&spaceId=a07b9679-e55c-4b34-ad51-a4e7fac6c83a&width=2000&userId=&cache=v2" width="80%" height="30%">

3. 주소가 생성된것을 확인할수있다

[https://chochoq.github.io/pageTest/](https://chochoq.github.io/pageTest/)
 <img src="https://devchocho.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F12ab06de-c022-4da4-9bcf-21c01b5ddba8%2F_2021-05-17__4.43.40.png?table=block&id=06936659-fecc-4a9d-95e6-458c99c4fae1&spaceId=a07b9679-e55c-4b34-ad51-a4e7fac6c83a&width=2000&userId=&cache=v2" width="80%" height="30%">

4. code로 돌아가서 작성한 코드를 업로드합니다.

(작성한 코드가 있기때문에 저는 아래의 upload files로 하겟습니다)

5. 페이지로 만들어준 파일들을 모두 업로드해줍니다.

처음에 보여질 메인페이지의 이름은 반드시 index.html이여야 합니다.

6. 아까 확인했던 페이지주소로 들어가면 완료!

주소로 들어갔을때 리드미 페이지가 뜨거나, 혹은 https://chochoq.github.io/pageTest/index.html로 해야지 들어가는 경우가있다.
시간이 조금 걸리는 경우이니 조금만 기다려보자

완성~

---

vsc에서 작업하기 (React.js)

1. npm i gh-pages Install

**zsh**창에서 명령어를 넣어야 작동한다.

### 2. package.json로 들어가준다. - 아래쪽에 homepage url을 적어준다. ```jsx "homepage": "github page로 사용할 url" ``` - scripts에 아래 명령어를 추가한다. ```jsx "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "deploy": "gh-pages -d build", "predeploy": "npm run build" }, ``` ### 3. `npm run build`로 빌드를 해준다. ### 4. url에 호스팅이 완료가 됐는지 확인한다.

vscode로 작업하면 수정 후 빌드할 때 자동으로 페이지에 업로드되서 편하다.

---

2021년 08월 17일에 작성된 글입니다