github.io를 이용한 포트폴리오 사이트 만들기

github.io

개발자라면 자신이 그동안 만들었던 서비스들을 보여줄 수 있는 포트폴리오가 있으면 좋을 것이다. 특히 개발자라면 웹을 통해서 자신의 포트폴리오를 보여주는 것이 하나의 재미인 것 같다.

 

웹 개발을 모르는 사람이 개인 포트폴리오 사이트를 보면 엄청나다고 생각하는 경우도 꽤 있지만 사실 개발자의 입장에서는 그렇게 어려운 일이 아니다. 직접 포트폴리오 사이트를 만들 수도 있고, 다양한 방법으로 호스팅 할 수도 있는 것이다. 이번 포스팅에서는 간단하게 포트폴리오 웹사이트를 만드는 방법을 서술할 예정이다.

 

이 포스팅의 핵심 포인트는 개발을 전혀 모르는 사람이더라도 쉽게 웹사이트를 만들 수 있게 설명했다. 준비물로는 도메인 네임과 웹사이트 템플릿을 구매할 약간의 크레딧과 깃허브 계정이 필요하다.

 

본론

먼저, 다음과 같은 준비물이 필요하다.

1. Template (HTML, CSS, JS로 이루어진 템플릿)
2. domain name (가비아, 후이즈 등에서 구매한 개인 도메인)

중요한 포인트는 1번과 2번에는 돈이 들어간다는 것인데, 개인 포트폴리오 사이트를 만들기 전에 앞서 자신이 원하는 도메인이나 포트폴리오 템플릿이 있는 지를 알아야 한다. 필자는 글을 쓰는 시점에는 www.marsboy.info를 사용하고 있다. 템플릿과 도메인 네임 모두 만원 정도하는 가격에 구매하여 사용하고 있다.

 

본격적으로 웹사이트를 만들기 전에 앞서서 Template과 domain name을 구매하는 방법에 대해 간단하게 살펴보자.

 

Template

프론트엔드 개발자라서 자신의 포트폴리오 사이트를 직접 만들려는 것이 아니라면 템플릿을 구매해서 사용하는 방법이 있다. 필자는 다음과 같은 사이트에서 검색하여 HTML 템플릿을 구매했다.

• themeforest : https://themeforest.net/category/site-templates/personal
• colorlib : https://colorlib.com/wp/cat/personal/

위 사이트에서 마음에 드는 템플릿을 찾았다면 구매해서 사용하면 된다. 위 사이트 외에도 personal website template이라는 키워드로 구글링 해서 다양한 웹 템플릿을 확인할 수 있다.

 

Domain name

도메인같은 경우에는 도메인을 호스팅 해주는 다양한 플랫폼이 존재한다. 필자는 가비아라는 플랫폼을 통해서 진행하였다. 포스팅 또한 가비아를 통해서 이루어질 예정인데, 도메인 네임 호스팅 업체에서 해주는 기능들은 거의 비슷하고 UI만 다르기 때문에 다른 사이트를 이용해도 큰 지장은 없다.

 

가비아는 DNS를 호스팅해주는호스팅 해주는 사이트이다. 서버는 모두 IP를 가지고 있는데, DNS를 호스팅 해주는 사이트에서 해당 IP를 저장해 Domain Name ( ex: www.example.com ) 으로 접속하면 특정 IP로 연결해 주는 역할을 한다. 따라서 도메인 네임을 구매하면 특정 도메인에 대한 소유권을 확보해 주는 것을 도와주고, 레코드 설정 등을 통해서 특정 IP로 연결되도록 설정해 줄 수 있다.

 

본 포스팅에서는 나중에 레코드 설정을 통해서 DNS를 연결한다. 필자는 marsboy라는 닉네임을 사용하기 때문에 marsboy.info를 구매하여 사용하고 있다. 본 포스팅에서는 marsboy.info를 사용할 것이다.

 

github.io

모든 준비가 끝났으면 이제 github.io를 통해서 정적 웹사이트를 서빙할 예정이다. 먼저 github.io에 대한 설명을 보면 다음과 같다.

• 참고 : https://pages.github.com/

GitHub Pages

깃허브에는 github pages라는 기능이 존재한다. 이는 깃허브 레포지토리에 있는 파일을 서빙해주는 역할을 한다. 깃허브에서는 {USERNAME}.github.io 라는 이름으로 레포지토리를 만들면 자동으로 github pages가 적용된다. 따라서 해당 네이밍 컨벤션을 지켜 레포지토리를 만들면 해당 레포지토리에 있는 HTML+CSS+JS 등을 자동으로 서빙해 준다. 이렇게 깃허브에서는 간단하게 웹사이트를 서빙해 주는 것을 하나 제공하고 있다.

