Tech-Logs of Data-Scientist

[github.io 블로그만들기 4편] main branch가 아닌 다른 branch를 바라보도록 설정하기 본문

Github

[github.io 블로그만들기 4편] main branch가 아닌 다른 branch를 바라보도록 설정하기

Mini-Step 2023. 12. 2. 23:38

    SMALL

    지난글

    지난글에서는 Jekyll 테마를 적용해봤습니다.

     

    Jekyll theme를 적용해보자 (github.io 블로그만들기 3편)

    지난글 Jekyll로 Github.io 블로그를 꾸며보자! (github.io 블로그만들기 2편) 지난글 Github.io 블로그를 만들어보자! (github.io 블로그만들기 1편) 오늘의 포스팅은 Github을 통해서 Blog를 만드는 방법입니다.

    data-scientist-techlog.tistory.com

    이번글에서는 블로그 메인이미지, 포스팅 등을 업데이트 하기 이전에,

    main branch가 아닌 다른 branch를 바라보도록 수정하고, PR(Pull Request)하는 작업들을 해보겠습니다.

    이런 작업을 하는 이유에서는 아래에서 설명드리겠습니다!

     

     


    1. main branch가 아닌 다른 branch를 바라보게하는 이유

    이전 포스팅을 통해서 Hydejack 테마를 적용했습니다.

    이제는 Hydejack 테마의 기본설정 이외에도, 메인이미지를 수정하거나 새로운 포스팅을 작성하는 등의 업데이트하는 작업들이 필요합니다.

     

    이 때, main branch를 통해서 계속 작업하게되면, 수정사항들이 바로바로 적용되기 때문에,

    수정에 실패한 내용들을 매번 계속해서 바꿔줘야하는 번거로움이 있습니다.

     

    따라서, 새로운 branch를 만든 뒤 github.io가 해당 branch를 바라보도록 만든 뒤,

    해당 branch에서 작업한 뒤 잘 반영된 것을 확인하고 main branch로 반영하는 작업이 필요합니다.

    이 때, main branch로 반영하는 작업이 PR(Pull Request)입니다.

     

    위의 작업들을 하는 방법을 아래에서 제대로 다뤄보겠습니다.

     

     


    2. 새로운 branch 생성

    먼저, 새로운 branch를 생성해보겠습니다.

    본인의 github.io가 있는 repository로 이동 후, 좌측 상단의 "main"을 눌러 아래와 같이 새로운 브랜치를 생성해줍니다.

    좌측 그림에서, "Switch branches/tags"에 새로운 브랜치명을 입력 후, "Create branch: {새브랜치명} from 'main'"을 눌러줍니다.

    저는 개발자환경이라는 뜻의 "developer"를 줄인 "dev"로 설정하겠습니다.

    설정 후에는 우측 그림과 같이 "dev"라는 새로운 브랜치가 생성 된 것을 확인 할 수 있습니다.

     

     


    3. github.io가 새로운 branch를 바라보도록 설정

    이제 "{username}.github.io"가 "dev" 브랜치를 바라보도록 설정해줘야합니다.

    위 그림과 같이, 해당 repository에서 우측상단의 Settings → 좌측배너의 Pages → Build and deployment / Branch에서 dev로 변경 후, Save 버튼을 눌러줍니다.

     

     


    4. 새로운 branch에서 수정사항 반영 후, main branch로 반영하기

    Terminal에서 아래의 명령어를 통해서 main branch에서 dev branch로 변경해준 뒤, 아래그림과 같이 제대로 Switch되었는지 확인해줍니다.

    # dev로 branch를 변경해준다.
    git checkout dev

     

    만약 dev 브랜치가 없다고 뜨면, 아래 명령어를 통해서 모든 원격 브랜치들을 가져와준 뒤, checkout을 해주면됩니다.

    git fetch origin

     

     


    5. dev branch에서 수정사항 반영 후 Git Push

    이제 dev branch에서 _config.yml 파일을 통해 배너 타이틀을 변경해보겠습니다.

     

    _config.yml 파일을 열어 준 다음, 아래의 부분으로 이동해줍니다.

    (Ctrl / Command + F를 통해 쉽게 이동할 수 있습니다)

    # The title of your blog. Used in the sidebar and the browser tab.
    title: Starter Kit

     

    여기서 title 부분에 원하는 타이틀로 변경해줍니다.

     

    변경 후, 아래의 명령어를 통해 dev branch에 수정사항을 push 해줍니다.

    여기서!! git push 시, main이 아닌 dev로 해줘야합니다!

    git status
    git add _config.yml
    git commit -m 'fix: change title'
    git push origin dev

     

    잘 반영된 것을 터미널에서 확인 후, "{username}.github.io"로 들어가보면

    좌측 타이틀부분의 "Starter Kit"에서 설정한 타이틀로 변경 된 것을 볼 수 있습니다!

    (바로 반영되는 것 같지는 않고 30초~1분가량 기다리면 되는 것 같습니다!)

     

     


    6. dev branch를 main branch로 Pull Request

    이제 수정사항이 다 끝났다고 가정하고, dev branch를 main branch로 PR(Pull Request)를 해보겠습니다.

     

    위의 그림과 같이, Git Repository에서 상단 메뉴에서 "Pull Requests"를 클릭 후, 우측 초록색 "New pull request"를 클릭해줍니다.

     

    다음으로, "Comparing changes" 아래쪽의 "base: main ← compare: main"에서 오른쪽 compare 부분을 "dev"로 바꿔줍니다.

     

    수정된 부분을 확인하고싶다면, 아래쪽으로 내리다보면 나오는 코드부분에서 수정된 부분을 확인 할 수 있습니다.

    (우측의 "Unified"를 "Split"으로 바꾸면 비교하면서 확인이 쉽습니다!)

     

    마지막으로, pull request를 위한 title, description을 작성해줍니다.

    우측에 Reviewers 및 Assignees 등은 공동작업 시 설정하는 부분으로, 저희는 입력하지 않겠습니다.

     

    만약, 해당 pull request 목적에 대해서 추가 수정사항이 있다면,

    기존과 동일하게 수정사항을 git push 해주고나서, 해당 PR의 "File changed"에 들어가면 asis/tobe의 코드를 볼 수 있습니다.

     

    PR이 완료되었다면 "Merge pull request"를 누르면 되고,

    누르고나면 보라색으로 "Pull request successfully merged and closed"라고 나오는 것을 확인 할 수 있습니다.

     

    마지막으로, 위 그림과 같이 해당 repository에서 우측상단의 Settings → 좌측배너의 Pages → Build and deployment / Branch에서 dev에서 main으로 변경 후, Save 버튼을 눌러줍니다.

     

     


    다음글

    다음으로는 배너 이미지, 사이드바 이미지 등을 바꾸는 방법에 대해서 알아보겠습니다!

     

    이미지 변경 - 로고, 사이드바 등 (github.io 블로그만들기 5편)

    이전글 이전 포스팅에서는 github.io를 운영하면서 main branch에서 수정을 하는 실수를 방지하도록 dev branch에서 수정하는 방법을 알아봤습니다. main branch가 아닌 다른 branch를 바라보도록 설정 (github.

    data-scientist-techlog.tistory.com

     

    반응형
    LIST
    Comments