GitHub Pages + Jekyll 블로그 완전 가이드

prfparkst
By -prfparkst
4월 05, 2026
0

 GitHub Pages + Jekyll 블로그 완전 가이드

1. 환경 설정 (로컬 개발 환경)

필수 설치 목록

# 1. Ruby 설치 (Windows: RubyInstaller, Mac: brew)
brew install ruby        # Mac
# Windows: https://rubyinstaller.org/

# 2. Jekyll & Bundler 설치
gem install jekyll bundler

# 3. 버전 확인
ruby -v
jekyll -v

GitHub 저장소 생성

저장소 이름 규칙: 반드시 → [GitHub아이디].github.io
예: parkblog.github.io

로컬에 클론 & 초기화

git clone https://github.com/[아이디]/[아이디].github.io.git
cd [아이디].github.io

# Jekyll 사이트 초기화
jekyll new . --force

# 로컬 미리보기 실행
bundle exec jekyll serve
# → http://localhost:4000 에서 확인

2. 폴더 구조 이해

[아이디].github.io/
│
├── _config.yml         ← ★ 핵심 설정 파일 (SEO 포함)
├── _posts/             ← 블로그 글 저장 폴더
│   └── 2024-01-15-제목.md
├── _layouts/           ← 페이지 레이아웃 템플릿
├── _includes/          ← 공통 HTML 조각 (헤더/푸터)
├── _sass/              ← 스타일시트
├── assets/             ← 이미지, CSS, JS
├── index.md            ← 메인 페이지
└── Gemfile             ← Ruby 패키지 목록

3. ★ _config.yml 완전 SEO 설정

# =============================================
# 기본 사이트 정보 (SEO 핵심)
# =============================================
title: "박교수의 마케팅 인사이트"
description: >-
  35년 대학 교수 경험을 바탕으로 마케팅 전략, 
  디지털 마케팅, 콘텐츠 전략을 쉽게 풀어드립니다.
  
# ★ 실제 배포 URL (정확히 입력 필수)
url: "https://[아이디].github.io"
baseurl: ""

# 작성자 정보 (구조화 데이터에 활용)
author:
  name: "박[이름]"
  email: "your@email.com"
  bio: "마케팅학과 명예교수 | 35년 강단 경력"
  
# 언어 & 인코딩
lang: "ko-KR"
timezone: "Asia/Seoul"
encoding: "UTF-8"

# =============================================
# SEO 플러그인 설정
# =============================================
plugins:
  - jekyll-seo-tag          # ★ 메타태그 자동 생성
  - jekyll-sitemap          # ★ sitemap.xml 자동 생성
  - jekyll-feed             # RSS 피드 생성
  - jekyll-paginate         # 페이지네이션

# =============================================
# Open Graph / SNS 공유 미리보기
# =============================================
twitter:
  username: "@yourhandle"
  card: "summary_large_image"   # 트위터 카드 형식

social:
  name: "박[이름]"
  links:
    - "https://www.youtube.com/@yourchannel"

logo: "/assets/img/logo.png"    # 사이트 로고 (구글 검색 노출)

# =============================================
# 기본 포스트 설정 (SEO용 Front Matter 기본값)
# =============================================
defaults:
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      author: "박[이름]"
      comments: true
      share: true
      # ★ 기본 OG 이미지 (썸네일 없을 때 대체)
      image: "/assets/img/default-og.jpg"

# =============================================
# 퍼머링크 구조 (SEO 중요!)
# =============================================
# ★ 추천: 날짜 없이 카테고리+제목 구조
permalink: /:categories/:title/
# 예시 URL → /marketing/digital-strategy/

# =============================================
# 페이지네이션
# =============================================
paginate: 10                    # 메인 페이지 글 수
paginate_path: "/page:num/"

# =============================================
# 제외 파일 (크롤러 불필요 파일)
# =============================================
exclude:
  - Gemfile
  - Gemfile.lock
  - README.md
  - node_modules/
  - vendor/

Gemfile에 플러그인 추가

group :jekyll_plugins do
  gem "jekyll-seo-tag"
  gem "jekyll-sitemap"
  gem "jekyll-feed"
  gem "jekyll-paginate"
end

bundle install   # 설치 실행

4. _layouts/default.html — SEO 태그 삽입

