Table of Contents

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 설치와 초기화

Hugo 설치:

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

새 프로젝트 생성:

bash
hugo new site my-blog
cd my-blog

테마 추가:

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

테마 설정:
config.toml 파일에 다음과 같이 테마를 설정합니다:
```
toml
theme = "ananke"
```

새 게시물 작성:

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

로컬 서버 실행:
```
bash
hugo server -D
```
브라우저에서 http://localhost:1313으로 접속해 사이트를 미리보기합니다.

2) Hugo 사이트 빌드

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

bash
hugo --minify

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

3) GitHub Pages에 배포

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

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

배포 스크립트 작성:
.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

커밋 및 푸시:

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

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

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

1) Jekyll 설치와 초기화

Jekyll 설치:

bash
gem install jekyll bundler

새 프로젝트 생성:

bash
jekyll new my-blog
cd my-blog

로컬 서버 실행:
```
bash
bundle exec jekyll serve
```
브라우저에서 http://localhost:4000으로 접속해 사이트를 확인합니다.

2) Jekyll 사이트 배포

1) GitHub Pages에 배포

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

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

Jekyll 설정:
_config.yml 파일에 다음을 추가합니다:
```
yaml
remote_theme: minima
```

GitHub Pages 배포:

GitHub 리포지토리에 커밋 후 푸시합니다:

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

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

4. Netlify를 통한 Hugo/Jekyll 배포

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

5. Vercel을 통한 배포

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

6. 결론

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