심플한 사진 갤러리 정적 웹사이트: GitHub Pages & Jekyll

GitHub Pages와 GitHub Actions로 Jekyll 사이트 자동 배포하기 🖼️

최근 사진을 찍는게 확실한 취미로 자리잡힌게 느껴져서 여기저기 마음에 드는 사진을 찍으러 다니고 있는데요. 이걸 공유하고 싶다는 욕구가 불쑥 생겨버렸습니다. 그래서 가장 쉽게 공유할 수 있는 방법을 생각하다가 문득 github page라는 최강의(?) 정적 웹사이트 시스템이 생각났습니다.

이런 계기로 저의 취미를 좀더 넓게 공유하고 관리하면 좋겠다는 바람과 함께 만든 사이트를 기록해보고자 합니다.

기능이 많은 것도 아니고 어려운 로직이 들어간 것도 아니지만 정말 가볍게 공유하기 좋은거 같아 저 같은 개발도하고 사진도 좋아하는 분들에게 이 글을 바칩니다!

또한 GitHub Pages와 Jekyll을 활용해 온라인 개인 사진 전시 사이트를 만드는 과정과 자동 배포 설정까지 관심있으신 분들은 참고해보시면 좋을거 같아요!

이 글은 Ruby 설치부터 GitHub Actions로 자동 배포하는 방법까지 다룹니다. 피드백은 언제나 환영입니다!!

최종 결과물과 link 먼저 공유합니다!

https://hoya324.github.io/

HoyaGallery

사진 찍는게 취미인 개발자의 전시

hoya324.github.io

Ruby 설치

Jekyll을 실행하기 위한 Ruby 환경을 준비합니다.

Ruby 버전 설정: GitHub Actions에서는 Ruby 3.3.5을 사용하도록 설정했습니다. 로컬 환경에서도 동일한 버전을 설치해 사용하는 것이 좋습니다.
Ruby 설치 명령 (macOS/Linux):

brew install ruby

Windows: Windows 사용자는 RubyInstaller를 사용해 Ruby를 설치합니다. 설치 후 환경 변수를 설정해 ruby와 gem 명령어를 사용할 수 있도록 합니다.
Bundler 설치:
gem install bundler

Jekyll 프로젝트 초기화 및 설정

Jekyll 프로젝트를 초기화하고 GitHub Pages 호스팅을 위한 기본 설정을 진행합니다.

1. Jekyll 설치:

gem install jekyll

2. 프로젝트 생성:

jekyll new HoyaGallery 
cd HoyaGallery

3. 필수 Gems 추가:
_config.yml에서 사용할 테마와 필요한 플러그인을 설정합니다.

예를 들어, minimal-mistakes-jekyll 테마를 사용할 경우 Gemfile에 다음을 추가합니다.

gem "minimal-mistakes-jekyll"
gem "jekyll-feed"

전체 Gemfile

source "https://rubygems.org"

# Jekyll and dependencies
gem "jekyll", "~> 4.3.4"
gem "webrick", "~> 1.8.2" # For local server support
gem "jekyll-sass-converter", "~> 3.0.0"
gem "jekyll-feed", "~> 0.15.1" # RSS feed plugin

# Minimal Mistakes Jekyll theme
gem "minimal-mistakes-jekyll", "~> 4.26.2"

# Optional
gem "i18n", "~> 1.14.6"
gem "mercenary", "~> 0.4.0"
gem "rouge", "~> 4.4.0"
gem "terminal-table", "~> 3.0.2"
gem "public_suffix", "~> 6.0.1"
gem "concurrent-ruby", "~> 1.3.4"
gem "sass-embedded", "~> 1.80.4"
gem "rexml", "~> 3.3.9"
gem "unicode-display_width", "~> 2.6.0"
gem "google-protobuf", "~> 4.28.3"
gem "faraday", "~> 2.12.0"
gem "faraday-net_http", "~> 3.3.0"
gem "json", "~> 2.7.4"
gem "logger", "~> 1.6.1"
gem "uri", "~> 0.13.1"
gem "rake", "~> 13.2.1"

4. Gemfile 업데이트:

bundle install # npm install 같이 의존성 설치

bundle exec jekyll serve # 서버를 실행해볼 수 있다. http://127.0.0.1:4000 로 확인

`_config.yml` 설정

_config.yml 파일에서 사이트 제목, 이메일, url, 테마, 플러그인, 파일 경로를 설정합니다.

title: "HoyaGallery"
email: "hoyana1225@example.com"
description: "사진 찍는게 취미인 개발자의 전시"
baseurl: "" # 루트 경로로 설정합니다.
url: "https://hoya324.github.io" # GitHub Pages URL
github_username: Hoya324
theme: "minimal-mistakes-jekyll"
markdown: kramdown
permalink: "/:categories/:title/" # 기본 permalink 설정

