리액트로 깃허브 블로그 만들기 #1 - setting

깃허브 로고

워드프레스 블로그를 한달전에 개설했는데, 최근에 깃허브에서 블로그를 만들 수 있다는 걸 알게되었습니다.

워드프레스 블로그의 경우, 클라우즈웨이즈에서 만든거라 서버 비용이 꽤 나가서.. 리액트로 깃허브 블로그를 만들어보기로 했습니다. 😄

사실 웹 개발에 대한 블로그를 개설하는게 급한 것은 아니어서, 이번에 리액트 공부를 하며 천천히 진행하려고 합니다.(리액트 왕초보..)

해보고.. 실패하면.. 티스토리로 만들어야지 ㅎㅎㅎ 🤣🤣

우선 워드프레스는 운영을 더 할생각이 없어서 서버를 삭제했고, 봇이 안내해준 메일 주소로 미리 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 됩니다.🥰

 name: Sync Build to Main

  on:

    push:

      branches:

        - develop

  jobs:

    deploy-to-main :

      runs-on: ubuntu-latest

      permissions:

        contents: write

     steps:

       - name: Checkout develop branch

         uses: actions/checkout@v3

         with:

           ref: develop

           fetch-depth: 0

       - name: Copy build contents

         run: |

           mkdir deploy

           cp -R build/* deploy/

     

       - name: Switch to main brach

         run: |

           git checkout -f main

           git config user.name "username"

           git config user.email "username@users.noreply.github.com"

       

       - name: Replace contents in main branch

         run: |

           git rm -r --cached .

           shopt -s extglob

           rm -rf !(deploy)

           cp -R deploy/* ./

           rm -rf deploy

           git add .

           git commit -m "update from build in develop branch"

           git push origin main

💡 여기서 pages에 정상적으로 컨텐츠가 나오려면, package.json 파일에 "homepage": "." 를 추가해주어야 합니다.

💡비어있는 레포지토리는 일단 첫번째 push & deploy를 진행해줍니다. 😊

깃허브 레포지토리 settings

첫번째 커밋 후 레포지토리 상단의 settings으로 접속합니다.

Pages 목록

왼쪽의 목록에서 Pages 을 클릭하면 오른쪽에 custom domain에 사용할 도메인이름을 입력하고 save를 클릭합니다.

도메인 입력란

이제 DNS를 연결해주어야 하는데요, 저의 경우 가비아에서 구매했기 때문에 가비아에 접속하여 해당 도메인의 DNS설정으로 접속하였습니다.

해당 도메인으로 들어가면 레코드 설정이 나오는 데요, 여기서 레코드를 하기와 같이 6개 추가해줍니다.

DNS 레코드 입력하기

블록부분은 username이에요. 저장소명을 적으면 되고, 끝에 마침표 붙이셔야 합니다.

이렇게 적용한 후 다시 깃허브의 pages로 접속한 후 조금 기다리면 아래처럼 체크완료표시가 됩니다.

DNS 체크 완료

체크가 완료된 후 그 밑에 위치한 HTTPS를 체크해주면 주소가 HTTPS로 변경됩니다.

갈길이.. 너무 멀지만!! 꾸준히 진행해보겠습니다~~🔥🔥