본문 바로가기
☠️ 트러블슈팅

GitHub로 HTML 업로드부터 삭제, Pages 배포와 404에러 대처

by 슬용이 2022. 1. 6.

 

2020-01-06
웹호스팅 (GitHub Pages)

 

1. 깃허브에서 New repository 생성하기

깃허브 상단의 내 사진 옆에 보면 + 아이콘이 있다.

그걸 클릭하면 드롭다운 메뉴가 나오는데 그 중에서 New repository를 선택해 준다.

 

2. Repository 내용 입력하고 만들기

Owner는 나로 자동 선택되어 있고, Repository name은 비어있으니 꼭 써주도록 하자.

Initialize this reposityory with: 은 옵션이다. 선택하지 않아도 Repository는 생성할 수 있다.

하지만 Add a README file을 선택하여야 마음대로 파일을 업로드 할 수 있으니 선택하자.

 

3. 파일 올리기

파일에 대한 설명이 있다면 입력 후, Commit directly to the main brach. 에 체크가 되어있는지 확인!

Repository를 생성하고 나면 이런 화면이 뜨는데 파일을 끌여다 올려놓거나

choose your files를 누르면 파일을 업로드할 수 있게끔 되어 있다.

업로드를 원하는 파일을 올리도록 하자.

 

4. Settings > Pages 로 이동

내가 올린 HTML 배포를 위해서는 SettingsPages로 이동을 해야한다.

SettingsRepository화면의 제일 우측 상단에 있고, Pages는 좌측 메뉴 하단에 위치하고 있다.

 

5. Source의 Branch를 main, Folder를 /(root)으로 변경

Pages 메뉴에 들어오게 되면 화면 중앙쯤, Source항목이 있다.

이 화면에서 None을 누르면 선택가능한 Branch가 나오는데 여기서 main을 선택해주자.

우측의 Folder 선택 메뉴에서는 /(root)를 선택하면 된다.

 

6. Save를 누르면 완료! 상단에 링크가 뜬다.

5.의 작업을 완료하고, Save를 누르게 되면 체크표시와 함께 ✅Your site is published at url 이 뜬다.

배포되기 까지는 어느정도 시간이 걸리니 바로 안된다고 조급해하지말고 화장실 한 번 갔다와주자.

 


+ 404 에러 대처

💡 결론 먼저 얘기하자면, 배포되기까지 시간이 좀 걸리니 먼저 기다려볼 것. 그리고 링크 뒤에 파일명을 붙여볼 것!

 

부푼 마음을 안고 링크를 눌렀는데~~ 🥲

 

처음엔 Index 파일이 제일 상단이 아니면 안 된다고 해서

1,2,3,4 파일을 모두 지우고 Index 파일만 남겨놨었다.

깃허브에서 파일 지우는 법은 아래와 같다

 

1. Index 파일만 남겨보기

1) Settings > Options 아래로 쭉쭉 스크롤을 내린다.

 

 

2) Danger Zone의 Delete Repository 선택

 

 

3) 확인창에 삭제하려는 Repository이름을 적고 활성화 된 버튼을 누르면 삭제완료!

 

 

하지만... 그래도 해결되지 않는 404... 😭

밤 12시가 넘어가고 있는데도 해결이 되지 않아서 너무 짜증나고 힘들었다.

 

 


2. 링크 뒤에 업로드한 파일명 붙여보기

https://devseulgi.github.io/web1/Index.html

이번엔 Url 에서 내가 업로드한 파일명을 제일 끝에 붙여주었다.

Index.html이 추가한 부분이다.

 

드디어 열리구나.. ㅠㅠ

드디어 열렸다..!

제대로 확인이 되는 것을 보고 앞서 지웠던 다른 html도 같이 올려주었다.

방법은 동일하게 하고, 올리고나서 화장실 한 번 갔다왔더니 추가로 올린 다른 html들도 정상적으로 열린다!

 

 

이게 뭐라고 이렇게 기쁠일인가? 😁

안되는 것이 있다면 포기하지말고 계속 구글링해보자! 답은 있다!

야호~

'☠️ 트러블슈팅' 카테고리의 다른 글

NPM Capital letters 설치 오류  (0) 2022.05.16

댓글