깃허브 페이지 커스텀 도메인 연결하기

지금 블로그는 버셀로 배포가 되어있기 때문에 이번에 만들고 있는 개인 포트폴리오 사이트는 깃허브 페이지로 배포하기로 했다.

깃허브 페이지 배포하는것은 크게 어렵지 않았지만, 커스텀 도메인 연결이 시간이 오래걸렸어서 까먹지 않기 위해 정리 한 번 하려고 한다.

1. 도메인 구매

나같은 경우에는 가비아에서 이미 도메인을 산 상태여서 새로 구매는 안했다.

검색창에 원하는 도메인을 치고 아직 구매안된 도메인을 사면된다.

2. DNS 설정

내 도메인을 깃허브 페이지의 IP 주소에 연결하기 위해 A레코드를 다음과 같이 추가해준다.

타입	호스트	값/위치
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153

그리고 또한 나는 서브 도메인 연결을 위해서 CNAME도 사용했다.

타입	호스트	값/위치
CNAME	www.portfolio	choihooo.github.io.
CNAME	portfolio	choihooo.github.io.

3. 깃허브 페이지 설정에서 커스텀 도메인 입력

그 후 다음과 같이 커스텀 도메인을 입력하고 save 하면 몇분이 지나면 DNS 연결 확인이 되고 도메인이 연결이 된다.

추가: vite 설정 수정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
base: "/"
});

base가 원래 /레포 이름/ 이여야 하지만 커스텀 도메인을 이용해 배포할때는 / 로 바꾸어 주어야한다.