깃허브 페이지로 웹사이트 만들기 가이드 - 1단계

July 25, 2023

깃허브 페이지 1단계

깃허브의 Pages라는 기능을 사용하여 웹사이트 만드는 방법을 소개합니다.

1단계는 웹브라우저으로만 진행합니다.

이번 단계에서는 깃허브 페이지 발행에 대한 맛보기와 사용되는 용어들을 먼저 알아가는게 목표입니다.

(1) 깃허브 계정과 저장소 만들기

  • 먼저 깃허브 계정을 만들어 주세요
  • 깃허브에 **저장소(Repository)**를 하나 만듭니다.
    • 저장소(Repository)는 프로젝트 1개를 담는 개념입니다.

(레포지토리, 레포, repo 모두 같은 말입니다. 앞으로는 레포지토리라고 더 많이 부르겠습니다.)

  • 여기서는 사이트 하나가 레포지토리 1개가 됩니다.
  • 저장소 이름은 아무렇게나 해도 됩니다. 고민되는 분은 blog라고 해봅시다.
  • Private이 아닌 Public으로 만들어주세요.

create repository

(2) 첫번째 페이지 배포하기

[주의] 앞으로 할일
레포지토리를 처음 보면 당황스러울 수 있기 때문에 목표룰 먼저 알려드리겠습니다.
1. 레포지토리에 파일을 하나 만듭니다.
2. 레포지토리의 설정 페이지에 들어가서 Github Pages 기능을 활성화합니다.
3. 그러면 아까 만들었던 파일이 실제 접속할 수 있는 웹사이트가 됩니다.
  • 아까 만들었던 레포지토리에 접속합니다.

(본인 프로필을 누르고 repositories를 찾아 들어가면 있습니다.)

  • create new file을 선택합니다.

create new file in repository

  • 파일명은 [index.html]() 정도로 만들고, 내용은 아무렇게나 칩니다.

create index.html

  • 저장할때는 commit changes를 누릅니다.
  • 커밋(commit) = 변경사항을 기록한다 라고 생각하면 됩니다. 자주 쓰이는 용어입니다.

commit changes

레포지토리로 다시 돌아와서 설정(Settings) 탭에 들어갑니다.

  • 설정 페이지의 좌측 목록에 보면 "Pages" 가 있습니다. 클릭하세요.
  • Branch를 main으로 바꾸고 Save하세요

조금 기다리면 사이트가 배포됩니다.

  • 사이트 주소는 다음과 같습니다.
    • https://[github닉네임].github.io/[repository이름]
  • 접속이 잘 되면 일단 끝입니다.

(2) 두번째 페이지 배포하기

새로운 파일을 하나 더 만들어봅시다.

  • 레포지토리의 Code 탭으로 다시 돌아와서 “Add files → Create new file” 을 클릭합니다.

add new file

  • [[about.html](about.html)](about.html)이라는 이름으로 만듭니다. 내용은 자기 소개를 써주세요
  • 저장은 commit changes를 누릅니다.

커밋이 잘 되었다면 새로운 페이지가 배포될 것입니다.

  • [사이트 주소]/about에 접속해봅시다.
    • https://[github닉네임].github.io/[repository이름]/about 이 되겠죠.
  • 바로 들어가면 안뜨고, 조금 기다려야 뜰 수 있습니다.
  • 접속이 잘 되면 환호를 합니다.

새로운 용어들

깃 git

깃허브 github

레포지토리 repository

커밋 commit

깃허브 페이지 Github Page

브랜치 branch

배포

이후 과정

2단계는 Repository에 들어가는 파일을 좀더 다양하게 해보겠습니다.

그리고 그 이후에는 연습 페이지가 아닌 블로그 처럼 만들 수 있도록 블로그 템플릿을 가져와서 사용하는 것을 해볼 것입니다.