워드프레스 블로그를 한달전에 개설했는데, 최근에 깃허브에서 블로그를 만들 수 있다는 걸 알게되었습니다.
워드프레스 블로그의 경우, 클라우즈웨이즈에서 만든거라 서버 비용이 꽤 나가서.. 리액트로 깃허브 블로그를 만들어보기로 했습니다. 😄
사실 웹 개발에 대한 블로그를 개설하는게 급한 것은 아니어서, 이번에 리액트 공부를 하며 천천히 진행하려고 합니다.(리액트 왕초보..)
해보고.. 실패하면.. 티스토리로 만들어야지 ㅎㅎㅎ 🤣🤣
우선 워드프레스는 운영을 더 할생각이 없어서 서버를 삭제했고, 봇이 안내해준 메일 주소로 미리 fund에 넣어둔 선불 요금 환불 신청을 했습니다.
그리고 워드프레스 블로그에 적용했던 도메인을 깃허브 pages로 옮기는 작업을 진행했습니다.
💡깃허브에 도메인 연결하기 & main 브랜치로 리액트 deploy 하기
깃허브에 새 계정을 만들어서 레포지토리를 생성했는데요, 블로그용은 레포지토리 이름을 username.github.io 로 만들어야 합니다.
여기서 username은, 내가 study라는 이름으로 레포지토리를 만들면 대시보드에 뜨는 레포지토리 목록 명이 username/study 이런 패턴으로 구성되는데요, 이 앞의 username을 말합니다.
레포를 생성한 후 develop 브랜치를 추가해서 react 패키지를 업데이트 하고, 배포를 위한 github workflows를 아래와 같이 작성했습니다.
.github폴더의 경로는 develop의 최상위에 위치, path는 .github/workflows/deploy_to_main.yml
deploy_to_main.yml에 작성한 내용이며, develop 브랜치에서 build하고 원격 develop 브랜치에 push하면 main으로 build 내의 파일들이 deploy 됩니다.🥰
💡 여기서 pages에 정상적으로 컨텐츠가 나오려면, package.json 파일에 "homepage": "." 를 추가해주어야 합니다.
💡비어있는 레포지토리는 일단 첫번째 push & deploy를 진행해줍니다. 😊
첫번째 커밋 후 레포지토리 상단의 settings으로 접속합니다.
왼쪽의 목록에서 Pages 을 클릭하면 오른쪽에 custom domain에 사용할 도메인이름을 입력하고 save를 클릭합니다.
이제 DNS를 연결해주어야 하는데요, 저의 경우 가비아에서 구매했기 때문에 가비아에 접속하여 해당 도메인의 DNS설정으로 접속하였습니다.
해당 도메인으로 들어가면 레코드 설정이 나오는 데요, 여기서 레코드를 하기와 같이 6개 추가해줍니다.
블록부분은 username이에요. 저장소명을 적으면 되고, 끝에 마침표 붙이셔야 합니다.
이렇게 적용한 후 다시 깃허브의 pages로 접속한 후 조금 기다리면 아래처럼 체크완료표시가 됩니다.
체크가 완료된 후 그 밑에 위치한 HTTPS를 체크해주면 주소가 HTTPS로 변경됩니다.
갈길이.. 너무 멀지만!! 꾸준히 진행해보겠습니다~~🔥🔥