GitHub Pages 무료 포트폴리오 웹사이트 제작 및 배포 방법 (Jekyll 테마, 커스텀 도메인)
개발자, 디자이너, 혹은 나만의 개성을 보여주고 싶은 직장인과 취준생에게 근사한 포트폴리오 웹사이트는 선택이 아닌 필수입니다. 하지만 막상 내 웹사이트를 만들려고 하면 매달 나가는 웹 호스팅 비용과 도메인 유지비, 그리고 복잡한 서버 설정 때문에 시작도 하기 전에 부담을 느끼는 분들이 많습니다.
저 역시 처음 개인 프로젝트들을 정리해 웹에 공개하려고 했을 때, 단순히 내 이력과 작업물을 보여주는 사이트 하나 유지하는 데 다달이 호스팅 비용을 내야 한다는 점이 참 아깝게 느껴졌습니다. 그러다 알게 된 것이 바로 GitHub Pages(깃허브 페이지)였습니다.
서버 비용 없이 100% 무료로 내 웹사이트를 평생 호스팅할 수 있을 뿐만 아니라, 개발 지식이 적어도 오픈소스 테마를 활용하면 단 10분 만에 근사한 웹사이트를 만들어 낼 수 있었죠. 오늘은 서비스 센터나 전문 개발자의 도움 없이, 여러분 스스로 깃허브 페이지를 활용해 무료 포트폴리오 웹사이트를 배포하는 가장 쉽고 확실한 방법을 알려드리겠습니다.
목차
- 들어가며: 매달 나가는 호스팅비 0원, 무료 웹사이트의 기적
- 깃허브 페이지(GitHub Pages)란 무엇인가?
- 1단계: 깃허브 회원가입 및 전용 저장소(Repository) 생성하기
- 2단계: 무료 테마(Jekyll) 선택 및 소스코드 적용하기
- 3단계: 나만의 포트폴리오 내용으로 수정하고 배포 완료하기
- 4단계: (선택) 커스텀 도메인 연결 및 보안 접속(HTTPS) 설정
- 마치며: 내 작업물을 온전히 보여주는 나만의 디지털 명함
1. 들어가며: 매달 나가는 호스팅비 0원, 무료 웹사이트의 기적
인터넷 세상에 내 집을 마련하려면 두 가지가 필요합니다. 땅에 해당하는 '웹 호스팅'과 주소에 해당하는 '도메인'입니다. 보통 서버를 대여하는 웹 호스팅은 매월 혹은 매년 적지 않은 비용이 들어갑니다. 하지만 깃허브에서 제공하는 GitHub Pages 서비스를 이용하면, 깃허브의 강력한 서버 자원을 무료로 빌려 정적 웹사이트를 마음껏 노출할 수 있습니다.
2. 깃허브 페이지(GitHub Pages)란 무엇인가?
GitHub Pages는 깃허브 저장소(Repository)에 올려둔 HTML, CSS, JavaScript 및 Markdown 파일들을 바탕으로 실제 접속 가능한 웹사이트를 만들어 주는 무료 웹 호스팅 서비스입니다.
기본적으로 username.github.io 형태의 무료 주소가 제공되며, 개인 포트폴리오, 이력서, 블로그, 오픈소스 프로젝트 문서용 사이트로 활용하기에 가장 최적화되어 있습니다.
3. 1단계: 깃허브 회원가입 및 전용 저장소(Repository) 생성하기
가장 먼저 깃허브 계정이 필요합니다. GitHub 공식 홈페이지에 접속하여 무료 회원가입을 진행합니다.
- 계정 생성을 완료하셨다면 오른쪽 상단의 '+' 버튼을 누르고 'New repository'를 클릭합니다.
- 저장소 이름(Repository name) 설정이 가장 중요합니다. 반드시 본인의 GitHub 아이디.github.io 형태로 입력해 주셔야 합니다. (예: 내 아이디가 honggildong이라면 저장소 이름은 honggildong.github.io가 되어야 합니다.)
- Option 중에서 Public(공개)을 선택하고, 맨 아래 Create repository 버튼을 누릅니다.
4. 2단계: 무료 테마(Jekyll) 선택 및 소스코드 적용하기
바닥부터 HTML/CSS 코딩을 시작할 필요가 전혀 없습니다. 깃허브 페이지는 정적 사이트 생성기인 Jekyll(지킬)을 자체적으로 지원하며, 완성도 높은 오픈소스 포트폴리오 테마들이 수없이 공개되어 있습니다.
- 무료로 사용할 수 있는 완성형 오픈소스 포트폴리오 테마 목록은 GitHub Topics portfolio-template 등에서 자유롭게 둘러보고 마음에 드는 디자인을 고를 수 있습니다.
- 원하는 테마 저장소(Repository)에 들어간 뒤 'Fork' 버튼을 누르거나, 해당 소스코드를 다운로드하여 방금 만든 본인의 username.github.io 저장소에 업로드(Commit)합니다.
5. 3단계: 나만의 포트폴리오 내용으로 수정하고 배포 완료하기
소스코드가 저장소에 올려졌다면 이제 내 정보로 내용을 수정할 차례입니다.
- 저장소 파일 중 사이트의 기본 정보가 담긴 _config.yml 파일이나 index.html (또는 Markdown 파일)을 엽니다.
- 내 이름, 자기소개, 기술 스택, 프로젝트 이력, 보유 자격증, 커리어 경험 및 Contact 이메일 주소를 내 정보에 맞게 수정합니다.
- 파일 수정을 마치고 Commit changes를 누르면 끝입니다!
- 약 1~3분 후 주소창에 [https://username.github.io](https://username.github.io)를 입력하면 나만의 포트폴리오 웹사이트가 실시간으로 배포된 것을 확인할 수 있습니다.
6. 4단계: (선택) 커스텀 도메인 연결 및 보안 접속(HTTPS) 설정
username.github.io 기본 주소 대신 myname.com 과 같은 개인 커스텀 도메인을 갖고 계시다면 이 역시 무료로 연결할 수 있습니다.
- 깃허브 저장소의 Settings ➡️ Pages 메뉴로 이동합니다.
- Custom domain 입력창에 구매한 도메인 주소를 입력하고 Save를 누릅니다.
- 도메인 구매 업체(가비아, 후이즈, Cloudflare 등)의 DNS 설정에서 CNAME 또는 A 레코드를 깃허브 주소로 지정합니다.
- 아래쪽 Enforce HTTPS 항목에 체크해 두시면 구글이 좋아하는 보안 접속(HTTPS)까지 무료로 자동 적용됩니다.
7. 마치며: 내 작업물을 온전히 보여주는 나만의 디지털 명함
지금까지 깃허브 페이지를 통해 비용 한 푼 들이지 않고 나만의 포트폴리오 웹사이트를 배포하는 방법을 알아보았습니다.
한 번 완성해 두면 새로운 프로젝트를 진행하거나 경력이 업데이트될 때마다 소스코드만 살짝 수정해 깃허브에 올리면 즉시 웹사이트에 반영됩니다. 취업 및 이직 시장에서 남들과 차별화된 나만의 디지털 명함을 만들고 싶다면, 지금 바로 깃허브 페이지를 시작해 보세요.
#GitHub #포트폴리오사이트 #깃허브페이지