깃허브 정적 홈페이지(GitHub Pages) 무료로 만들기
깃허브 정적 홈페이지(GitHub Pages)는 코드를 몰라도, 돈을 한 푼 들이지 않고 인터넷에 내 홈페이지를 띄울 수 있는 무료 기능이다. GitHub Pages는 저장소에 올린 HTML·CSS·자바스크립트 파일을 그대로 받아 웹사이트로 게시해 주는 서비스이며, 공개 저장소라면 무료 요금제(GitHub Free)에서 쓸 수 있다(What is GitHub Pages?). 이 글은 명령어 한 줄 없이, 깃허브 웹 화면만으로 정적 홈페이지를 만들고 운영하는 과정을 비개발자 눈높이로 단계별로 정리한다. 깃허브 자체가 무엇인지 먼저 알고 싶다면 깃허브가 무엇인지 설명한 글을 함께 보면 도움이 된다.
1) 정적 사이트가 무엇이고 언제 쓰나
정적 사이트(static site)란 미리 만들어 둔 파일을 방문자에게 그대로 보여 주는 홈페이지를 말한다. 누가 들어와도 같은 화면이 뜨고, 서버에서 따로 계산하거나 데이터를 꺼내 오는 과정이 없다.
그래서 정적 사이트는 글·소개·포트폴리오·안내 페이지처럼 '내용이 정해져 있고 모두에게 똑같이 보여 주면 되는' 경우에 잘 맞는다. 블로그, 회사·동아리 소개, 행사 안내, 이력서 페이지가 대표적이다. 반대로 로그인, 회원 가입, 댓글 저장, 주문 처리처럼 방문자마다 다른 정보를 다루고 데이터를 보관해야 하는 기능에는 맞지 않는다. 그런 일은 뒤의 '7) 한계'에서 다시 정리한다.
2) 깃허브 계정과 저장소 만들기
먼저 깃허브 계정이 있어야 한다. github.com에서 이메일과 비밀번호만 입력하면 무료로 가입된다. 결제 정보는 필요 없다.
가입했다면 저장소를 하나 만든다. 저장소(Repository, 레포지토리)란 하나의 프로젝트에 딸린 파일과 그 변경 이력을 통째로 담아 두는 폴더 같은 공간이다. 깃허브 안내에 따르면, 화면 오른쪽 위 메뉴에서 'New repository'를 누른 뒤 소유자와 저장소 이름을 정하면 된다(Creating a GitHub Pages site).
이름을 정할 때 한 가지만 기억하면 편하다. 저장소 이름을 내아이디.github.io 형태(예: 아이디가 hong이면 hong.github.io)로 만들면, 나중에 사이트 주소가 깔끔하게 그 주소 그대로 나온다(같은 문서). 공개(Public) 저장소로 만들어야 무료 요금제에서 GitHub Pages를 쓸 수 있다(What is GitHub Pages?).
3) index.html 올리기 (명령어 없이)
홈페이지의 첫 화면이 되는 파일은 보통 index.html이라는 이름을 쓴다. GitHub Pages는 저장소에서 index.html(또는 index.md, README.md) 파일을 사이트의 시작 페이지로 찾는다(Creating a GitHub Pages site).
컴퓨터에 메모장 같은 프로그램으로 아래 같은 간단한 파일을 하나 만들어 index.html로 저장한다.
- 메모장을 열고
<h1>안녕하세요</h1><p>첫 홈페이지입니다.</p>한 줄을 적는다. - '다른 이름으로 저장'에서 파일 이름을
index.html로 적고, 인코딩은 UTF-8로 저장한다.
이제 깃허브 저장소 화면에서 'Add file' 메뉴의 'Upload files'를 눌러, 방금 만든 index.html 파일을 끌어다 놓고 'Commit changes' 단추를 누르면 끝난다. 검은 화면에 명령어를 칠 필요가 전혀 없다. 파일이 저장소에 올라간 것이다.
4) GitHub Pages 켜고 주소 받기
파일을 올렸다고 바로 사이트가 되는 것은 아니다. 기능을 한 번 켜 줘야 한다. 저장소 이름 아래에 있는 'Settings'(설정)로 들어가, 왼쪽 사이드바에서 'Pages'를 누른다(Configuring a publishing source).
거기서 게시할 위치(소스)를 고른다. 보통 'Branch'를 main으로, 폴더는 루트(/)로 두고 'Save'를 누르면 된다. 소스 브랜치에 변경이 올라올 때마다 그 내용이 사이트로 게시된다(같은 문서).
저장하면 잠시 뒤 사이트 주소가 안내된다. 저장소를 내아이디.github.io로 만들었다면 주소도 https://내아이디.github.io가 된다. 변경 사항이 사이트에 실제로 반영되기까지는 최대 10분쯤 걸릴 수 있으니, 곧바로 안 보여도 잠시 기다렸다 새로고침하면 된다(Creating a GitHub Pages site).
5) 내 도메인과 HTTPS 연결하기
기본 주소(내아이디.github.io)로도 충분하지만, 직접 산 도메인(예: q-bot.kr)을 연결할 수도 있다. GitHub Pages는 내가 소유한 도메인으로 사이트 주소를 바꾸는 사용자 지정 도메인을 지원한다(About custom domains and GitHub Pages). 큰 흐름은 두 가지다. 첫째, 도메인을 산 곳(도메인 등록 업체)의 설정에서 깃허브를 가리키도록 DNS 값을 입력한다. 둘째, 저장소의 'Settings > Pages'에서 'Custom domain' 칸에 내 도메인을 적고 저장한다(Managing a custom domain).
보안 자물쇠(HTTPS)도 추가 비용 없이 자동으로 적용된다. 깃허브는 도메인을 설정하면 Let's Encrypt로부터 보안 인증서를 자동으로 발급·적용하며, 같은 화면의 'Enforce HTTPS'를 켜면 항상 https 주소로 접속되게 만들 수 있다(Securing your GitHub Pages site with HTTPS). 참고로 지금 읽고 있는 이 블로그 q-bot.kr도 바로 이 방식, 즉 GitHub Pages 위에서 직접 산 도메인과 HTTPS를 붙여 운영하고 있다.
6) 수정하고 커밋하면 자동으로 바뀐다
한 번 만들어 두면 이후 관리가 단순하다. 글을 고치고 싶으면 저장소에서 해당 파일을 열어 연필 모양('Edit') 단추를 누르고 내용을 바꾼 뒤 저장하면 된다. 이때 저장 단추 이름이 'Commit changes'(커밋)다.
커밋(Commit)이란 '여기까지 이렇게 고쳤다'고 도장을 찍어 변경을 한 칸 기록으로 남기는 일이다. 커밋마다 누가 언제 무엇을 바꿨는지 메모가 붙어, 나중에 그 지점으로 되돌릴 수도 있다. 그리고 게시 소스 브랜치에 커밋이 올라오면, 그 변경이 사이트에 자동으로 다시 게시된다(Configuring a publishing source). 즉 '파일 수정 → 커밋 → 잠시 뒤 사이트 갱신'이 운영의 전부다. 따로 업로드 프로그램을 켜거나 서버에 접속할 필요가 없다.
7) 한계: 정적 사이트로 안 되는 것
무료에 간편한 대신, 할 수 있는 일에는 선이 있다. GitHub Pages는 정적 파일만 게시한다. 즉 방문자마다 다른 화면을 그리거나 데이터를 저장하는 '서버 쪽 처리'와 '데이터베이스'는 기본적으로 쓸 수 없다(What is GitHub Pages?). 회원 가입, 로그인, 댓글 저장, 결제, 예약 같은 기능은 GitHub Pages 단독으로는 만들 수 없다는 뜻이다. 이런 기능이 필요하면 별도의 서버나 외부 서비스를 함께 붙여야 한다.
용량과 트래픽에도 권장 한도가 있다. 게시된 사이트는 1GB를 넘지 않도록 권하고, 월 사용량은 100GB 정도의 느슨한(soft) 대역폭 한도를 둔다(GitHub Pages limits). 개인 블로그나 소개 페이지 수준에서는 거의 부딪힐 일이 없는 넉넉한 범위다.
정리
깃허브 정적 홈페이지(GitHub Pages)는 비개발자도 따라 할 수 있는, 비용이 들지 않는 홈페이지 운영 방법이다. 순서는 단순하다. 깃허브에 무료로 가입하고, 저장소를 만들고, index.html을 웹 화면에서 올리고, 설정에서 Pages를 켜 주소를 받는다. 원하면 내 도메인과 HTTPS를 붙이고, 이후에는 파일을 고쳐 커밋하기만 하면 사이트가 알아서 갱신된다. 정해진 내용을 보여 주는 글·소개·포트폴리오에는 충분하고, 로그인·결제 같은 기능이 필요할 때만 다른 도구를 더하면 된다.