# gh-pages

51개의 포스트
post-thumbnail

[TIL] Github Pages 배포 언제 되는지 알아보자!

🌐 Github Pages Github Pages는 Github에서 기본으로 제공하는 무료 정적 웹 호스팅 서비스이다. `Public`으로 설정한 모든 레포지토리에서 사용 가능한 서비스이다. 이 서비스를 사용하면 으로 접속가능한 웹 페이지가 생긴다! 자세한 것은 링크 참고 Github Pages는 다 좋은데 반영 속도에 시간이 걸린다는 단점이 있다. 그리고.. 적어도 지금까지는 반영 시간이 정확히 얼마나 걸리는지를 알지 못했다. ⚡️ 반영 시간을 알아보자! Github Pages 서비스가 켜져있는 레포지토리에 새로운 코드를 Push하면 자체적으로 설정된 Github Action이 돌아가게 된다! 따로 Actions 설정을 하지 않아도

2023년 8월 20일
·
0개의 댓글
·
post-thumbnail

gh-pages가 SPA를 지원하지 않아 404페이지가 뜰 때

문제 상황 포트폴리오를 create-react-app으로 만들어서 gh-pages에 배포했는데 루트 페이지에서 버튼을 클릭하여 링크이동을 하면 제대로 작동했지만 직접 이동할 url을 창에 입력하여 이동하면 404페이지가 보였다. 문제 원인 Github Pages에서는 SPA를 지원하지 않는다고 한다. 그래서 기본 URL이 example.site/ 인 경우 example.site/page 와 같은 경로로 직접 이동하거나 새로고침 할 경우 에러가 난다. 해결방법 폭풍🌪 구글링 끝에 아래와 같은 두 가지 방법을 찾았다. 1. BrowerRouter 대신 HashRouter를 사용한다. 이 방법을 선택하여 HashRouter로 바꿔보았지만 제대로 작동하지 않았다... 버전

2023년 8월 5일
·
0개의 댓글
·
post-thumbnail

github 배포하기

gh-pages package.json 수정 배포하기 github 해당 repogitory의 setting > Pages의 Branch 설정

2023년 7월 12일
·
0개의 댓글
·
post-thumbnail

결과물을 github에 올리는 나이스한 패키지

