개발자 포트폴리오를 GitHub Pages로 만든 이유
포트폴리오가 필요했다
개발자라면 자기 프로젝트를 보여줄 공간이 필요하다. 이력서에 GitHub 링크만 달면 면접관이 커밋 로그를 일일이 들여다볼까? 현실적으로 그렇게 하는 사람은 드물다.
결국 "한눈에 뭘 만들었는지 보여주는 페이지"가 있어야 한다. 그런데 포트폴리오 사이트에 매달 호스팅비를 낼 이유는 없다. 정적 파일만 올리면 되는 수준이니까.
그래서 GitHub Pages를 선택했다.
GitHub Pages란
GitHub에서 제공하는 무료 정적 웹 호스팅이다.
| 항목 | 내용 |
|---|---|
| 비용 | 완전 무료 |
| 도메인 | username.github.io 자동 제공 |
| HTTPS | 자동 지원 |
| 배포 | git push만 하면 끝 |
| 제한 | 정적 파일만 가능, 저장소 1GB |
백엔드가 필요 없는 포트폴리오 용도로는 이만한 게 없다.
세팅 과정
1. 저장소 만들기
GitHub에서 새 저장소를 만든다. 이름이 중요하다.
저장소 이름: username.github.iousername은 본인의 GitHub 아이디여야 한다. 다른 이름을 쓰면 username.github.io로 접속이 안 된다. 그리고 Public으로 설정해야 한다.
2. index.html 작성
로컬에서 작업하는 걸 추천한다.
git clone https://github.com/username/username.github.io
cd username.github.ioindex.html을 만든다. 처음부터 거창하게 만들 필요 없다. 나는 이렇게 시작했다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포트폴리오</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
}
h1 { font-size: 3rem; margin-bottom: 20px; }
p { font-size: 1.2rem; margin-bottom: 30px; }
.links a {
margin: 0 15px;
color: white;
text-decoration: none;
font-size: 1.1rem;
transition: opacity 0.3s;
}
.links a:hover { opacity: 0.7; }
</style>
</head>
<body>
<div class="container">
<h1>안녕하세요, 루까입니다</h1>
<p>웹과 모바일 개발을 하고 있습니다</p>
<div class="links">
<a href="https://github.com/lukaPlayground">GitHub</a>
<a href="https://lukaplayground.tistory.com">Blog</a>
</div>
</div>
</body>
</html>backdrop-filter: blur(10px)로 글라스모피즘 효과를 줬다. CSS 몇 줄로 꽤 그럴듯한 첫인상을 만들 수 있다.
3. 배포
git add index.html
git commit -m "init: portfolio page"
git push끝이다. 1~2분 후 https://username.github.io에 접속하면 사이트가 올라가 있다. 이후에는 파일 수정하고 push만 하면 자동 반영된다.
실제 구성
처음에는 위의 단순한 페이지로 시작했지만, 프로젝트가 늘면서 구조를 확장했다.
lukaPlayground.github.io/
├── index.html # 메인 포트폴리오
└── demos/
├── file-manager/ # 파일 관리 시스템 데모
└── sample/ # 데모용 샘플 파일GitHub Pages의 장점은 이렇게 하위 폴더를 추가하면 자동으로 경로가 생긴다는 것이다. demos/file-manager/index.html을 push하면 username.github.io/demos/file-manager/로 바로 접근 가능하다.
정적 사이트의 한계와 우회
GitHub Pages는 정적 파일만 서빙한다. 백엔드 로직은 돌릴 수 없다. 이게 가장 큰 제약이다.
하지만 포트폴리오 용도에서는 오히려 장점이 된다:
- 관리할 서버가 없다 — 인프라 걱정 제로
- 비용이 없다 — 도메인 구매 안 해도
.github.io로 충분 - 버전 관리가 된다 — Git 히스토리로 포트폴리오 변천사 추적 가능
서버가 필요한 프로젝트는 어떻게 보여줄까? 나의 경우 프론트엔드만 떼어내서 정적 JSON으로 동작하는 데모를 만드는 방식으로 해결했다. 파일 관리 시스템 데모가 그 예시다.
마무리
GitHub Pages로 포트폴리오를 만드는 건 5분이면 된다. 저장소 만들고, index.html 올리고, push하면 끝이다.
처음부터 완벽하게 만들려고 하지 말고, 일단 올려놓고 프로젝트가 생길 때마다 하나씩 추가하는 게 현실적이다. 나도 처음에는 이름과 링크 두 줄짜리 페이지로 시작했다.
실제 사이트: lukaplayground.github.io
소스 코드: GitHub
'프로젝트 > GitHub Pages' 카테고리의 다른 글
| 서버 파일 관리 시스템을 정적 데모로 재현한 이야기 (0) | 2026.02.11 |
|---|
