깃허브로 포트폴리오 사이트 만드는 방법

개발자, 디자이너, 학생 모두에게 깃허브 포트폴리오 사이트는 자기소개와 프로젝트를 보여줄 최고의 수단이에요.

서버나 도메인 없이 무료로 배포 가능하고, 유지 관리도 쉽죠.

 

2025년 현재 국내 IT 취업 준비생 10명 중 7명이 깃허브 페이지(GitHub Pages)를 활용해 포트폴리오를 제작하고 있습니다.

깃허브로 포트폴리오 사이트 만드는 방법

포트폴리오 사이트 핵심 요약

• 깃허브 Pages 무료 호스팅 활용
• HTML·CSS·JS 또는 정적 사이트 생성기(Jekyll, Hugo) 지원
• 개인 도메인 연결 가능
• 자동 배포(GitHub Actions) 활용 가능

1단계: GitHub 저장소 생성

1. 저장소 이름 규칙

깃허브 페이지를 만들려면 저장소 이름을 username.github.io 형식으로 만들어야 합니다. 예를 들어 아이디가 “jiyoon-dev”라면 저장소 이름은 jiyoon-dev.github.io가 됩니다.

2. 공개 저장소 선택

포트폴리오 사이트는 외부에서 접근해야 하므로 반드시 Public 저장소로 생성해야 해요.

3. 초기 커밋 준비

README 파일을 함께 생성하면 깃허브가 기본 브랜치를 세팅해주기 때문에 이후 작업이 편리합니다.

2단계: HTML/CSS 업로드

1. 기본 HTML 파일 생성

index.html 파일을 만들어 “Hello Portfolio” 같은 내용을 작성 후 저장소에 푸시(push)하세요.

2. 디자인 추가

CSS와 JavaScript 파일을 추가해 자기소개, 프로젝트 목록, 연락처 등을 꾸밀 수 있습니다. 무료 템플릿(예: Bootstrap, TailwindCSS)을 활용하면 빠르게 완성할 수 있어요.

3. 폴더 구조 예시

/ (root)
 ├─ index.html
 ├─ about.html
 ├─ projects.html
 ├─ css/
 └─ js/

구글 캘린더 공유 중단하는 방법과 사용 팁

구글 캘린더 공유 중단하는 방법과 사용 팁

3단계: GitHub Pages 배포

1. 설정 메뉴 이동

저장소 상단 메뉴에서 Settings → Pages 탭으로 들어갑니다.

2. 브랜치 선택

“Source” 항목에서 main 브랜치와 root(/)를 선택하세요. 저장하면 몇 분 안에 사이트가 생성됩니다.

3. 접속 확인

이제 브라우저에서 https://username.github.io 주소로 들어가면 자신의 포트폴리오 사이트가 열립니다.

방법	장점	단점
직접 HTML/CSS 제작	자유도 높음	코딩 필요
Jekyll/Hugo 사용	템플릿 풍부, 블로그 기능 포함	설정이 복잡할 수 있음
템플릿 복사 활용	빠른 제작	개성 부족

4단계: 고급 설정

개인 도메인 연결

도메인을 구입했다면 GitHub Pages 설정에서 Custom domain을 입력해 연결할 수 있어요. 예: www.myportfolio.com.

자동 배포 설정

GitHub Actions를 활용하면 브랜치에 코드를 푸시할 때마다 자동으로 배포가 이루어집니다. 협업 프로젝트나 블로그 운영 시 특히 유용합니다.

분석 도구 추가

Google Analytics, Naver Analytics 같은 분석 스크립트를 추가하면 방문자 데이터를 확인할 수 있어요.

포트폴리오 사이트 활용 팁

• 프로젝트별 스크린샷과 GitHub 링크 함께 제공
• README.md와 동일한 자기소개 내용 반영
• 모바일 반응형 디자인 필수 적용
• 정기적으로 업데이트하여 최신성 유지

구글 설문지로 간단한 퀴즈 만들기 초간단 가이드

구글 설문지로 간단한 퀴즈 만들기 초간단 가이드

FAQ

Q. GitHub Pages는 무료인가요?

네, 깃허브 계정만 있으면 무료로 무제한 사용 가능합니다.

Q. 동적 웹사이트도 만들 수 있나요?

기본적으로 정적 페이지만 지원하지만, 외부 API를 활용하면 제한적으로 동적 기능을 구현할 수 있습니다.

Q. 포트폴리오를 비공개로 할 수 있나요?

GitHub Pages는 공개 저장소에서만 동작하므로 완전한 비공개는 불가능합니다. 다만 임시 비공개 방법으로 비밀번호 스크립트를 추가할 수 있습니다.

Q. 개인 도메인을 연결하려면 비용이 드나요?

도메인 자체는 연간 비용(약 1~2만 원)이 들지만, GitHub Pages와 연결은 무료입니다.

Q. 취업용 포트폴리오로 충분한가요?

네. 프로젝트 코드, 설명, 기술 스택을 잘 정리하면 기업 채용 담당자에게 충분히 어필할 수 있습니다.