나만의 홈페이지 만들기 - GitHub.io

깃허브 io 로 무료로 나만의 홈페이지를 만들 수 있다.

2년전에 웹 퍼블리싱 과정을 배울때만 해도 닷홈의 무료 호스팅을 사용해 포트폴리오 사이트를 만들었다.

비교적 간편하게 만들 수 있지만, 단점은 무료 호스팅이기때문에 트래픽 제한이 있다.

친구들이나 다른 사람이 내 홈페이지를 자주 왔다갔다하기만 한다면 금방 트레픽 제한이 걸려 접속을 할 수 없다.

 

실제로 학원에서 포트폴리오 시연회날 새벽에 많은 작업을 했던 A 학생은 자신의 포트폴리오를 테스트하기 위해서 많이 접속을 했었는데, 포트폴리오 시연회때 트레픽 제한이 걸려 인터넷으로 접속하지 못하는 상황이 발생하기도 했다.

그러면 사이트를 다운받아 로컬로 접속해서 보여줄 수 밖에 없었는데, 컴퓨터마다 환경이 다를 수 있으므로 변수도 생기고, 기다리는 시간동안 관객의 흥미는 떨어질 수 밖에 없었다.

 

AWS 등의 서비스를 이용해 트레픽에 따라 제한 용량을 늘려주는 서비스도 있지만, 그에따라 비용이 발생하고, 돈을 벌기위해 취업을 하려는 사람에게 돈을 내서 포트폴리오 사이트를 보여주기란 여간 부담스러운 점이 없지않다.

 

깃허브를 이용하면 무료로 트레픽 걱정없이 안정적으로 내 홈페이지를 만들 수 있다.

단점이라면 깃허브를 사용할 줄 알아야하고, 적당히 코딩을 할 줄 알아야하고, 정보를 찾기위한 노력이 필요하다.

 

나도 내 포트폴리오 사이트를 깃허브 io 로 다시 만들기위해 지금부터 정리해보려고 한다.

 

이는 깃허브를 활용하여 만드는 방법이므로, 기본적으로 깃허브 사용에 대한 방법은 알고 있어야한다.

깃허브 아이디 정도는 만들어두고, 다른 무료 강의를 통해서 간단하게 github 사용방법은 숙지해서 시작하자. 

 

1. 레포지토리 Repository 만들기

깃허브 홈페이지에 로그인 한뒤 우측 상단의 Your repositories 메뉴를 통해 내 레포지토리로 이동하자.

우측의 New 를 눌러 레포지토리를 생성하자.

Repository name 에는 홈페이지 주소가 될 이름인데, 깃허브아이디.github.io 로 적어주자.

 

꼭꼭 본인 깃허브 이름으로 해줘야한다.

 

Repository는 나만의 저장소 이름이므로 아무렇게나 지을 수 있는데, 깃허브이름.github.io 로 사이트 접속이 되므로,

test.github.io 로 만든다면 리포지토리는 만들어지지만 누구의 test.github.io 리포지토리로 가야하는지 모르기때문이다.

 

위와같이 만들었을 경우 aaaaa.github.io 로 접속할 수 있다.

 

Public 체크

 

Add a README file 체크.

 

Create repository.

 

2. 내 Repository 를 컴퓨터로 clone 하자.

만든 레포지토리 화면이 떴으면 우측의 코드, HTTPS 복사를 눌러 주소를 복사하자.

VS Code 를 실행하고, (나는 코드 편집기로 VS Code 를 사용하고 있다.)

Git 리포지토리 복제 클릭 (해당 메뉴가 없다면, 컴퓨터에 Git 을 깔아서 VS Code 와 연동해주자.)

복사했던 주소를 넣고 'GitHub에서 복제' 해주자.

허용

그럼 이제 리포지토리 이름을 검색해서 내 컴퓨터에 다운받을 수 있는데, 만들려고하는 github io 를 찾아서 눌러준다.

복제하면 폴더로 생성되어 다운받게 되는데, 개발 관련 폴더를 만들어서, 깃허브에서 클론하는 리포지토리들은 그쪽으로 다 잡아넣는 방법을 추천한다.

다운받을 폴더로 들어간다음, '리포지토리 위치 선택' 클릭.

바로 열어주자.

그럼 README.md 만 있는 빈 프로젝트가 생성될텐데, 이제부터 홈페이지를 만들거나, 만들었던 포트폴리오 사이트를 복사해오면 된다.

 

홈페이지 제작을 할 줄 모르는 사용자라면, 깃허브 블로그 만들기 등으로 검색했을 때 나오는 'jekyll' 같은 사이트 생성 엔진을 통해, 손쉽게 블로그처럼 만들수도 있다.

(https://jekyllthemes.io/)

 

3. 만든 파일들 커밋 / 푸시하기 

나는 사이트를 만들었던 파일들을 모조리 복사해왔기 때문에, 바로 커밋해준다.

나처럼 처음 깃허브를 설치하고 커밋한다면 이런 에러가 뜬다.

Git 로그 열기 를 누르면 대충 내용이 뜬다. 이렇게 하라고

터미널을 눌러주자.

Ctrl + ` 를 눌러도 열 수 있다. 

 

내 깃허브 이메일과 이름을 입력해줄텐데, 기억이 나지 않는다면, 깃허브 사이트로 들어가, 로그인을 한뒤, 메뉴에서 Settings 로 들어가면 이런 메뉴가 나올텐데, 위에 있는 아이디가 이름이고, Emails 로 들어가면 내가 등록한 이메일을 확인할 수 있다.

 

콘솔로 들어가

 

git config --global user.name "이름및아이디"
git config --global user.email "이메일주소@gmail.com"

 

이런식으로 하나씩 입력해준다.

이제 커밋하면 동기화가 된다.

 

만약 토큰 어쩌고가 뜨면 sign in browser 를 누르면 자동으로 웹사이트가 뜬다음 연결되어서 조금 기다리면 동기화된다.

 

깃허브의 리포지토리로 들어가서 Settings 로 들어가준다.

Pages 로 들어가고

 

브랜치를 None 에서 main 으로 바꿔주자.

 

그러면 이제 끝

 

이름.github.io 로 접속해보자