출처 : 노마드코더 리액트 뮤비앱 강의 github에서 제공하는 무료 서비스인 github pages에 결과물을 올릴 수 있게 도와주는 패키지이다. 니꼬쌤 강의를 듣다가 이건 정리해야겠다 싶어서 올린다. 1. gh-pages 패키지 설치 > npm i gh-pages 2. build 실행 package.json에 scripts에서 build 확인 > npm run build 위 명령어를 실행하면 압축된 코드가 들어있는 'build'라는 파일이 생긴다. 3. package.json 수정하기 a. 마지막줄에 와서 아래와 같이 적어준다. ![](https:/

2023년 6월 14일
·
0개의 댓글
·

깃허브 페이지에서 상세 페이지로 안 가지는 문제

결론부터 말하자면 애매하게 해결 위의 url로 상세페이지로 가는 기능을 구현했다 로컬에서는 문제 없이 동작했는데 깃허브 페이지에 올리니 안 돌아감... 깃허브 페이지는 https://유저 아이디/레포 이름 으로 만들어진다 상세 페이지는 당연히 https://유저 아이디/레포 이름/detail.html일 줄 알았는데... https://유저 아이디/detail.html 이렇게 넘어갔다 아니 이유가 뭐야..? 그래서 머쓱하게 404를 만나고... 상세페이지로 넘어가는 링크를 바꿨다 저렇게 해놓으면 로컬에서는 안돌아가니 주석 참고 코드를 바꿨더니 이제 css가 안불러와진다.....ㅎ.. 경로문제인듯하여 html에서 불러오는 모든 경로를 수정했다 더 자세한 경로 이야기는 [이 블로그를 참고하면 좋을 것 같다](https://velog.io/@yoosion

2023년 6월 9일
·
0개의 댓글
·
post-thumbnail

gh-pages로 React App 배포하기

참고자료: gh-pages로 내 React 웹사이트 배포하기 [React] react-router 적용한 React 앱을 github pages로 배포하는 법 이전에 React학습을 위해 진행했던 프로젝트를 그냥 방치하기엔 아까워서 마무리로 배포랑 파일이라도 작성하기 위해 다시 꺼냈다. 중요한 프로젝트는 아니여서 가볍게 배포할 수 있는 를 사용했다. > 해당 프로젝트는 CRA를 사용해서 생성된 React + TypeScript 프로젝트입니다. gh-pages Github Pa

2023년 5월 10일
·
0개의 댓글
·
post-thumbnail

gh-pages로 배포하기

gh-pages로 배포하는 방법과 배포 중에 겪은 에러를 적어보려한다. 먼저 gh-pages로 배포하는 방법은 아래와 같다. 터미널에서 gh-pages 라이브러리를 설치해준다. package.json파일 script에 deploy와 predeploy를 추가해준다. package.json파일 맨 밑에 homepage를 추가해준다. "https:// [github id] .github.io/ [레파지토리명] "으로 적어주면 된다. predeploy는 deploy를 실행시킬때 자동으로 그 이전에 빌드를 도와주는 키다. 터미널에 npm run deploy를 치면 배포가 실행된다. 배포를 한 뒤에 페이지를 확인해보니 메인과 링크들이 정상적으로 작동되지않았다. 알고보니 경로를 읽지 못하는 에러였다. 솔루션은

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

[Portfolio] React + GitHub Pages Settings - GitHub Pages와 React로 나만의 포트폴리오 사이트 만들기

💎 들어가며 바야흐로 개발 경력 만 3년차가 되가는 이시점, 포토폴리오 사이트 개발은 제 오랜 숙원이었습니다. 그것도 포토폴리오 템플릿 들을 전혀안쓰고 모든 UI를 처음부터 쌩 개발하는 것! 매일 생각만 하고 입으로만 뱉어왔던 일을 이루기 위해 기술을 선택하고, 손을 움직이기 시작했더니 역시 시작이 반이라구, 페이지 개발을 하면서 블로그 포스팅까지 쓸 정도로 진심이 되어버렸습니다! 우선 이 포스팅을 통해 개발&배포 환경을 구축해보세요! 😊 풀스택 개발자라기엔 부끄럽지만, 저는 React 프로젝트 개발 경험이 없습니다. (정확히 말하면 프론트엔드 프레임워크 개발경험이죠. React 소스가 예쁘지 않아도 양해부탁해요!🫡 피드백 주셔도 너무 좋구요~ 사실 웹페이지는 css가 거의 전부인건 비밀ㅎ) 그럼에도 React로 개발하는 것이 많은 이점이 있기 때문에 React 바탕으로 개발해보고자 합니다. 도전!🙌 <br

2023년 4월 13일
·
0개의 댓글
·
post-thumbnail

[deploy] gh-pages push 안되는 오류

오류 사항 : `gh-pages 를 통해서 react 앱 배포간 gh-pages` branch에 push가 안되는 오류 나만 걸린 오류 같다. 혹시나 같은 오류를 만나거나 내가 또 이걸 만난다면 알아보기 위해 적는다.. 왜 나에게만 이런 일이 시도한 해결 방안 1. gh-pages 재설치 후 commit & push (추천 : 💩) gh-pages 설치 후 국룰로 설정하는 `package.json` 내부에 적는 것이다. 따라서 프로젝트를 빌드 & 배포 전 실시하여 재설치 한 후 빌드 & 배포를 실시하는 방법이다. 애석하게도 이 방법은 쓰레기다. 달라지는 것 하나 없음 2. gh-pages 유기 Vercel 배포 (추천 : ⭐️⭐️) 하 이 방법도 도망치는 것 같아서 하기 싫었지만 vercel로 배포한 경험이 정말 좋았기 때문에 이 방법을 사용했다. 하지만? ``CRA로 만든 React 프로젝

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

vue3+vite 프로젝트 gh-pages패키지로 배포시 404 NOT FOUND

문제 vue3 + vite 프로젝트를 구성했다. 이후 배포할 곳으로 Github Pages를 정했고, 배포도구로 노드 패키지 gh-pages를 정했다. gh-pages -D dist 로 깃허브쪽으로 배포를 했으나 아래와 같이 번들된 js, css를 불러오지 못했다. 배포된 페이지 URL은 https://strong-trash.github.io/conimmuty-frontend/였다. 자세히보면 /conimmuty-frontend/assets/~로 요청해야 하는데 중간 경로 하나를 빼먹고 /assets/~로 요청한 것을 확인할 수 있다. 빼먹은 중간 경로를 잘 넣도록 설정해야 한다. ![](https://velog.velcdn.com/images/yiwonjin/post/ed35d12

2023년 2월 19일
·
0개의 댓글
·
post-thumbnail

React 프로젝트 github pages로 배포하기(gh-pages 사용)

github pages로 gh-pages 패키지를 사용하는 방법과 사용하지 않는 방법 두 가지가 있다. 여기서는 사용하는 방법에 대해 정리를 해놓을 것이다. 🚨 배포 주의사항 배포하는 저장소가 public인지 가장 최신의 상태를 배포 즉, 배포 후 수정사항이 생기면 커밋후 push하고 다시 배포하기 준비 1. package.json에 "homepage": "https://본인계정.github.io/저장소명" 추가 2. react-router 라이브러리를 사용중이면 BrowserRouter에 basename 속성추가 3. gh-pages 패키지 install > npm i gh-pages --save-dev 4. packgage.json의 "scripts"에 추가하기 5. build파일 생성과 배포하기 > npm run deploy (build 생성과 배포를 한 번에 해준다)

2023년 2월 10일
·
0개의 댓글
·
post-thumbnail

github pages 환경변수 설정하기

pages 배포시 환경변수 설정 1. 설정 > environments 2. Environment variables 아래로 스크롤 하단에 "Add variable" 클릭 후, 환경변수 등록

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

[Tips/Github] Github Pages(깃허브 페이지)로 배포하기(gh-pages)

📖Github Pages(깃허브 페이지)란? 무료 티어 사용자가 퍼블릭 레포지토리에서 무료로 호스팅을 이용할 수 있는 서비스 (Pro 티어 사용자는 private 레포지토리에서도 사용 가능) HTML/CSS/JavaScript로 구성된 파일을 구동하고 배포해 Static 웹 사이트를 호스팅 할 수 있게 해주는 서비스 기본적으로 github.io라는 도메인을 사용하게 됨 (커스텀 도메인도 사용 가능) 📚공식문서 : https://docs.github.com/en/pages/getting-started-with-github-pages 💎Github Pages(깃허브 페이지) 만들기 ※ 아래에 깃허브페이지를 만들고 배포하기 위한 방법을 순서대로 게시해놨는데, 우선 깃허브페이지를 제작하기 전에 index.js

2023년 1월 16일
·
0개의 댓글
·

gh-pages 시작하기!

gh-pages 에 대한 기록. 장점은 배포가 빠르다는 것이고, 단점은 잘 모르겠다! 🫡 준비는 git 원격저장소 - 로컬저장소 repo 가 필요한 것 같고, 내용이 있어야하나? public이어야하나? 그런듯 나는 그랬음 ㅠㅠ 시작하기 설정하기 `package.json` 추가 내용 상관있는지 모르지만! push 해두기? 끝! `Published!` 이거 보이면 성공임!

2023년 1월 14일
·
0개의 댓글
·

포트폴리오 배포 자동화

(준비중) 참고사이트 - https://velog.io/@kdeun1/Github-Actions%EB%A1%9C-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

[react] github pages 배포 에러

리액트 프로젝트를 깃허브 페이지로 배포했는데 계속 빈화면만 뜨는 현상 지금 시간은 새벽 세시.. 이 늦은 시간에 별안간 인내심 테스트중 콘솔창을 보니까 두가지 에러가 뜬다 1. Syntax error > Manifest: Line: 1, column: 1, Syntax error. https://feb-dain.github.io/error-about-react-01/ 블로그 참고해서 쉽게 해결함. index.html에서 ` 를 ` 으로 고쳐주면 됨 2. net::ERR_ABORTED 404 > https://ohy9205.github.io/github.io/monthly-bank/stati

2022년 12월 31일
·
0개의 댓글
·

# gh pages

📌 gh-pages : 결과물을 github pages에 업로드할 수 있는 기능. 방법 gh-pages 설치 최적화 페이지 주소 만들기 package.json 파일 하단에 아래 문구 추가 (git remote -v 로 리포지토리 이름 확인할 수 있음.) deploy, predeploy deploy 역할 : gh-pages 를 실행시킴 package.json 파일의 "scripts" 부분에 아래 문구 추가 deploy 실행 정해놓은 주소 검색하기 아래 화면이 뜨면 당황하지 않기! -> 시간이 5분 정도 소요되므로 기다려준다. + 에러 gh pages를 만들던 중 페이지가 보이지 않고 아래와 같은 오

2022년 12월 30일
·
0개의 댓글
·

React 배포 빈화면

깃헙 페이지를 통해 배포할 때 배포한 후 빈화면이 뜰 경우 다음을 한번 확인해보자 packages.json 파일 내 정확하게 넣었는지 내가 한 실수 packages.json 에 "homepage" : 내용을 다른 괄호 안에 넣음 >맨 아래에 있는 괄호 위에 ","를 넣고 붙여넣자,,, 주소에 깃헙 레파지토리 주소 넣음 >-> 보여지는 페이지 주소 넣어야함. "homepage": "https://본인아이디.github.io/레파지토리명 주소에 공백 넣음

2022년 12월 19일
·
0개의 댓글
·
post-thumbnail

gh-pages 배포 시, 빈 화면만 나오는 문제 해결하기..

문제발생 react-router-dom을 사용한 리액트 프로젝트가 gh-pages 배포 후, 사진과 같이 텅 빈 화면만 나온다면? 콘솔창을 보면 이런 에러가 있을 것이다. Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort' 문제수정 react-router-dom이 컴포넌트로 감싸고 있는 App.js에서 path를 수정만 하면 간단하게 해결 가능하다. Before After ![](https://

2022년 11월 12일
·
0개의 댓글
·
post-thumbnail

react 프로젝트를 gitHub에 배포하자.. (feat. gh-pages)

🙋🏻‍♂️ Next.js로 만들어진 프로젝트 배포는 여기로 Step 1 우선 배포 할 프로젝트 안에 npm i gh-pages 를 쳐서 gh-pages를 설치한다. Step 2 package.json을 보면 아래와 같은 스크립트들 명령어가 있다. 이중에서 build를 실행하면, 우리가 만든 웹사이트에 production ready code를 생성하는데, 여기서 production ready란 코드가 압축되고, 모든것

2022년 11월 12일
·
0개의 댓글
·