0. 🚀 github 블로그를 하는 이유?

GitHub Pages는 무료로 웹사이트를 호스팅할 수 있고, 원하는 디자인을 자유롭게 커스터마이징할 수 있다는 점에서 강력한 장점이 있습니다.

저의 경우,

• Velog에는 내가 공부한 내용의 날것을 중심으로 기록하고,
• GitHub 블로그에는 공부 + 경험한 콘텐츠를 정리해서 올릴 예정입니다.
• 또한, 목차 및 카테고리 관리가 가능하다는 점이 큰 장점입니다.

하지만, 내가 직접 디자인한 테마나 설정을 다른 사람이 가져갈 수 있다는 점이 단점입니다.
따라서, 웹사이트는 GitHub Pages로 호스팅하면서도, 저장소(Repo)는 Private으로 유지하는 방식으로 운영해보겠습니다. 🔐

1. 배포 절차

🛠 (1) GitHub 저장소(Repo) 생성

GitHub에 접속하여 새로운 저장소(Repository)를 생성합니다.
저장소 이름을 your-blog-name(예: my-blog)으로 지정합니다.
저장소를 Private으로 설정하여 코드 공개를 방지합니다.
GitHub Pages를 사용하기 위해 README.md 파일을 생성한 후 저장합니다.

🎨 (2) 테마 선택 및 적용

GitHub 블로그는 Jekyll 기반으로 동작하므로, 원하는 Jekyll 테마를 선택해야 합니다.
Jekyll 공식 테마: https://jekyllthemes.io/
Minimal Mistakes 테마 추천: https://github.com/mmistakes/minimal-mistakes
테마를 선택한 후 테마의 GitHub Repo를 Clone하거나 테마 파일을 다운로드합니다.

git clone https://github.com/mmistakes/minimal-mistakes.git

다운로드한 파일을 내 GitHub 블로그 저장소에 업로드합니다.

📦 (3) Jekyll 및 Bundle 설치

Jekyll 블로그를 로컬에서 빌드하고 미리보기하려면, Jekyll과 Bundler를 설치해야 합니다.

✅ Jekyll & Bundler 설치
Ruby 설치 확인 (Jekyll은 Ruby 기반)

ruby -v

만약 Ruby가 설치되지 않았다면, 공식 Ruby 다운로드에서 설치합니다.

✅ Bundler 및 Jekyll 설치

gem install bundler jekyll

✅ Jekyll 프로젝트 생성 (선택 사항)

jekyll new my-blog
cd my-blog
bundle install

✅ 로컬 서버 실행하여 블로그 확인

bundle exec jekyll serve

실행 후, http://127.0.0.1:4000에서 블로그가 정상적으로 보이는지 확인합니다.

2. 이쁜 아이콘 배지 가져오기

-> 배지는 https://shields.io/
-> 아이콘은 https://simpleicons.org/
를 참고하면 됩니다..!

simple icon에 검색을 통해서

https://img.shields.io/badge/{배지이름}-{css컬러}?style={스타일}&logo={로고}&logoColor={로고컬러}
<- 여기에 맞춰서 적으면 됩니다.
ex)

<img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=Python&logoColor=white">
    <img src="https://img.shields.io/badge/FastAPI-009688?style=for-the-badge&logo=FastAPI&logoColor=white">
    <img src="https://img.shields.io/badge/Airflow-017CEE?style=for-the-badge&logo=Apache Airflow&logoColor=white">
    <img src="https://img.shields.io/badge/Pytorch-EE4C2C?style=for-the-badge&logo=PyTorch&logoColor=white">
    <img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=Docker&logoColor=white">
    <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=HTML5&logoColor=white">
    <img src="https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=CSS3&logoColor=white">
    <img src="https://img.shields.io/badge/Javascript-F7DF1E?style=for-the-badge&logo=Javascript&logoColor=black">
    <img src="https://img.shields.io/badge/Mysql-4479A1?style=for-the-badge&logo=Mysql&logoColor=white">
    <img src="https://img.shields.io/badge/Github-181717?style=for-the-badge&logo=Github&logoColor=white">
    <img src="https://img.shields.io/badge/Github Action-2099FF?style=for-the-badge&logo=Github Actions&logoColor=white">

<- 실행해보면 마크다운 이미지가 나옵니다.

3. 추가학습

github blog를 만들면서 알게된 ruby, jekyll, gem,bundle에 대해서 살펴보자

개념	역할	연관성
💎Ruby	프로그래밍 언어	Jekyll과 Gem, Bundle이 모두 Ruby 기반
Gem	Ruby 패키지 및 패키지 매니저	Jekyll도 하나의 Gem으로 제공됨
🌐Jekyll	정적 사이트 생성기	Ruby와 Gem을 사용하여 동작
📦Bundle (Bundler)	Gem 의존성 관리 도구	Jekyll을 포함한 여러 Gem을 효율적으로 관리

🔗 Jekyll은 Ruby로 작성되었으며, Gem 패키지로 배포됨. Bundler는 Jekyll을 포함한 여러 패키지를 관리하는 역할을 합니다.

• Ruby
  → Jekyll을 실행하는 데 필요한 프로그래밍 언어.

• Jekyll
  → Ruby 기반의 정적 웹사이트 생성기. (Markdown 파일을 HTML로 변환하는 역할)
  → 블로그, 문서 사이트 등을 쉽게 만들 수 있음.

• Gem
  → Ruby에서 사용하는 패키지(라이브러리) 관리 시스템.
  → Python의 pip, Node.js의 npm과 비슷한 역할.
  → Jekyll도 gem으로 제공되며, 설치할 때 gem install jekyll을 사용.

• Bundler (bundle)
  → 여러 개의 gem을 프로젝트 단위로 관리하는 의존성 관리 도구.
  → 프로젝트마다 특정 gem 버전을 유지하고, Gemfile을 이용해 종속성을 정의함.
  → bundle install을 실행하면 Gemfile에 명시된 모든 gem이 설치됨.