깃허브로 나만의 웹 사이트 만들기
10분만 투자하면 만들 수 있는 웹
pdf 포트폴리오를 제작하다 보면 변화하는 세상 흐름에 맞춰 웹 포트폴리오를 만들어야 할 것 같다는 생각이 들 때가 있다. 정말 만들고 싶다!! 아주 격렬하게..!!
근데 어떻게 만들지? 서버? 도메인? 응응 그래 포기할게.
이런 사람을 위해 간단하게 정리해 본 깃허브로 웹사이트 만드는 방법이다. 깃허브는 허브 역할만 하기 때문에 정확히 말하자면 이 글에서는 깃허브에 새로운 레퍼지토리를 만들고, 도메인을 연결하는 작업을 할 것이다. 이전 웹 포트폴리오는 AWS 라이트 세일(Lightsail)을 통해 워드프레스로 만들었었는데, 해지하고 깃허브로 옮기는 김에 글을 작성한다.
1. 깃허브 가입
호랑이를 잡으려면 호랑이 굴에 들어가야 한다.
코알못(코딩 모르는 사람)에게는 두려운 사이트... 깃허브에 가입한다.
2. 새로운 리퍼지토리(Repository) 생성
로그인 후 링크에 들어가면 상단과 같은 페이지가 등장한다.
빠르게! 사진과 같은 상태로 만들고 'Create repository' 버튼을 누른다.
Repository name
: 사용자이름(Owner에 쓰여 있는 이름).github.io
Public
: 공개할 거니까 퍼블릭 상태로 만든다.(나중에 setting 페이지에서 수정 가능)
3. 홈페이지 파일 업로드
만들어진 리퍼지토리에 홈페이지 파일을 올린다.
물론 처음엔 아무 파일도 없으니까 하단의 index.html 파일을 업로드한다.
'hello world'가 출력되는.. 아무것도 없는 html 파일이다.
녹색 commit change 버튼을 눌러 업로드한다.
4. Settings 에서 GitHub Pages 수정
설정 메뉴를 클릭하고 스크롤을 내리다 보면 GitHub Pages를 찾을 수 있다.
Check it out here!을 눌러 들어가면 하단과 같은 페이지가 등장한다.
먼저 Source 메뉴에서 Branch를 main으로 설정하고 Save한다.
Theme Chooser 메뉴에서는 테마를 바꿀 수 있다.
5. 완성!
https://사용자이름.github.io 로 들어갔을 때 hello world가 나온다면 성공이다.
인터넷 세상에 나만의 웹 사이트가 개설되었다! 이제 html 파일을 이용해 웹을 제작해야 하지만 그런 사소한 문제는 나중에 생각하자
- 여기서부터는 옵션! -
[깃허브 주소에 도메인 연결하기]
만약 고대디나 카페 24 같은 호스팅 사이트에서 도메인을 구입한 경우, 깃허브 페이지를 도메인에 연결해야 한다.
1) 도메인 사이트에서 DNS 추가/변경
모든 도메인 네임서버에서는 도메인을 특정 IP 주소로 연결하는 기능이 있다. 고대디를 기준으로 설명하면, 관리 페이지의 DNS 버튼을 눌러 확인할 수 있다.
DNS 페이지에서 깃허브 IP 주소를 연결한다. 깃허브 페이지의 IP 주소는 다음과 같다. 이 중 하나를 선택하여 추가한다. CNAME 레코드는 사용자이름.github.io로 연결해 준다. (사진 참고)
(@는 www와 같다)
Github Pages의 IP 주소
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
2) 깃허브의 Settings/GitHub Pages로 돌아와 Custom domain에 도메인 연결
Custom domain에 나의 도메인 주소를 연결한다. 만약 오류가 뜨면서 연결이 되지 않는다면, 잠시 기다렸다가 다시 시도해보는 것을 추천한다.(DNS 연결이 느려서 그럴 수 있음)
Enforce HTTPS를 누르면 https를 무조건 사용하게 만든다. (물론 계정명.github.io url을 사용하면 https 상태가 디폴트이다.)
3) 도메인 주소 확인
연결한 도메인이 published 되었다는 알림이 뜬다면 성공적으로 연결이 되었다! 도메인 주소를 입력해서 hello world가 뜨는지 확인해보자.
