📘 [GithubPages] Jekyll hydejack 테마 적용 블로그 만들기 - 1

2025년 03월 01일 in Study / ETC on #Jekyll #GithubPages

[GithubPages] Jekyll hydejack 테마 적용 블로그 만들기

---

• 1. 왜 Jekyll Hydejack 테마를 선택했는가?
• 2. Jekyll Hydejack 테마 적용 방법 (window 환경)
  • 2-1. Ruby 설치
  • 2-1. Jekyll 설치
• 3. Hydejack 테마 다운로드
• 4. 필요한 Gem 설치
• 5. Jekyll 서버 실행
• 6. GibHub Pages에 배포
  • 6-1. GitHub에 새 저장소 생성
  • 6-2. git push
• 📑 Reference

1. 왜 Jekyll Hydejack 테마를 선택했는가?

---

웹 개발자로서 개발 공부 기록을 남기기 위해서 개인 블로그를 제작해보고 싶어서 찾아보다가 Jekyll 사용하기로 결정했다.

• 가독성이 우수 폰트, 줄 간격, 색상 대비 전반적인 디자인이 최적화되어 있다.
• 단순한 블로그 글뿐 아니라 프로젝트 소개, 자기소개, 이력서 템플릿 등 활용할수 있다.
• 정적 사이트이므로 빠른 로딩 속도
• 무료로 이용이 가능하며 Github 플랫폼 내에서 운영을 위한 인프라를 쉽게 해결이 가능하다.

2. Jekyll Hydejack 테마 적용 방법 (window 환경)

---

2-1. Ruby 설치

jekyll를 사용하기 위해서는 일단 ruby 설치가 필요하다. https://rubyinstaller.org/ 3.3.X (x64) 버전을 추천하길래 이걸로 설치했다. 설치 후 Start Command Prompt with Ruby 실행한다.

• 아래 명령어 확인 버전이 나오는지 확인

ruby -v
gem -v

2-1. Jekyll 설치

---

설치된 Start Command Prompt with Rudy 실행한다.

• jekyll 설치 명령어 실행

gem install jekyll bundler

• 설치확인

jekyll -v

정상적으로 설치가 되었는지 확인한다.

---

3. Hydejack 테마 다운로드

---

https://github.com/hydecorp/hydejack Hydejack 테마 무료버전을 다운받는다.

Github에서 clone을 해서 받거나 Download ZIP으로 받아도 된다. 원하는 로컬 경로에 저장한다.

git clone https://github.com/hydecorp/hydejack-starter-kit.git

---

4. 필요한 Gem 설치

---

Prompt에서 cd 명령어로 테마가 설치된 로컬 경로로 이동한뒤 설치한다. (ex cd my-blog)

bundle install
bundle update

설치중 문제가 발생할 경우에 bundle update도 실행한다.

---

5. Jekyll 서버 실행

---

bundle exec jekyll serve --trace

서버 실행이 정상적으로 될경우 http://127.0.0.1:4000 로컬 환경에서 실행 확인한다.

---

6. GibHub Pages에 배포

---

6-1. GitHub에 새 저장소 생성

repo name은 github_id.github.io 입력하고 생성한다.

---

6-2. git push

---

git init
git remote add origin https://github.com/사용자명/저장소명.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main

배포가 완료되면 http://sosiluv.github.io 접속이 되는지 확인한다.

????? 접속 시도를 해보니 404에러가 뜬다. _config.yml 설정파일에 들어가서 아래와같이 수정하고 다시 빌드해본다.

# file: `_config.yml`
#theme: jekyll-theme-hydejack
remote_theme: hydecorp/hydejack@v9

배포 완료!!😀

다음글 에서는 주요 설정 파일들을 변경하여 블로그 커스텀 하는 방법을 알아보겠습니다.☺️

---

📑 Reference

---

• https://github.com/hydecorp/hydejack+ https://hydejack.com/
• https://rubyinstaller.org/

---