Hugo, Jekyll과 같은 정적 사이트 생성기를 통한 블로그 배포 - 블로그스팟버전- artsense!!kr

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를 사용하면 문법 검사와 배포를 자동화할 수 있어, 블로그 운영과 유지보수가 간편해집니다.