GitHub Pages로 블로그 만들기
GitHub Pages 작동 방식
GitHub는 여러분의 계정 사용자명과 연결된 웹 페이지 서비스를 제공합니다. 꽤 멋지죠?
예를 들어, 제 GitHub 사용자 ID는 jayleekr입니다. https://github.com/jayleekr/jayleekr.github.io 에 새 블로그 저장소를 만들면, GitHub가 자동으로 https://jayleekr.github.io/ 에 해당 저장소와 연결된 웹사이트를 생성해줍니다.
이는 GitHub(원격 측)가 이러한 명명 규칙에 따라 자동으로 백엔드 웹 서버를 생성해준다는 의미입니다. 무료 호스팅을 받는 것과 같아요! 🎉
프론트엔드를 구축해봅시다!
프론트엔드 프레임워크
수많은 프론트엔드 프레임워크가 있지만, 빠르게 시작하고 실행하기 위해 가장 인기 있는 방법인 Jekyll을 사용하겠습니다.
Jekyll은 Tom Preston-Werner(GitHub 공동 창업자)가 Ruby-on-Rails를 사용해 만든 MIT 라이선스의 정적 사이트 생성기입니다.
(GitHub 공동 창업자가 만든 도구가 GitHub와 완벽하게 통합되는 건 당연하겠죠?)
1단계: 저장소 만들기
- GitHub로 가서 새 저장소를 만드세요
- 중요:
[사용자명].github.io로 이름을 지으세요- 예:
jayleekr.github.io
- 예:
- 공개(public)로 설정하세요 (무료 GitHub Pages 필수)
- README로 초기화하세요
2단계: Jekyll 테마 선택하기
처음부터 만들지 말고 미리 만들어진 테마를 사용해봅시다:
옵션 A: 테마 포크하기
- Jekyll 테마 둘러보기
- 마음에 드는 테마 찾기
- 내 계정으로 포크하기
- 저장소 이름을
[사용자명].github.io로 변경하기
옵션 B: 처음부터 시작하기
# 저장소 복제
git clone https://github.com/[사용자명]/[사용자명].github.io.git
cd [사용자명].github.io
# 기본 Jekyll 사이트 만들기
echo "Hello World" > index.html
# 커밋하고 푸시하기
git add .
git commit -m "Initial commit"
git push origin main3단계: 로컬 개발 환경 설정
게시하기 전에 로컬에서 테스트하려면:
Jekyll 설치
# macOS (Homebrew 사용)
brew install ruby
gem install jekyll bundler
# Ubuntu/Debian
sudo apt-get install ruby-dev
gem install jekyll bundler
# Windows
# rubyinstaller.org에서 Ruby 설치 프로그램 다운로드
gem install jekyll bundler로컬에서 실행
# 저장소 디렉토리에서
jekyll serve
# 또는 Gemfile이 있다면
bundle exec jekyll servehttp://localhost:4000에서 사이트를 확인하세요!
4단계: 블로그 커스터마이즈
기본 설정 (_config.yml)
title: 블로그 제목
description: 블로그에 대한 멋진 설명
baseurl: ""
url: "https://[사용자명].github.io"
# 빌드 설정
markdown: kramdown
highlighter: rouge
theme: minima
# 소셜 링크
github_username: github-사용자명
twitter_username: twitter-사용자명첫 번째 포스트 작성
파일 생성: _posts/2020-09-11-my-first-post.md
---
layout: post
title: "나의 첫 블로그 포스트!"
date: 2020-09-11 14:10:00 +0900
categories: general
---
# 안녕하세요!
GitHub Pages에서의 첫 블로그 포스트입니다.
정말 흥미진진해요! 🚀
## 제가 쓸 내용들
- 기술 관련
- 코딩 모험
- 잡다한 생각들
더 많은 콘텐츠를 기대해주세요!페이지 추가
about.md 생성:
---
layout: page
title: About
permalink: /about/
---
안녕하세요! 저는 [이름]이고, 여기서 이런 내용을 다루는 블로그를 운영합니다...5단계: 배포
GitHub Pages의 장점은 자동 배포입니다:
git add .
git commit -m "첫 포스트와 about 페이지 추가"
git push origin main몇 분 내에 변경사항이 https://[사용자명].github.io에 반영됩니다!
프로 팁
1. 커스텀 도메인 사용 (선택사항)
도메인을 담은 CNAME 파일 생성:
myblog.com그다음 DNS 설정을 GitHub Pages로 지정하세요.
2. SEO 최적화
_config.yml에 추가:
plugins:
- jekyll-sitemap
- jekyll-seo-tag3. Disqus로 댓글 기능 추가
_config.yml에 추가:
disqus:
shortname: disqus-단축이름4. Google Analytics
google_analytics: UA-XXXXXXXX-X문제 해결
빌드 실패
_config.yml문법 확인- 모든 포스트에 적절한 front matter가 있는지 확인
- 이미지 경로가 올바른지 확인
로컬 vs 프로덕션 차이
- 로컬에서
bundle exec jekyll serve사용 baseurl이 올바르게 설정되었는지 확인- 모든 링크가
site.baseurl접두사를 사용하는지 확인
느린 빌드 시간
- 플러그인 최소화
- 이미지 최적화
- 개발 시
incremental: true사용
고급 기능
커스텀 테마
# Gemfile에 추가
gem "theme-name"
# 설치
bundle install
# _config.yml 업데이트
theme: theme-name컬렉션
포트폴리오나 프로젝트 쇼케이스에 완벽:
collections:
projects:
output: true
permalink: /:collection/:name/다음 단계는?
이제 블로그가 생겼으니:
- 꾸준히 작성하기 - 짧은 포스트도 가치가 있어요
- 커뮤니티와 소통하기 - 다른 블로그에 댓글 달기
- 지식 공유하기 - 배운 것을 가르치기
- 점진적으로 커스터마이즈 - 시간이 지나면서 디자인 개선하기
기억하세요: 가장 좋은 블로그는 존재하고 정기적으로 업데이트되는 블로그입니다! 🚀