# Jekyll 플러그인 설정
plugins:
  - jekyll-feed
  - jekyll-sitemap # 사이트맵 플러그인 추가 가능

# 파일 경로 설정
collections_dir: _collections
data_dir: _data
layouts_dir: _layouts
includes_dir: _includes
include:
  - assets

GitHub Actions 자동 배포 설정

main 브랜치에 푸시할 때마다 Jekyll 사이트가 자동으로 빌드되고 GitHub Pages에 배포되도록 설정합니다.

GitHub Actions 워크플로 파일 작성: .github/workflows/jekyll.yml

github actions로 직접 배포하는 경우 권한 설정과 setting > page 에서 source를 바꿔줘야합니다.

또한 Actions > General 에서 권한을 바꿔줘야 Github Token을 사용할 수 있습니다.

CI-CD 파이프라인

name: Deploy Jekyll site to Pages

on:
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      # Ruby 설정
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3.5'
          bundler-cache: true
      
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Build with Jekyll
        # Outputs to the './_site' directory by default
        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        # Automatically uploads an artifact from the './_site' directory by default
        uses: actions/upload-pages-artifact@v3

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

이 파일은 main 브랜치에 푸시될 때마다 Jekyll 사이트를 빌드하고 peaceiris/actions-gh-pages@v3 액션을 사용하여 dist 폴더의 콘텐츠를 GitHub Pages에 배포합니다.

Jekyll 사이트 레이아웃 및 스타일링

사진 갤러리 페이지 레이아웃을 구성하고 스타일을 적용합니다.

HTML (`index.html`)

---
layout: default
---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hoya's photos</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const grid = document.querySelector(".gallery-grid");

            function arrangeImages() {
                const items = Array.from(document.querySelectorAll(".gallery-item img"));

                items.forEach(img => {
                    const item = img.closest('.gallery-item');
                    const aspectRatio = img.naturalWidth / img.naturalHeight;

                    // 가로 비율이 1.5 이상이면 두 칸 차지
                    if ((img.naturalWidth > img.naturalHeight) || aspectRatio > 1.5) {
                        item.classList.add("wide");
                    } else {
                        item.classList.remove("wide");
                    }
                });
            }

            arrangeImages();
            window.addEventListener('resize', arrangeImages); // 창 크기 변경 시 레이아웃 다시 적용
        });
    </script>
</head>
<body>
    <main>
        <div class="gallery-container">
            <aside class="gallery-sidebar">
                <h2>Photo Log</h2>
            </aside>
            <section class="gallery-grid">
                {% for photo in site.data.photos %}
                    <div class="gallery-item">
                        <img src="{{ '/assets/images/gallery/' | append: photo.src }}" alt="{{ photo.alt }}">
                    </div>
                {% endfor %}
            </section>
        </div>
    </main>

    <footer class="gallery-footer">
        <p>Contact: <a href="mailto:hoyana1225@gmail.com">hoyana1225@gmail.com</a></p>
        <p>GitHub: <a href="https://github.com/Hoya324">https://github.com/Hoya324</a></p>
        <p>Blog: <a href="https://hoya324.tistory.com/">https://hoya324.tistory.com/</a></p>
    </footer>
</body>
</html>

CSS (`styles.css`)

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

/* 모바일에서는 한 행에 사진 2개 */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

최종 확인 및 배포

모든 설정이 완료되면 main 브랜치에 푸시하여 GitHub Actions가 자동으로 빌드 및 배포를 실행합니다.

Hoya324.github.io에서 배포된 웹사이트를 확인할 수 있습니다.

소스코드

https://github.com/Hoya324/Hoya324.github.io

GitHub - Hoya324/Hoya324.github.io

Contribute to Hoya324/Hoya324.github.io development by creating an account on GitHub.

github.com

추후에 좋은 기능들을 느긋하게 업데이트 해볼 생각입니다!!

Hoya의 기억창고👨‍🌾

심플한 사진 갤러리 정적 웹사이트: GitHub Pages & Jekyll

GitHub Pages와 GitHub Actions로 Jekyll 사이트 자동 배포하기 🖼️

Ruby 설치

Jekyll 프로젝트 초기화 및 설정

`_config.yml` 설정

GitHub Actions 자동 배포 설정

Jekyll 사이트 레이아웃 및 스타일링

HTML (`index.html`)

CSS (`styles.css`)

최종 확인 및 배포

티스토리툴바

심플한 사진 갤러리 정적 웹사이트: GitHub Pages & Jekyll

GitHub Pages와 GitHub Actions로 Jekyll 사이트 자동 배포하기 🖼️

Ruby 설치

Jekyll 프로젝트 초기화 및 설정

_config.yml 설정

GitHub Actions 자동 배포 설정

Jekyll 사이트 레이아웃 및 스타일링

HTML (index.html)

CSS (styles.css)

최종 확인 및 배포

티스토리툴바

`_config.yml` 설정

HTML (`index.html`)

CSS (`styles.css`)