Github Page 생성

Github Pages란?

• GitHub Pages는 GitHub에서 무료로 제공하는 정적 웹사이트 호스팅 서비스
• HTML, CSS, JavaScript 파일을 포함한 정적 웹사이트를 GitHub 리포지토리에서 직접 호스팅 할 수 있음

---

Github Pages 특징

• 무료로 사용 가능
• Github Repository 에서 직접 웹 사이트 호스팅 가능
• CI/CD 없이 자동 배포 지원(Github Action 수정하여 배포 가능)
• Jekyll을 이용한 블로그/문서 사이트 생성 가능
• custom domain도 연결이 가능

---

GitHub Pages 유형

GitHug Page에는 사용자(=조직) 페이지와 프로젝트 페이지 2가지 유형이 있음

1️⃣ 사용자/조직 페이지 (User/Organization Page)

• GitHub 계정당 1개만 생성 가능 🛑
• 리포지토리 이름이 {username}.github.io 여야 함
• URL: https://{username}.github.io/
• 용도: 개인 블로그, 포트폴리오 웹사이트 ✅ 예제 👉 https://gyusanity.github.io/

2️⃣ 프로젝트 페이지 (Project Page)

• 여러 개 생성 가능 ⭕
• 리포지토리 이름은 자유롭게 설정 가능
• URL: https://{username}.github.io/{repo-name}/
• 용도: 프로젝트 문서, 데모 사이트, 앱 소개 페이지 ✅ 예제
  👉 https://gyusanity.github.io/my-project/
  👉 https://gyusanity.github.io/my-portfolio/
  

---

Jekyll 테마를 활용한 Git Page 생성

• 필수 패키지 설치 및 RubyGems 환경 변수 설정

  sudo apt update && sudo apt upgrade -y
  sudo apt install -y ruby-full build-essential zlib1g-dev git
  echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
  echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
  source ~/.bashrc
  

• Jekyll 및 Bundler 설치

  gem install jekyll bundler
  jekyll -v
  

• Chirpy 테마 복사 및 설정

  git clone https://github.com/cotes2020/jekyll-theme-chirpy.git yourusername.github.io
  cd yourusername.github.io
  

• bundler로 필요한 패키지 설치 및 정보 설정

bundle install
# _config.yml
title: "Your Blog Title"
tagline: "A Minimal Blog Theme"
description: "블로그 설명을 여기에 적어줘."
author:
  name: "Your Name"
  email: "your-email@example.com"

# 사이트 URL 설정
url: "https://yourusername.github.io"
baseurl: ""

# 테마 설정
theme_mode: "dark"

• CI/CD를 위한 github action 등록(.github/workflows/pages-deploy.yml)

name: Deploy Jekyll site to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      # 🔹 Setup Node.js (Chirpy의 JS 빌드를 위해 추가)
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      # 🔹 Install npm dependencies & Build JavaScript (필수)
      - name: Install Node.js dependencies and build assets
        run: |
          npm install
          npm run build

      # 🔹 Setup Ruby & Jekyll
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
          bundler-cache: true

      - name: Install Jekyll dependencies
        run: |
          bundle config set --local path 'vendor/bundle'
          bundle install

      # 🔹 Build Jekyll site
      - name: Build Jekyll site
        run: |
          bundle exec jekyll build
          touch _site/.nojekyll

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: _site

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: $
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

• 로컬에서 동작 확인 및 배포

  #JavaScript 파일 빌드 후 지킬 크리스피 테마 실행
  npm install
  npm run build
  bundle exec jekyll s # 호스팅된 포트로 정상적으로 접근되는지 확인
  # Github pages에 배포 (config 설정 안할 시 commit 내역 레포에 업데이트 안됨[잔디 심기 안됨])
  git init
  git config --global user.email slipperyeely@gmail.com
  git config --global user.name GyuSanity
  git remote add origin https://github.com/yourusername/yourusername.github.io.git
  git checkout -b main
  git add .
  git commit -m "Initial commit"
  git push -u origin main
  

---

댓글 기능 추가하기

1. 저장소에서 Discussion 활성화
   • Github 저장소 페이지의 Settings > General Tap > Discussion을 활성화
2. Disscusion 세팅
   • https://github.com/GyuSanity/Gyusanity.github.io/discussions > New Discussion 클릭
   • Announcements Get started 클릭
   • Title : Comments / Write : Comments 로 작성 후 Start Discussion 클릭
3. giscus 앱 설치
   • github setting > Applications 클릭
   • giscus app install
   • 설치 시 레포 설정, Only select repositories : GyuSanity/GyuSanity.github.io
4. giscus 세팅
   • giscus.app 설정
   • 저장소 : GyuSanity/GyuSanity.github.io
   • 페이지 ↔️ Discussion 연결 : Discussion 제목이 페이지 경로를 포함
   • Discussion 카테고리 : Announcements 로 선택
   • giscus 사용 템플릿 복사 후 저장소/_layouts/post.html 파일 하단에 복사

---

구글 애널리틱스 등록

• 구글 애널리틱스에 블로그를 등록하여 블로그의 세부적인 통계정보 제공받기 가능
• 구글 애널리틱스에 로그인
• 새 계정 이름 입력(깃허브랑 일치 안해도됨)
• 속성 이름 Blog/ 보고시간대 한국으로 설정
• 비지니스 세부정보 입력(인원 작음 / 리드생성 + 사용자 행동 검토)
• 데이터 수집 플랫폼 설정 ( 플랫폼 : 웹, URL : GyuSanity.github.io / 스트림이름 : Blog)
• 측정 ID를 복사 후 저장소/_config.yml google_analytics id에 해당 코드 붙여넣기

---

외부 링크 새 탭에서 열리게 설정

• Gemfile 마지막 줄 추가

  gem 'jekyll-target-blank'
  

• _config.yml 마지막 줄 추가

plugins:
   - jekyll-target-blank