<head> 안에 반드시 추가:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  {% seo %}          <!-- ← jekyll-seo-tag 핵심 한 줄 -->
  {% feed_meta %}    <!-- ← RSS 피드 링크 -->
</head>

5. 포스팅 방법 & Front Matter 완전판

파일명 규칙

_posts/YYYY-MM-DD-영문-제목.md
예: _posts/2024-01-15-digital-marketing-strategy.md

Front Matter (글 상단 메타정보) — SEO 완전 설정

---
layout: post
title: "디지털 마케팅 전략 완전 가이드 2024"   # ★ 60자 이내
description: "35년 경력 마케팅 교수가 알려주는 
              디지털 마케팅 핵심 전략 10가지"    # ★ 150자 이내

# ★ SEO 핵심: URL에 들어갈 슬러그
permalink: /marketing/digital-strategy-2024/

# 카테고리 & 태그 (사이트맵 구조화)
categories: [마케팅, 디지털마케팅]
tags: [콘텐츠전략, SNS마케팅, 브랜딩, SEO]

# 날짜
date: 2024-01-15 09:00:00 +0900
last_modified_at: 2024-01-20 09:00:00 +0900  # ★ 최신 업데이트일

# OG 이미지 (SNS 공유 썸네일)
image:
  path: /assets/img/posts/digital-marketing-2024.jpg
  alt: "디지털 마케팅 전략 인포그래픽"

# 기타
author: 박[이름]
comments: true
published: true         # false면 비공개
---

## 본문 시작...

6. 글쓰기 팁 (SEO + 가독성)

Markdown 작성 요령

## H2 소제목 — 핵심 키워드 포함 (H1은 title이 자동 생성)

본문 첫 단락에 **핵심 키워드**를 자연스럽게 포함.

### H3 세부 항목

- 목록은 스캔하기 쉽게
- 문장은 3줄 이내로

> 인용구로 핵심 메시지 강조

![이미지 설명](../assets/img/photo.jpg)
<!-- ★ alt 텍스트 반드시 작성 → 이미지 SEO -->

SEO 체크리스트 (글 발행 전)

항목 기준
title 핵심 키워드 포함, 60자 이내
description 검색 결과 미리보기, 150자 이내
이미지 alt 모든 이미지에 한글 설명
내부 링크 관련 글 2~3개 연결
글 길이 최소 800자 이상 권장
permalink 영문 소문자, 하이픈 구분

7. Google 검색 등록 (발행 후)

1. Google Search Console 접속
   → https://search.google.com/search-console

2. 속성 추가 → URL 방식 → [아이디].github.io 입력

3. 소유권 확인 → HTML 태그 방식 선택
   → _config.yml에 추가:
   
   google_site_verification: "발급받은코드"

4. Sitemap 제출
   → Search Console → Sitemaps → 
     [아이디].github.io/sitemap.xml 입력

8. 배포 (GitHub에 올리기)

# 글 작성 후 매번 실행
git add .
git commit -m "POST: 디지털 마케팅 전략 글 추가"
git push origin main

# → 1~3분 후 자동 빌드 & 배포 완료
# → https://[아이디].github.io 에서 확인

추천 테마 (빠른 시작)

테마 특징 추천 대상
Chirpy SEO 최적화, 다크모드 기술/전문 블로그
Minimal Mistakes 커스터마이징 풍부 포트폴리오 겸용
Hydejack 디자인 세련됨 브랜딩 중시

Chirpy 설치 (가장 권장):

# Chirpy Starter 템플릿으로 새 저장소 생성
# https://github.com/cotes2046/chirpy-starter 에서 
# "Use this template" 클릭 → 저장소명: [아이디].github.io

핵심 요약: _config.yml의 SEO 플러그인 3개(jekyll-seo-tag, jekyll-sitemap, jekyll-feed)와 각 글의 Front Matter(title·description·image)만 잘 설정해도 구글 검색 노출의 80%는 해결됩니다. 궁금한 특정 단계가 있으면 더 자세히 안내해 드릴게요!

Tags:
prfparkst

prfparkst

버킷리스트, 걸어서122개국여행, 챗지피티, 애드센스,블로그,시나리오,숏츠

    You Might Like

    자세히 보기
    GITHUB

    댓글 쓰기

    0댓글

    댓글 쓰기 (0)
    기타 앱과 공유
    복사 글 링크