[Github] Github.io로 개인 웹 페이지 만들기

Github Pages를 이용해, 개인 웹 페이지를 만들어 보겠습니다.

이번 글은 간단하게 페이지를 만들고, 접속하는 방법에 대하여 다룹니다.

 

이번 글의 대부분의 내용은 Github.io페이지에 간략히 서술되어 있습니다.

Github.io

 

---

 

1. 레포지토리 만들기

 

신규 레포지토리를 생성합니다.

생성하는 레포지토리의 이름은 {username}.github.io입니다.

위와 같이 레포지토리 이름을 지켜주세요.

단, 위 사진과는 다르게, Add a README file은 체크를 해제해주셔야 합니다.

해제하지 않으시더라도 무관하지만, 아래 문단의 내용이 정상적으로 적용되지 않을 수 있습니다.

gitignore및 라이센스는 목적에 맞게 설정해주세요.

 

웹 페이지에 접속할 경우, index.html파일을 읽어옵니다.

아래 2번 문단은 사용하는 Git 클라이언트에 따라 (Terminal, Gui) index.html파일을 추가합니다.

 

2-1. index.html 추가하기 (직접)

 

레포지토리에서 직접 파일을 추가하는 방법도 있습니다.

레포지토리의 Add file -> Create new file을 선택합니다.

파일명을 index.html로, 아래 내용을 Hello World로 작성하고 Commit changes...를 선택합니다.

위와 같이 적절한 커밋 메시지를 작성하여 커밋을 완료합니다. 

 

2-2. index.html 추가하기 (Terminal)

 

레포지토리의 클론을 받아오기 위해, 주소를 복사합니다.

주소는 레포지토리 페이지의 Code버튼을 클릭하면 나오는 HTTPS 주소입니다. 

 

주소를 복사한 후, 레포지토리를 저장할 로컬 저장소로 이동합니다.

클론을 받을 때, {username}.github.io라는 폴더가 생성되므로 폴더를 추가로 생성할 필요는 없습니다.

git clone {HTTPS URL}

위 명령어를 터미널에서 실행하면, {username}.github.io폴더가 생성됩니다.

 

이후 아래의 명령어를 통해 레포지토리에 index.html파일을 추가합니다.

cd {username}.github.io

echo "Hello World" > index.html

git add --all
git commit -m "Initial Commit (Terminal)"
git push -u origin master

마지막 문단의 경우, 본인의 브랜치 명에 맞게 master혹은 main을 설정하시면 됩니다.

 

2-3. index.html 추가하기 (Github desktop)

 

Github desktop이 설치되어있을 경우, 이를 통해 index.html을 추가할 수 있습니다.

레포지토리의 Code버튼을 누른 후, "Open with Github Desktop"을 클릭합니다.

위와 같은 UI가 나올 경우, Local path 옆의 Choose..버튼을 통해 폴더를 지정해주세요

폴더를 지정할 때, 자동으로 하위 폴더가 생성되므로, 폴더를 추가하실 필요는 없습니다.

이후 클론한 폴더로 이동하여, 위와 같이 새 텍스트 문서를 작성합니다.

이 후 파일의 이름을 index.html로 변경해주세요

Github desktop에 변경 내용이 반영되었습니다.

커밋 메시지를 작성하여 커밋하도록 하겠습니다.

새 커밋이 추가되어, 푸시가 가능해졌습니다.

푸시하게 되면, 원격 레포지토리에 index.html이 추가된 것을 볼 수 있습니다.

 

3. 접속하기

 

만들어진 웹 페이지에 대한 접속을 위한 추가적인 작업은 불필요합니다.

{username}.github.io

위와 같이, 레포지토리의 이름을 브라우저의 URL에 입력하는 것으로 접속이 가능합니다.

 

이 때, 여러분이 작성하신 index.html이 출력될 것 입니다.

그 외의 경우, README.md파일이 출력될 수 있습니다.

 

---

 

웹 페이지를 지원하는 서비스는 여러가지가 있습니다.

다른 서비스를 이용하는 것이 원하는 페이지를 쉽게 만들기에는 더욱 좋겠지만

원하는 디자인을 제공하지 않거나 하는 경우에는 github.io가 유용할 수 있겠습니다.

 

감사합니다.