이렇게 레포지토리를 만들 수 있다. 필자는 이미 똑같은 레포지토리가 있어 빨간 경고문이 떴지만, 없는 사람은 위와 같이 만들어주면 된다. 그 다음 터미널에서 CLI를 통해서 index.html 파일을 추가해 보자.

# 깃 레포지토리 {USERNAME} 저장소를 local로 불러오기
$ git clone https://github.com/{USERNAME}/{USERNAME}.github.io

# 디렉토리 변경 및 파일 만들기
$ cd {USERNAME}.github.io
$ echo "Hello World" > index.html

# 원격저장소(github)에 push
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin main

 

깃 레포지토리를 만들고 위와 같은 명령어를 통해서 간단하게 웹사이트를 만들 수 있다. 이제 https://{USERNAME}.github.io에 접속하면 Hello World라는 문자가 덩그러니 있는 페이지를 볼 수 있을 것이다! 

 

이렇게 github.io를 통해서 간단한 웹사이트를 서빙하는 법을 배웠다. 해당 레포지토리에 직접 자신이 만든 정적 페이지를 업로드해 개인적인 포트폴리오 사이트를 만들 수 있고, 직접 구한 웹사이트 템플릿을 업로드하고 수정하는 방식으로 구현할 수도 있다. 다음으로는 github.io의 서브도메인이 아닌 자신이 구매한 도메인을 통해 접속할 수 있도록 설정해 보자.

 

도메인 연결

템플릿까지 연결이 끝났다면, 마지막으로 딱 한 가지가 아쉬울 것이다 그것은 바로 github.io로 끝나는 네이밍인데, 이는 github pages 기능을 써서 간단하게 자신이 구매한 도메인을 연결할 수 있다!

 

깃허브 레포지토리({USERNAME}.github.io)에서 Setting - Pages를 들어가 보자. 해당 페이지에서는 custom domain을 설정하는 항목이 있는데, https 체크박스를 눌러주고 본인의 도메인을 Save 해준다. 이렇게 설정하고 나서 끝이 아니다. 도메인 네임 호스팅 사이트에서도 설정을 해두어야 한다.

 

레코드 입력

필자는 가비아를 이용하는데, DNS에 관련된 네트워크 개념은 똑같으니 다른 사이트를 이용한다면 UI만 다를 것이다. 먼저 다음 사이트를 참고해서 레코드에 대한 설정을 마쳐야 한다.

 

다음 문서를 살펴보면 https 관련 트래픽 설정을 위해서 github pages의 IP를 바라볼 수 있게 가비아에서 DNS 레코드 설정을 해줘야 한다. 

• 참고 : https://docs.github.com/ko/pages/getting-started-with-github-pages/securing-your-github-pages-site-with-https

HTTPS를 사용하여 GitHub Pages 사이트 보호 - GitHub Docs

 

위 문서를 보면 아랫부분에 다음과 같은 섹션을 확인할 수 있을 것이다.

여기서 설정해줘야 하는 것이 A 레코드와 CNAME 레코드이다. 위 docs 문서를 확인해서 레코드 값에 나와있는 것을 모두 설정해줘야 한다. IP를 직접 매핑해 주는 A 레코드와 도메인 네임을 직접 매핑해주는 CNAME을 설정하면 된다. 

 

먼저 가비아에 로그인한다. 도메인 네임이 없다면 원하는 도메인 네임을 구매하면 된다.

 

위 페이지에서 관리 버튼을 통해서 원하는 도메인 네임의 관리 페이지에 들어간다.

 

그다음에는 DNS 정보 - DNS 관리를 눌러서 레코드를 등록할 수 있는 페이지로 들어간다. 그 후에 원하는 도메인을 선택하고 DNS 설정을 누르면 아래와 같은 페이지를 볼 수 있다.

 

해당 페이지에서 github docs에 있는 내용대로 레코드를 설정하면 된다. 위와 같이 설정했다면 완료된 것이다. 이제 DNS의 변경사항이 전파될 때까지 기다리면 해당 도메인을 통해서 개인 정적 페이지에 접근할 수 있을 것이다.

 

마치며

만약 위 과정을 모두 마쳐도 도메인이 연결되지 않는다면 github.io 레포지토리에 CNAME이라는 파일을 추가해 보자.

# 도메인 네임 파일 생성
$ touch CNAME

# 도메인 네임 입력
$ echo "example.com" > CNAME

 

필자는 맨 처음에는 자동으로 CNAME 파일이 생성되었는데, 도메인 네임을 바꾼 이후로는 직접적으로 CNAME을 생성했다. 혹시나 연결이 안 된다면 위와 같은 명령어를 통해 도메인 네임을 추가해 보자.