웹개발 스터디 : 5화 - 깃허브로 사이트 런칭하기
GitHub서비스를 통해 무료호스팅으로 사이트를 런칭해보자
기본 웹개발 관련 상식을 검증하고, 웹개발 입문자들을 위한 자료용 문서입니다. 추후 부트스트랩과 워드프레스, 자바스크립트 프레임워크 등으로 연결되는 문서가 될 예정입니다.
문서 목록
1화 : https://brunch.co.kr/@clay1987/156
2화 : https://brunch.co.kr/@clay1987/157
3화 : https://brunch.co.kr/@clay1987/158
4화 : https://brunch.co.kr/@clay1987/159
5화 : https://brunch.co.kr/@clay1987/160
웹 호스팅이란?
HTML 파일을 통해 웹사이트를 만들었다 하더라도. 해당 사이트가 실제로 동작하려면, 호스팅을 통해 실제 웹사이트를 런칭해야한다. 만약 이 부분에 대해서 이해가 가지 않는 사람이 있다면 일단, 다음 문서를 확인해보길 바란다.
https://brunch.co.kr/@clay1987/83
내가 만든 사이트를 온라인에 올려보자
Github 호스팅으로 웹사이트 런칭하기
이 글에서는 깃허브를 통해서 무료 호스팅을 사용해 - 사이트를 런칭하는 과정을 이야기할 예정이다. .
깃허브의 회원가입은 상당히 간단하다. 이메일과 아이디. 암호만 입력하면 - 바로 다음단계로 넘어갈 수 있다.
이후에 간단한 이미지 구분을 통한 로봇 테스트를 하고
깃허브 무료 사용 플랜을 선택하면 된다.
이후에는 이메일 검증을 위해 메일함을 확인해서
도착한 메일에 '검증확인' 버튼을 눌러주면 된다.
자, 이제 깃허브 계정이 만들어졌다. 본격적으로 호스팅 서비스를 사용해보도록 하자.
우측상단에 있는 + 버튼을 누르게되면 . 해당 위치에서 New Repository를 만들어보자.
신규 프로젝트 폴더를 만든다는 느낌으로 - 이름을 결정하고. 간단하게 설명을 넣어주자.
이후에 Initilize this Repository with README - 라는 부분을 꼭 체크해주자. 이 기능이 있어야 웹상에 올라가는 내용들을 복사하여 - 내 컴퓨터로 바로 가져올 수 있다.
정상적으로 프로젝트 폴더가 만들어지면, 기존에 만들었던 HTML 파일을 이곳에 올려서 - 간단한 웹페이지 호스팅 용도로 사용할 수가 있다.
HTML 파일 업로드
만들어진 Repository 폴더에는. 사이트에서 사용할 파일들을 직접 올려줄 수 있다. 이때 개별 파일을 업로드할 경우, 관련 내용들이 어떤 용도인지. 어떤 기능을 하는지 등을 써주면 더 좋다.
파일 업로드 이후에 우측 상단의 설정 탭으로 이동해서
하단의 GitHub Pages 영역으로 이동해서, Source 부분을 마스터 브랜치로 변경해줘야한다.
제대로 설정이 되었다면, 깃허브에서 고유한 주소를 가진 사이트가 생성될것이다.
이후에는 별도의 html 파일명을 주소에 넣어주면 - 일반인들에게도 공개되는 예제 사이트가 완성된다.
예시
https://replus1541.github.io/test/index.html
이후에는 폴더를 만들고, 업로드만 해줘도 - 해당 주소를 그대로 온라인에 공개할 수 있다. 고용량의 사이트를 운영하기에는 무리가 있겠지만, 일단 기본적인 틀에서 무료 호스팅을 간편하게 사용할 수 있고. 버전관리가 된다는 점에서 의미가 있는 작업이다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
