생활코딩 - <Web> 18-2(실습내용) : 깃허브 웹 호스팅하기 직접 실습, 깃허브 404에러 페이지 해결하기, GitHub Web Hosting 404 Pages error solution, 깃헙 404 에러 났을때 방법, 깃허브 404 페이지 에러?!
생활코딩 <Web> 공부
18-2, 제가 직접 실습하는 과정을 포스팅 한 내용 입니다.
(생활코딩 19.1.1. 웹서버 설치 (윈도우) 강의 내용이 포함되어 있습니다.)
18-1 포스팅은 생화코딩 강의 내용 그대로를 정리해 놓았습니다.
https://github.com/
깃허브 사이트에 로그인한다.
이미 여러 차례 만들어 보고 또 만들어보고 수정해본 내역들이 있다..
처음 강의 내용 보고 시도했던 것들이 제대로 호스팅 되지 못하고 실패한 흔적들이다.
될 때까지 또 새로 계속해서 실습해본다.
새 리포지토리 만들기를 클릭해준다.
저장소 이름과 설정들이 나온다.
나는 gogo-ganji 라는 이름을 입력했다. 아무 뜻 없다.
공개할지 비공개할지 여부에는
퍼블릭(공개)에 체크한다.
아래 체크항목이 강의 내용과 조금 다르게 나와있다。
한국어 번역해보니 이렇게 나온다.
강의 내용대로 진행할 것이기 때문에 그냥 넘어간다.
저장소 생성 클릭
gogo-ganji 저장소 페이지가 생겼다.
업로딩 파일 링크를 클릭한다.
강의영상 내용과 같은 화면이다.
업로드 할 소스코드 파일들을 전부 드래그해서 옮겨주었다.
파일들이 업로드 중일때
아래 커밋에 메모를 남겨준 다음 초록색 Commit changes 버튼 클릭
나는 실습-1 이라고 메모했다.
로딩중
파일들이 성공적으로 업로드 되었다.
일단 톱니바퀴 아이콘의 Settings(설정) 버튼을 클릭한다.
설정 페이지의 왼쪽 카테코리에서
Pages 클릭
페이지 화면이 나오면
None - main 을 눌러준다.
요 상태에서
같은 깃허브 사이트를 하나 더 켜준다.
페이지가 켜진 깃허브탭과、 새로 킨 깃허브탭。
내 프로필을 누르고、 Your repositories 클릭
내가 호스팅 중인 gogo-ganji 가 목록에 뜰 것이다. 클릭.
아까 소스코드 파일을 올린 그 화면이 나올거다.
여기서
Actions 를 클릭
아무것도 없는 액션 페이지다.
다시 Pages 화면이 열린 깃허브탭을 열고
맨 오른쪽의 Save 버튼을 클릭
웹 호스팅이 활성화 진행을 시작했다.
다시 Actions 페이지가 열린 깃허브탭으로 넘어가서
페이지를 새로고침 하거나,
메뉴의 Actions 버튼을 다시 누르면 페이지가 새로고침된다.
화면이 바뀌면서 pages build and deployment 이라는 문구가 보인다. 클릭.
초록색은 활성화 진행이 완료된 것이고,
노란색이나 하얀색으로 뱅글뱅글 돌아가는 모습은 진행 중인 것이다.
나는 벌써 초록색 체크가 뜬 것으로 보아 완료되었음을 확인할 수 있었다.
이 박스들 중에 ｄｅｐｌｏｙ 박스에 나온
주소（내 도메인주소）를 클릭해보면
새 탭이 열리면서
내가 만든 웹 페이지, 웹사이트 화면이 열리는 걸 볼 수 있다.
Pages 가 열려있던 깃허브탭에서
Pages 를 다시 눌러보면, 화면이 새로고침 되면서
내 도메인 주소가 위에 파란 링크가 걸리며 나타난다.
저 도메인 주소 링크를 클릭하면
똑같이 내 사이트가 열리는 것을 확인할 수 있다.
깃허브 404에러 뜰 때 해결하기, 깃허브 404 에러 방법 찾기
처음 파일을 업로드하여 호스팅을 시도했을 때,
웹 페이지가 열리지 않고 404 에러가 떴었다.
그때부터 온갖 방법들을 찾아보고 검색하고.... 헤매이는 과정이 있었는데
내가 실수했던 것들을 여기 적어보겠다.
첫 번째로
모든 파일 이름 뒤에 index.html 이라고 적어놨던 것이다.!!!ㅜㅜ
지금 위 캡쳐사진에 보이는 파일들은 파일이름 그대로 잘 적혀져 있지만
수정하기 전에는 전부
index.html
vlog.html
yutube.html (이와중에 youtube 라고 적을것이 yutube라고 오입력되어있다..ㅋ)
이런식으로 파일명 뒤에 html 을 또 중복으로 적어놨던 것이다ㅠ
이유인 즉슨,
Atom(아톰) 코드 편집프로그램에서는 분명
이런식으로 뒤에 html 이 붙어져 있었는데
폴더를 열어서 파일을 확인해보니 뒤에 html이 없길래
엥? 하고
바보같이 또 파일 이름 수정하기를 통해 일일이 html을 적어준 나.... (안돼..///..)
두 번째는
이렇게 저장소 이름을 입력할 때
myweb,1 이라고 입력하니
아래 노란색 박스로 myweb-1 이라고 적으라는 박스가 뜬다.
기호 - 를 포함하여 적는건 괜찮은데
다른 이상한걸 입력해도 안되는 듯 하다. (내생각)
세 번째는
이렇게 업로드까지 다 하고나서
이 Pages 화면에서의 main 으로 설정해줬는지,
Save 버튼을 클릭한 뒤에
액션 페이지로 가서 새로고침 한 뒤에 활성화가 잘 진행되고 있는지, 완료되었는지,
이 도메인 주소가 안열린다면
https://깃허브로그인아이디.github.io/저장소이름/
-> https://깃허브로그인아이디.github.io/저장소이름/index.html <-이렇게 index.html을 입력해준 뒤에도
안열리는지 확인해봐야한다.
나는 처음에 index.html을 붙였더니 열렸었는데
신나서 여러번 열어재끼고 하다가,
내가 또 뭘 수정하고 건드리다보니.... 또 안열리는 것이다 ㅠㅠ
네 번째는
생활코딩 강의 중에 비트나미(Bitnami)라는,
가상 어플라이언스 및 웹 애플리케이션, 개발 스택용 소프트웨어 패키지 및 설치 라이브러리가 있다.
WAMP(Windows/Apache/MySQL/PHP)
윈도우 환경에서 아파치(Server), MySQL(DB), PHP(서버사이드)와 같은 웹 개발환경을 통합적으로 구축해주는 프로그램
MAMP(Mac/Apache/MySQL/PHP)
맥 환경에서 아파치(Server), MySQL(DB), PHP(서버사이드)와 같은 웹 개발환경을 통합적으로 구축해주는 프로그램
-https://computer-science-student.tistory.com/390 출처_컴공생의 다이어리 컴공 K 님의 포스팅에서-
여튼 비트나미 라는 프로그램을 설치해서 내 웹 사이트가 열리게 하는건데,
<생활코딩 19.1.1. 웹서버 설치편 참고_나는 윈도우라서 윈도우 편을 보았다>
https://bitnami.com/stack/wamp/installer (WAMP 설치) -> 윈도우
https://bitnami.com/stack/mamp (MAMP 설치) -> 맥
여기서 나는 윈도우 이용자이기 때문에
https://bitnami.com/stack/wamp/installer (WAMP 설치) 로 들어가면
비트나미 메인 홈페이지가 나올 것이다.
https://aboneu.tistory.com/243
설치과정은。。。。。위 링크의 설명을 따라 설치하길 바란다.
또는
윈도우 용 비트나미 설치 영상
https://youtu.be/Bvzzee7-kuQ?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb
맥 용 비트나미 설치영상
https://youtu.be/roETNgQf3x8?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb
생활코딩 이고잉 선생님의 강의를 따라 설치해도 좋다.
--
--
설치가 다 되었다면
내 PC > 로컬 디스크(C:) > Bitnami(비트나미) 폴더 클릭
나는 wampatack-8.1 .9-0 이라고 나오는데
여튼 비트나미 안에 있는 다음 폴더인 이걸 클릭
apache2 폴더 클릭 (아파치)
htdocs 폴더 클릭
들어가면 원래 이 폴더 안에 있던 파일들이 있을텐데, 그걸 다 지우고
내 소스코드 파일들을 복사(Ctrl+c)해서 이 파일 안에 붙여넣기(Ctrl+v) 해준다.
(캡쳐사진은 내 소스코드 파일들을 htdocs 폴더 안에 붙여넣기 한 모습)
끝으로
그런 다음 깃허브 사이트에서 다시 시도해보니
내가 만든 페이지가 열리는 것을 볼 수 있었다!
GitHub에서 웹호스팅 중 404 에러가 뜨면서 내 페이지가 나오지 않을때...
내가 만든 사이트가 계속되는 404 에러 페이지로 인내심을 박살내려 할때..!!!
수많은 시도끝에 비트나미에 파일을 붙여넣기 하고 난 후
다시 새로 도메인 저장소를 만들고 수정된 파일을 업로드 하고 호스팅하다보니 되었다.
(참고로 소스코드를 수정해서 업로드 하는 중이라면 수정된 그 소스코드 파일을 복사해서
비트나미의 htdocs 폴더 안에 또 붙여넣기 해서 바꿔줘야 한다.,)
