GitHub Pages로 무료 웹사이트 호스팅하기

GitHub Pages란 무엇인가요?

GitHub Pages는 GitHub에서 제공하는 정적 웹사이트 호스팅 서비스입니다. HTML, CSS, JavaScript로 구성된 정적 사이트를 완전 무료로 호스팅할 수 있으며, GitHub 리포지토리를 통해 자동으로 배포됩니다.

주요 특징

완전 무료: 저장 공간, 트래픽 제한 없이 무료 사용
자동 배포: Git push 시 자동으로 사이트 빌드 및 배포
HTTPS 지원: 무료 SSL/TLS 인증서 자동 발급
Jekyll 지원: 정적 사이트 생성기 기본 지원
커스텀 도메인: 개인 도메인 연결 가능

시작하기

1. 리포지토리 생성

GitHub에서 새 리포지토리를 생성합니다. 리포지토리 이름에 따라 URL이 결정됩니다:

username.github.io: 메인 도메인 (https://username.github.io)
username.github.io/repo-name: 프로젝트 페이지 (https://username.github.io/repo-name)

2. 파일 구조

기본적인 파일 구조는 다음과 같습니다:

username.github.io/
├── index.html          # 메인 페이지
├── _config.yml         # Jekyll 설정 파일
├── _posts/            # 블로그 포스트
├── _layouts/          # 레이아웃 템플릿
├── _includes/         # 재사용 가능한 부분
├── css/               # 스타일시트
├── js/                # 자바스크립트
└── images/            # 이미지 파일

3. GitHub Pages 활성화

리포지토리의 Settings 탭으로 이동
왼쪽 메뉴에서 Pages 클릭
Source에서 Deploy from a branch 선택
main 브랜치와 / (root) 폴더 선택
Save 클릭

몇 분 내에 사이트가 배포되고, https://username.github.io에서 접근할 수 있습니다.

Jekyll 사용하기

GitHub Pages는 Jekyll을 기본으로 지원합니다. Jekyll을 사용하면 블로그 포스트 관리가 훨씬 쉬워집니다.

기본 설정 파일 (_config.yml)

title: My Blog
description: Welcome to my blog
url: https://username.github.io

# Build settings
markdown: kramdown
highlighter: rouge
permalink: /:categories/:title/

# Plugins
plugins:
  - jekyll-sitemap
  - jekyll-seo-tag

블로그 포스트 작성

_posts/ 폴더에 YYYY-MM-DD-title.md 형식으로 파일을 생성합니다:

---
layout: post
title: My First Post
date: 2026-01-05
categories: [Life]
tags: [first, blog]
---

Hello, world! This is my first blog post.

CI/CD 파이프라인 구성

GitHub Actions를 사용하여 자동 배포 파이프라인을 구성할 수 있습니다.

GitHub Actions 워크플로우

.github/workflows/jekyll.yml 파일을 생성합니다:

name: Jekyll site CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Setup Ruby
      uses: ruby/setup-ruby@v1
      with:
        ruby-version: '3.2'
        bundler-cache: true

    - name: Build site
      run: bundle exec jekyll build

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./_site

커스텀 도메인 연결

1. DNS 설정

도메인 제공자에서 다음 DNS 레코드를 추가합니다:

타입	이름	값
CNAME	www	username.github.io
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153

2. CNAME 파일 생성

리포지토리 루트에 CNAME 파일을 생성하고 도메인을 입력합니다:

yourdomain.com

3. HTTPS 활성화

GitHub Pages 설정에서 Enforce HTTPS 옵션을 활성화합니다.

SEO 최적화

1. Sitemap 생성

jekyll-sitemap 플러그인을 사용하면 자동으로 sitemap이 생성됩니다:

plugins:
  - jekyll-sitemap

2. robots.txt

User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml

3. 메타 태그

<meta name="description" content="사이트 설명">
<meta name="keywords" content="키워드1, 키워드2">
<meta name="author" content="작성자">

<!-- Open Graph -->
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="페이지 URL">

문제 해결

사이트가 표시되지 않을 때

배포 상태 확인: 리포지토리의 Actions 탭에서 빌드 상태 확인
파일 이름 확인: index.html이 루트 폴더에 있는지 확인
브랜치 확인: 올바른 브랜치에서 배포되고 있는지 확인

Jekyll 빌드 오류

Gemfile 확인: 필요한 gem이 모두 포함되어 있는지 확인
Ruby 버전 확인: 지원되는 Ruby 버전을 사용하는지 확인
문법 오류: YAML frontmatter의 문법을 확인

결론

GitHub Pages는 정적 웹사이트 호스팅을 위한 훌륭한 솔루션입니다. 무료로 사용할 수 있고, 자동 배포 기능과 CI/CD 파이프라인을 통해 개발 프로세스를 자동화할 수 있습니다.

이 가이드를 따라하면 몇 분 안에 자신만의 웹사이트를 GitHub Pages에 배포할 수 있습니다.