Github Page 배포하기 : root에 index.html이 없는 경우 (1)

Programming/Basics
enerG enerG Jan, 2024
Table of Contents
  1. 1. gh-pages 브랜치 생성
  2. 2. public 디렉토리의 내용 이동
  3. 3. 변경 사항 커밋 및 gh-pages 브랜치에 푸시
  4. 4. GitHub Pages 설정 변경
  5. 5. GitHub Pages 배포 확인

GitHub Pages를 활용하여 프로젝트를 웹에 호스팅할 때, root에 index.html이 없는 경우 404 오류 또는 README.md 파일이 첫 화면으로 뜨게 됩니다. 이런 경우, 기존 프로젝트 구조를 변경하지 않으면서도 gh-pages 브랜치를 만들고 public 디렉토리의 내용을 해당 브랜치의 루트로 이동할 수 있습니다.

1. gh-pages 브랜치 생성

로컬 저장소에서 새로운 브랜치를 생성합니다.

git checkout -b gh-pages

git checkout -b <branch-name> 명령은 Git에서 새로운 브랜치를 생성하고 해당 브랜치로 전환하는 명령입니다. 여기서 -b 옵션은 새로운 브랜치를 생성하겠다는 것을 나타내며, <branch-name>은 새로운 브랜치의 이름을 지정하는 부분입니다.

따라서 gh-pages 브랜치를 새로 생성한 후, 현재 작업 중인 브랜치로 설정됩니다.

2. public 디렉토리의 내용 이동

public 디렉토리의 내용을 gh-pages 브랜치의 루트 디렉토리로 이동합니다.

git checkout master  # 다시 master 브랜치로 전환
cp -r public/* .     # public 디렉토리의 파일을 현재 디렉토리로 복사
git add .            # 변경된 파일을 스테이징
git commit -m "Add website files from public directory"  # 커밋
git push origin gh-pages  # gh-pages 브랜치로 푸시

위의 명령을 실행하면 gh-pages 브랜치에 웹사이트 파일이 복사되고, 해당 브랜치로 푸시됩니다.

3. 변경 사항 커밋 및 gh-pages 브랜치에 푸시

  • 모든 변경 사항을 커밋합니다. 예: git commit -am "GitHub Pages 배포를 위한 준비"
  • 변경 사항을 gh-pages 브랜치로 푸시합니다. 예: git push origin gh-pages

4. GitHub Pages 설정 변경

  • GitHub에서 프로젝트 저장소로 이동합니다.
  • "Settings" > "Pages" 섹션으로 이동합니다.
  • "Source"에서 gh-pages 브랜치를 선택합니다. root로 설정되어 있는 채로 save 합니다.

5. GitHub Pages 배포 확인

  • 설정이 완료되면 GitHub Pages 섹션에 표시되는 URL을 통해 웹사이트에 접근할 수 있습니다. 이 URL은 일반적으로 https://<username>.github.io/<repository-name>/ 형식입니다.
  • 변경 사항이 적용되는 데 몇 분 정도 소요될 수 있습니다.

이 방법을 사용하면 GitHub Pages를 통해 웹사이트를 호스팅하면서 기존의 프로젝트 구조를 변경하지 않아도 됩니다.

하지만 이 방법은 너무 번거로웠고 자동화할 방법을 찾다가 github actions에 도달하게 됩니다.. 다음 글에 계속

 

Github Page 배포하기 : root에 index.html이 없는 경우 (2) GitHub Actions

이전 글에서 알아보았던 다소 번거로웠던 과정을, GitHub Actions를 사용하여 자동화하는 과정을 정리합니다. Github Page 배포하기 : root에 index.html이 없는 경우 (1) GitHub Pages를 활용하여 프로젝트를 웹

energneer.tistory.com

 

  • 1. gh-pages 브랜치 생성
  • 2. public 디렉토리의 내용 이동
  • 3. 변경 사항 커밋 및 gh-pages 브랜치에 푸시
  • 4. GitHub Pages 설정 변경
  • 5. GitHub Pages 배포 확인
𝒆𝒏𝒆𝒓𝗚
에너지 넘치는 엔지니어⚡ 읽고 쓰고 정리하는 것을 좋아합니다.
Programming/Basics 카테고리의 다른 글
  • Bash 스크립트 실행 시 올바른 경로를 입력했음에도 오류 메시지가 뜨는 문제
  • Github Page 배포하기 : root에 index.html이 없는 경우 (2) GitHub Actions
  • ReferenceError: module is not defined in ES module scope
  • tailwindCSS 설치와 실행으로 알아보는 npm, npx
enerG
enerGneer⚡
  • All Article 174
    • Programming 81
      • Basics 9
      • Front-end 20
      • Back-end 8
      • Git 13
      • Java 10
      • C 6
      • Python 3
      • IDE 4
      • VBA 8
    • Computer Science 22
      • Basics 4
      • Algorithm 3
      • Data Structure 2
      • Database, SQL 6
      • Operating System 3
      • Network 4
    • Software Engineering 16
      • SDLC 13
      • Study Notes 3
    • Project Record 15
      • Project 3
      • Customize Tistory 12
    • Review 27
    • Self-Growth 8
    • in JAPAN 1
    • ETC 4
hELLO · Designed By 정상우
Icon Made By Freepik · Flaticon
Redesigned By enerG
Github Page 배포하기 : root에 index.html이 없는 경우 (1)

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.