GitHub Pages 사용법 가이드
# GitHub Pages 사용법 가이드
## GitHub Pages란?
GitHub에서 제공하는 무료 정적 웹사이트 호스팅 서비스입니다. HTML, CSS, JavaScript 파일을 GitHub 저장소에 올리면 자동으로 웹사이트로 배포됩니다.
## 기본 설정 방법
### 1. 저장소 생성
```bash
# 개인 홈페이지용 (권장)
저장소명: username.github.io
# 프로젝트용
저장소명: 아무거나 (예: my-portfolio)
```
### 2. GitHub Pages 활성화
1. 저장소 → Settings → Pages
2. Source: Deploy from a branch
3. Branch: main (또는 gh-pages)
4. Folder: / (root) 선택
5. Save 클릭
## 간단한 예제 - 개발자 포트폴리오
### 파일 구조
```
username.github.io/
├── index.html # 메인 페이지
├── portfolio.html # 포트폴리오 페이지
├── contact.html # 연락처 페이지
├── css/
│ └── style.css # 스타일시트
└── js/
└── main.js # JavaScript
```
### index.html 예제
```html
</html lang="ko"> </meta charset="utf-8"> </meta name="viewport" content="width=device-width, initial-scale=1.0"> </link rel="stylesheet" href="css>
김개발
풀스택 개발자
React, Node.js, Python을 활용한 웹 개발 전문
외주 문의하기</a href="contact.html" class="cta-button">
About Me
5년차 풀스택 개발자로, 스타트업부터 대기업까지 다양한 프로젝트 경험이 있습니다.
기술 스택
React</span class="tech">
Node.js</span class="tech">
Python</span class="tech">
PostgreSQL</span class="tech">
AWS</span class="tech">
최근 프로젝트
E-커머스 플랫폼
React + Node.js로 구축한 온라인 쇼핑몰
자세히 보기</a href="portfolio.html#project1">
재고관리 시스템
Python + Django로 개발한 ERP 시스템
자세히 보기</a href="portfolio.html#project2">
© 2025 김개발. All rights reserved.
```
### contact.html 예제
```html
</html lang="ko">
김개발</a href="index.html">
외주 개발 문의
연락처
📧 이메일: dev@example.com
📱 전화: 010-1234-5678
💼 링크드인: linkedin.com/in/kimdev
제공 서비스
- 웹 애플리케이션 개발 (React, Vue.js)
- 백엔드 API 개발 (Node.js, Python)
- 데이터베이스 설계 및 최적화
- AWS/GCP 클라우드 배포
개발 비용 (참고용)
프로젝트 유형
예상 기간
예상 비용
간단한 웹사이트
1-2주
200-500만원
웹 애플리케이션
1-3개월
500-2000만원
복잡한 시스템
3개월 이상
협의
© 2025 김개발. All rights reserved.
```
### css/style.css 예제
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
/* Header */
header {
background: #2c3e50;
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
nav h1 a {
color: white;
text-decoration: none;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
nav a:hover {
color: #3498db;
}
/* Main Content */
main {
margin-top: 70px;
padding: 2rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
#hero {
text-align: center;
padding: 4rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin: -2rem -2rem 3rem;
}
#hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.cta-button {
display: inline-block;
background: #e74c3c;
color: white;
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
margin-top: 2rem;
transition: background 0.3s;
}
.cta-button:hover {
background: #c0392b;
}
/* Tech Stack */
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.tech {
background: #3498db;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
}
/* Project Grid */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.project-card {
border: 1px solid #ddd;
padding: 2rem;
border-radius: 8px;
transition: box-shadow 0.3s;
}
.project-card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Contact Page */
.contact-info, .services, .pricing {
margin-bottom: 3rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 1rem;
text-align: left;
}
th {
background: #f4f4f4;
}
/* Footer */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}
/* Responsive */
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 1rem;
}
nav ul {
gap: 1rem;
}
#hero h2 {
font-size: 2rem;
}
.project-grid {
grid-template-columns: 1fr;
}
}
```
## 배포 과정
1. **파일 생성**: 위 예제 파일들을 로컬에서 생성
2. **Git 초기화 및 커밋**:
```bash
git init
git add .
git commit -m "Initial commit: 개발자 포트폴리오 사이트"
```
3. **GitHub 저장소에 푸시**:
```bash
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main
```
4. **자동 배포**: 5-10분 후 `https://username.github.io`에서 확인 가능
## 추가 팁
### SEO 최적화
- `` 태그 추가
- `sitemap.xml` 생성
- Google Analytics 연동
### 커스텀 도메인
- 도메인 구매 후 DNS 설정
- `CNAME` 파일에 도메인 추가
### 자동화
- GitHub Actions로 빌드 자동화
- Jekyll/Hugo 같은 정적 사이트 생성기 활용
이 예제로 기본적인 개발자 포트폴리오 + 외주 홍보 사이트를 만들 수 있습니다.