Hugo, Jekyll과 같은 정적 사이트 생성기를 통한 블로그 배포

by

Hugo, Jekyll과 같은 정적 사이트 생성기를 통한 블로그 배포

Hugo와 Jekyll은 정적 사이트 생성기(Static Site Generator, SSG)로, 빠르고 효율적인 블로그 운영과 배포를 지원합니다. 이들은 **정적 파일(HTML, CSS, JavaScript)**을 미리 생성해 서버에 배포하며, 속도가 빠르고 유지보수가 간편합니다. 아래는 Hugo와 Jekyll을 사용한 블로그 배포의 구체적인 절차와 전략입니다.

1. Hugo와 Jekyll의 차이점

기능 Hugo Jekyll
언어 Go 언어 Ruby 언어
속도 매우 빠른 빌드 속도 느린 편
테마 지원 다수의 무료/유료 테마 지원 GitHub Pages와 호환되는 테마 제공
배포 방식 GitHub Pages, Netlify, Vercel 등 GitHub Pages 권장

2. Hugo를 사용한 블로그 배포

1) Hugo 설치와 초기화

  1. Hugo 설치:

    bash
    brew install hugo  # macOS
sudo apt-get install hugo  # Ubuntu

  2. 새 프로젝트 생성:

    bash
    hugo new site my-blog
cd my-blog

  3. 테마 추가:

    bash
    git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

  4. 테마 설정:
    config.toml 파일에 다음과 같이 테마를 설정합니다:

    toml
    theme = "ananke"

  5. 새 게시물 작성:

    bash
    hugo new posts/my-first-post.md

  6. 로컬 서버 실행:

    bash
    hugo server -D

    브라우저에서 http://localhost:1313으로 접속해 사이트를 미리보기합니다.

2) Hugo 사이트 빌드

배포를 위해 정적 파일을 생성합니다:

bash
hugo --minify

빌드된 파일은 public/ 디렉터리에 저장됩니다.

3) GitHub Pages에 배포

  1. GitHub 리포지토리 생성 후 로컬 저장소와 연결합니다:

    bash
    git remote add origin https://github.com/username/my-blog.git
git branch -M main

  2. 배포 스크립트 작성:
    .github/workflows/deploy.yml 파일 생성:

    yaml
    name: Deploy Hugo Site

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Install Hugo
      run: sudo apt-get install hugo

    - name: Build Hugo site
      run: hugo --minify

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

  3. 커밋 및 푸시:

    bash
    git add .
git commit -m "Initial commit"
git push origin main

  4. GitHub Pages에서 Settings > Pages로 이동해 GitHub Actions 배포를 활성화합니다.

3. Jekyll을 사용한 블로그 배포

1) Jekyll 설치와 초기화

  1. Jekyll 설치:

    bash
    gem install jekyll bundler

  2. 새 프로젝트 생성:

    bash
    jekyll new my-blog
cd my-blog

  3. 로컬 서버 실행:

    bash
    bundle exec jekyll serve

    브라우저에서 http://localhost:4000으로 접속해 사이트를 확인합니다.

2) Jekyll 사이트 배포

1) GitHub Pages에 배포

  1. GitHub 리포지토리 생성 후 로컬 저장소와 연결합니다:

    bash
    git remote add origin https://github.com/username/my-blog.git
git branch -M main

  2. Jekyll 설정:
    _config.yml 파일에 다음을 추가합니다:

    yaml
    remote_theme: minima

  3. GitHub Pages 배포:

    • GitHub 리포지토리에 커밋 후 푸시합니다: 
      bash
      git add .
git commit -m "Initial commit"
git push origin main

  4. Settings > Pages로 이동해 배포된 사이트를 확인합니다.

4. Netlify를 통한 Hugo/Jekyll 배포

  1. Netlify에 로그인하고 GitHub 리포지토리 연결.
  2. 빌드 설정:
    • Hugo: hugo --minify
    • Jekyll: jekyll build
    • 배포 디렉터리: public 또는 _site
  3. 변경 사항이 푸시되면 Netlify가 자동으로 배포합니다.

5. Vercel을 통한 배포

  1. Vercel에 가입하고 GitHub 리포지토리와 연결.
  2. 빌드 명령:
    • Hugo: hugo --minify
    • Jekyll: jekyll build
  3. 사이트 변경 시마다 Vercel이 자동으로 재배포합니다.

6. 결론

Hugo와 Jekyll은 빠르고 효율적인 정적 사이트 생성기입니다. GitHub Pages, Netlify, Vercel을 통해 자동 배포를 쉽게 설정할 수 있습니다. GitHub Actions를 사용하면 문법 검사와 배포를 자동화할 수 있어, 블로그 운영과 유지보수가 간편해집니다.

Leave a Comment