Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

devyulbae/devyulbae.github.io

Open more actions menu

Repository files navigation

Jekyll 테크 블로그 템플릿

기술 블로그를 빠르게 시작하기 위한 Jekyll 템플릿입니다. 개발자를 위한 다양한 기능과 깔끔한 디자인을 제공합니다.

📚 목차

🚀 시작하기

  1. 이 저장소를 Fork 또는 Clone
  2. 저장소 이름을 {username}.github.io로 변경
  3. _config.yml 설정 수정
  4. GitHub Pages 활성화

디렉토리 구조

{username}.github.io/
├── _posts/           # 블로그 포스트
├── _pages/           # 개별 페이지
├── categories/       # 카테고리 페이지
├── search/          # 검색 페이지
├── _data/           # 설정 데이터
├── _includes/       # 재사용 컴포넌트
├── _layouts/        # 페이지 레이아웃
├── assets/          
│   ├── css/         # 스타일시트 (기능별로 분리됨)
│   ├── js/          # 자바스크립트
│   └── images/      # 이미지 파일
│       └── posts/   # 포스트별 이미지 (자동 생성)
└── index.html       # 메인 페이지

💎 기본 기능

  • 📱 반응형 디자인
  • 🎨 4가지 테마 지원 (Dark/Light/Blue/Neon)
  • 🔍 포스트 검색 기능
  • 📑 목차 자동 생성
  • 🏷️ 카테고리 시스템
  • 📊 GitHub 활동 그래프
  • 🌙 테마 전환 버튼
  • 📁 포스트별 이미지 폴더 자동 생성

CSS 구조

  • 기능별로 분리된 CSS 파일들
    • base.css: 기본 스타일
    • layout.css: 레이아웃
    • header.css: 헤더 컴포넌트
    • footer.css: 푸터 컴포넌트
    • sidebar.css: 사이드바
    • post.css: 포스트 페이지
    • search.css: 검색 기능
    • toc.css: 목차
    • github-calendar.css: GitHub 캘린더

⚙️ 개발 환경 설정

  1. Ruby 설치
  2. Python 설치 (이미지 관리 자동화를 위해 필요)
  3. 의존성 설치:
gem install bundler jekyll
bundle install
pip install watchdog  # Python 의존성 설치
  1. 로컬 서버 실행:
./scripts/start

이 스크립트는 다음 작업을 수행합니다:

  • Jekyll 로컬 서버 실행
  • Python 모니터링 스크립트 실행 (포스트 이미지 폴더 자동 생성 및 관리)
  • 이미지 메타데이터 CSV 관리

🎨 커스터마이징

_config.yml 설정

# 사이트 기본 설정
title: 블로그 제목
description: 블로그 설명
default_theme: dark  # dark, light, blue, neon 중 선택

# 프로필 정보
author:
  name: 이름
  social:
    github: username
    linkedin: username

포스트 작성

---
layout: post
title: "제목"
categories: [카테고리]
---

이미지 관리

  • 포스트 작성 시 자동으로 assets/images/posts/YYYY-MM-DD-title 형식의 이미지 폴더가 생성됩니다
  • 해당 폴더에 이미지를 넣고 마크다운에서 상대 경로로 참조할 수 있습니다

🔧 문제 해결 및 기여

  • 이슈는 GitHub Issues에 등록
  • 개선 제안은 Pull Request로 제출
  • 라이선스: MIT

🔜 개발 예정 기능

  1. 💬 댓글 시스템
  2. 👀 포스트 조회수 추적
  3. 📋 코드 블록 복사 버튼
  4. 🗺️ SEO 최적화
  5. 📱 모바일 메뉴 개선

⭐ 이 템플릿이 유용하다면 Star를 눌러주세요!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.