[HTML] 깃허브 페이지에 기본 도메인을 연결하는 방법

깃허브를 이용하면 무료로 홈페이지를 만들 수 있습니다. 500Mb 저장 공간과 월 1Gb의 트래픽을 얻을 수 있습니다. 단일 파일은 최대 100Mb까지 허용합니다.

구글 포토와 깃허브를 이용하면 월 1Gb 트래픽으로도 충분히 멋진 홈페이지를 만들 수 있습니다.

Pages 만드는 방법

로그인을 했고 Pages를 만들지 않았다면 메인화면 오른쪽에 'Create repository' 버튼이 보일텐데, 이 버튼을 클릭합니다.

Pages를 접속할 수 있는 다른 방법으로는 상단 오른쪽에 있는 아바타를 클릭해서 나오는 메뉴 중에서 'Settings'를 클릭한 다음 사이드 메뉴 중간 쯤에 있는 Pages를 클릭합니다.

'repository name'에는 <사용자 이름>.github.io 형식으로 지정하고 'Add README'를 활성화 시킨 다음 'Create repository' 버튼을 클릭해서 Pages를 만듭니다.

README파일이 없으면 홈페이지가 만들어지지 않으니 꼭 활성화해 주세요.

jopd.github.io가 홈페이지 주소가 됩니다. 아직 index.html 파일을 만들지 않았기 때문에 웹페이지 접속이 되지 않습니다.

상단에 있는 'Settings'을 클릭합니다.

사이드 메뉴 하단에 있는 'Pages'를 클릭합니다.

설정 화면에서 Branch 섹션의 'None'을 'main'으로 변경하고 'Save' 버튼을 클릭합니다.

그러면 아래에 'Custom domain'섹션이 활성화되고 사용자 도메인 이름을 지정할 수 있는 필드가 나타납니다.

이 필드에 사용하려는 도메인을 지정합니다.

저장하면 페이지가 새로 고침되면서 아래 그림과 같이 새로운 홈페이지 주소가 나타납니다.

Pages와 사용자 도메인 연결하는 방법

이제 도메인 구입업체에 접속해서 Pages와 도메인을 연결합니다. 방법은 2가지인데, 하나는 CNAME으로 하는 방법과 A 레코드를 이용하는 방법입니다. 여기서는 cloudflare.com으로 도메인을 구성해 보겠습니다.

CNAME으로 설정할 경우 'name'에는 jopd를 입력하고 'value'에는 'jopd.github.io'를 입력한 뒤 프록시 상태를 활성화합니다. 프록시를 활성화하면 https로 접속할 수 있습니다.

A 레코드로 설정할 경우 아래 4개의 ip 주소를 적용합니다.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

cloudflare.com의 경우 아래 그림처럼 적용합니다.

상위 도메인을 이용하려는 경우에는 위 4개의 ip 주소와 CNAME을 하나 더 만듭니다.

예를 들어 idoogie.com 도메인을 적용하려는 경우에는 4개의 ip주소와 1개의 CNAME이 필요합니다. 아래 그림처럼 말이죠.

A     185.199.108.153 idoogie.com
A     185.199.109.153 idoogie.com
A     185.199.110.153 idoogie.com
A     185.199.111.153 idoogie.com
CNAME www             idoogie.com

CNAME으로 상위 도메인을 구성하려는 경우에는 2개의 CNAME 만 필요합니다.

CNAME     jopd.github.io
CNAME www jopd.github.io

홈페이지 꾸미는 방법

이제 index.html 파일을 만들어서 홈페이지를 꾸미도록 합니다.

상단에 있는 jopd.github.io를 클릭합니다.

상단에 있는 'Add file'을 클릭하면 새로운 파일을 만들거나 이미 만들어 놓은 파일이나 폴더를 업로드 할 수 있습니다.

새로운 파일 버튼을 클릭해서 아래 그림과 같이 파일 이름에는 'index.html'이라고 하고 'Commit changes...'버튼을 눌러 저장합니다.

동일하게 '404.html'파일도 만들도록 합니다. 404.html 파일은 존재하지 않는 페이지에 접속할 때 보여질 파일입니다.

아래는 jopd.idoogie.com으로 접속한 그림입니다.

파일을 수정하거나 업로드할 경우 반드시 Commit을 해줘야 적용이 됩니다.

파일이나 폴더를 삭제하려면 해당 파일로 이동하여 상단 오른쪽에 있는 점 세 개 버튼을 클릭한 다음 나타난 메뉴에서 'Delete file'을 클릭해서 'Commit changes...'버튼을 클릭합니다.

Pages는 여러 개 만들 수 있으므로 홈페이지는 여러 개가 될 수 있습니다. 아래에는 이미 2개의 Pages를 만들었습니다.

필요하면 New 버튼을 클릭해서 새로운 홈페이지를 만들 수 있습니다.

계정 이름 변경하는 방법

계정 이름과 Pages 이름이 달라서 사용자 도메인이 작동 안 되는 경우가 있습니다. 이럴 때는 계정 이름과 Pages 이름을 동일하게 해주면 해결되는 경우가 됩니다.

깃허브는 다른 사이트와는 다르게 자유롭게 이름을 바꿀 수 있습니다. 상단 오른쪽에 있는 아바타를 클릭하고 메뉴 중간에 있는 'Settings'를 클릭합니다.

사이드메뉴에 있는 'Account'을 클릭하고 메인 화면에 있는 'Change username'을 클릭해서 원하는 이름으로 변경합니다.

Pages 이름 변경 및 삭제하는 방법

변경하려는 Pages(ex.jopd.github.io)로 이동한 다음 상단에 있는 'Settings'를 클릭하고, 사이드 메뉴의 'General' 를 클릭합니다. 메인 화면에서 General 섹션의 'Repository name'에서 원하는 이름으로 변경합니다.

General 섹션에서 'Danger Zone' 섹션이 나올 때까지 하단으로 스크롤합니다. 'Delete this repository'를 클릭하여 삭제를 진행합니다.