YESHTML5

GitHub Pages 사용법 가이드

슬/도/아/밤/ — Fri, 20 Jun 2025 14:15:13 +0900

# 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>

김개발

About</a href="#about">

Portfolio</a href="portfolio.html">

Contact</a href="contact.html">

</section id="hero">

풀스택 개발자

React, Node.js, Python을 활용한 웹 개발 전문

            외주 문의하기</a href="contact.html" class="cta-button">

</section id="about">

About Me

5년차 풀스택 개발자로, 스타트업부터 대기업까지 다양한 프로젝트 경험이 있습니다.

기술 스택

</div class="tech-stack">
                React</span class="tech">
                Node.js</span class="tech">
                Python</span class="tech">
                PostgreSQL</span class="tech">
                AWS</span class="tech">

</section id="recent-work">

최근 프로젝트

</div class="project-grid">

</div class="project-card">

E-커머스 플랫폼

React + Node.js로 구축한 온라인 쇼핑몰

                    자세히 보기</a href="portfolio.html#project1">

</div class="project-card">

재고관리 시스템

Python + Django로 개발한 ERP 시스템

                    자세히 보기</a href="portfolio.html#project2">

```

### contact.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>

김개발</a href="index.html">

About</a href="index.html#about">

Portfolio</a href="portfolio.html">

Contact</a href="contact.html">

</section id="contact">

외주 개발 문의

</div class="contact-info">

연락처

이메일: dev@example.com

전화: 010-1234-5678

링크드인: linkedin.com/in/kimdev

</div class="services">

제공 서비스

웹 애플리케이션 개발 (React, Vue.js)

백엔드 API 개발 (Node.js, Python)

데이터베이스 설계 및 최적화

AWS/GCP 클라우드 배포

</div class="pricing">

개발 비용 (참고용)

                        프로젝트 유형
                        예상 기간
                        예상 비용


                        간단한 웹사이트
                        1-2주
                        200-500만원


                        웹 애플리케이션
                        1-3개월
                        500-2000만원


                        복잡한 시스템
                        3개월 이상
                        협의

```

### 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 같은 정적 사이트 생성기 활용

이 예제로 기본적인 개발자 포트폴리오 + 외주 홍보 사이트를 만들 수 있습니다.

Packages.json

슬/도/아/밤/ — Tue, 21 Jun 2022 16:49:19 +0900

현재사용중인 packages.json

자주사용하는것들은 만들어 두었다.

"scripts": {	
    "clean": "yarn clean:watchman && yarn clean:android && yarn clean:ios ",

		// 메트로 캐시삭제
    "clean:watchman": "watchman watch-del-all",

		// node_modules 제거 yarn초기화
    "clean:node": "sudo rm -rf ./yarn.lock && sudo rm -rf ./node_modules && sudo yarn && sudo chmod -R 777 ./node_modules",

		// ios 초기화
    "clean:ios": "cd ./ios && rm -rf ./Pods && rm -rf ./Podfile.lock && pod install && cd ..",

		// M1칩관련 초기화
    "clean:pod": "cd ./ios && pod deintegrate tangopick_app.xcodeproj && pod install --repo-update",

		// 안드로이드 초기화(빌드파일삭제)
    "clean:android_all": "cd ./android && sudo rm -rf ./build && sudo rm -rf ./app/build && ./gradlew clean && cd .. && sudo chmod -R 777 ./android && yarn clean:node",

		// 안드로이드 초기화
    "clean:android": "cd ./android && ./gradlew clean build --refresh-dependencies && cd ..",

		// 안드로이드 실행
    "android": "npx react-native run-android",

		// 안드로이드 디버그실행 (USB연결)
    "android:dev": "npx react-native run-android --variant=debug",

		// 안드로이드 스테이징빌드 (USB연결)
    "android:releaseStaging": "npx react-native run-android --variant=releaseStaging",

		// 안드로이드 빌드버젼(USB연결)
    "android:release": "npx react-native run-android --variant=release",

		// 안드로이드 AAB(플레이구글배포용) 빌드
    "android:aab": "cd ./android && ./gradlew bundleRelease && cd ..",

		// 안드로이드 apk 빌드 (실패시 오류노출)
    "android:apk": "cd ./android && ./gradlew assembleRelease --warning-mode=all --stacktrace",

		// 안드로이드 apk 빌드 (실패시 정보노출)
    "android:info": "cd ./android && ./gradlew assembleReleas --info",

		// 안드로이드 스테이징빌드 (실패시 오류노출)
    "android:staging": "cd ./android && ./gradlew assembleReleaseStaging --warning-mode=all --stacktrace",
		
		// 안드로이드 빌드 (에셋초기화 이후 빌드)
    "android:build": "cd ./android && ./gradlew clean && cd .. && sudo rm -rf ./android/app/src/main/assets/*.* && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/release/",
    
		// 안드로이드 빌드 (초기화 + apk + aab) 
		"android:build-release": "yarn android:build && sudo rm -rf android/app/src/main/res/drawable-* && sudo rm -rf android/app/src/main/res/raw && cd android && ./gradlew assembleRelease && ./gradlew bundleRelease && cd ..",
    
		// ios실행
		"ios": "npx react-native run-ios",

		// ios실행 (디바이스이름정해질때)
    "ios:dev": "react-native run-ios --device Noah_iPhoneProMax",

		// ios빌드
    "ios:build": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",
		
		// 서버실행(캐시삭제포함)
    "start": "react-native start --reset-cache",

		// 서버실행 (특정포트)
    "dev": "react-native start --port 9999",

		// 린트적용
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
		
		// 구글애널리틱스 실시간디버깅실행 (firebase실행필요)
    "analytics:debug": "adb shell setprop debug.firebase.analytics.app com.alphabridge.tangopick",

		// 코드푸시 해당버젼실행(3.0.10부터 - 3.0.20까지)
    "codepush": "appcenter codepush release-react -a tangopick/tangopick-android -d Staging -m -t 3.0.10 - 3.0.20",

		// 코드푸시 ios, android동시 실행
    "codepush:both": "yarn codepush:android && yarn codepush:ios",
		
		// 코드푸시 안드로이드
    "codepush:android": "appcenter codepush release-react -a tangopick/tangopick-android -d Staging -m -t 3.1.7",
		
		// 코드푸시 ios
    "codepush:ios": "appcenter codepush release-react -a tangopick/tangopick-ios -d Staging -m -t 3.1.7",

		// 안드로이드 스키마테스트
    "tangopick:android": "npx uri-scheme open tangopick://board/13922 --android",

		// ios 스키마테스트
    "tangopick:ios": "npx uri-scheme open tangopick://board/13922 --ios"
  },

macOS Monterey에서 한/영 전환키 Shift+Space로 안될 때

슬/도/아/밤/ — Mon, 30 May 2022 16:12:20 +0900

맥북을 포멧을 했다.

"~/Library/Preferences/com.apple.symbolichotkeys.plist"

에서

61번 키의 값을 131072로 변경합니다.

키의 값을 131072로 변경 완료

https://blog.edit.kr/entry/macOS-%ED%95%9C%EC%98%81-%EC%A0%84%ED%99%98-%EB%8B%A8%EC%B6%95%ED%82%A4-Shift-Space-%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

macOS 한영 전환 단축키 Shift + Space 로 변경하기 (Monterey 적용법 추가) (caps lock방법 추가)

macOS Catalina (카탈리나)가 출시되면서, 32 bit프로그램들이 작동되지 않게 되었습니다. 카탈리나 OS로 업그레이드하기 전에 32bit 프로그램 내역을 조사한 결과. 개인적으로 가장 많이 사용하는데 지

blog.edit.kr

homebrew-core is a shallow clone 문제

슬/도/아/밤/ — Sat, 28 May 2022 09:49:44 +0900

맥북과 iMac의 작업환경이 조금 차이가 있다보니, 왔다갔다 하며 업무를 진행한다.

Homebrew를 이용해서 업데이트 설치시 문제가 생긴 현황

화면에서도 오류 명령어를 알려주긴 하지만, 알아두면 좋을것 같아 기록해둔다.

참고블로그:

https://yoshikixdrum.tistory.com/229

[Homebrew] homebrew-core is a shallow clone 에러 해결하기.

Homebrew를 이용해 패키지를 설치하려고 하는 도중에 나온 문제로 homebrew-core is a shallow clone. 와 homebrew-cask is a shallow clone. 같이 에러가 나오면서 패키지를 업데이트를 할 수 없다..

yoshikixdrum.tistory.com

react-native-naver-map 적용시 pod install Error날때

슬/도/아/밤/ — Thu, 26 May 2022 21:37:15 +0900

pod install 중에 다음과 같은 에러가 발생했다.

[!] Error installing NMapsMap
[!] /usr/bin/git clone https://github.com/navermaps/NMapsMap.git /var/folders/np/kql39mdx7576fmh_nzsm58240000gn/T/d20220526-76914-19amcn --template= --single-branch --depth 1 --branch release/3.15.0

Cloning into '/var/folders/np/kql39mdx7576fmh_nzsm58240000gn/T/d20220526-76914-19amcn'...
Note: switching to 'b7ba615aa9d87c5b985b73e1a48279c37a5022e3'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

git-lfs filter-process: git-lfs: command not found
fatal: the remote end hung up unexpectedly
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'

해결방안

https://github.com/navermaps/ios-map-sdk?ref=morioh.com&utm_source=morioh.com#%EB%8C%80%EC%9A%A9%EB%9F%89-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%B0%9B%EA%B8%B0-%EC%9C%84%ED%95%B4-git-lfs-%EC%84%A4%EC%B9%98%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%A9%EB%8B%88%EB%8B%A4

GitHub - navermaps/ios-map-sdk: 네이버 지도 iOS SDK 데모 앱

네이버 지도 iOS SDK 데모 앱. Contribute to navermaps/ios-map-sdk development by creating an account on GitHub.

github.com

ios Cocoapods 문제생길때

슬/도/아/밤/ — Thu, 26 May 2022 18:14:00 +0900

CocoaPods 제거 및 인스톨

rm -rf ~/Library/Caches/CocoaPods.
rm -rf Pods.
rm -rf ~/Library/Developer/Xcode/DerivedData/*
pod deintegrate.
pod setup.
pod install.

참고페이지

https://eunjin3786.tistory.com/112

[Cocoapod] Cocoapod 명령어 모음

[1] Podfile.lock을 여는 명렁어 open podfile.lock [2] cocoapod 버전 업그레이드 아래 명령어로 현재 버전을 확인하고 pod --version 원하는 버전으로 업데이트 시켜주세요 sudo gem install cocoapods -v 1.9..

eunjin3786.tistory.com

기상정보, 지진,화산등 API 가져올수있는곳

슬/도/아/밤/ — Wed, 25 May 2022 19:10:53 +0900

날씨 앱을 만들때 우선적으로 API 가져올수있는곳 공유해본다.

https://data.kma.go.kr/api/selectApiDetail.do

기상자료개방포털

data.kma.go.kr

TourAPI 정보 받아올수있는곳

슬/도/아/밤/ — Wed, 25 May 2022 19:09:27 +0900

여행앱을 개인적으로 만들어 보고자 했을때가 있었다.

전국 각지에서, 활용정보, 이맘때쯤 가기 좋을곳, 등등

우선 한국관광공사에서 제공하는 API를 가져다 쓸수있다.

https://api.visitkorea.or.kr/about/about.do

TourAPI 3.0 소개 | 서비스 소개 | TourAPI3.0

지역 관광정보를 간행물에 활용하고, 학교에서는 연구 자료로 활용해 보실 수 있습니다. 관광정보를 이용해 웹사이트와 모바일 앱으로 유용한 관광정보 서비스도 만들어 보실 수 있습니다. 정

api.visitkorea.or.kr

Object 불변성 유지할수있게, useObject hooks 기반

슬/도/아/밤/ — Wed, 25 May 2022 18:53:37 +0900

useState에서 Object 즉 JSON형태로 저장한다.

이전에 값이 있는경우 대체되어버리기때문에, 기존의값 그대로 뒤에로 override형태로 덮어쓴다.

const [json, setJson] = useObject({ title: 'test' }) 형태로 사용하고 싶어서, 만든 코드 올려본다.

/**
 * @name useObject
 * @description
 */
import {useCallback, useState} from 'react'

// Hook
export const useObject = (initialState: {} = {}): any => {
  // Initialize the state
  const [state, setState] = useState<object>(initialState)
  const update = useCallback(
    (data): void =>
      setState(prevState => {
        return {...prevState, ...data}
      }),
    [],
  )
  return [state, update]
}
/********************************************************
[사용법]
import { useObject } from '@app/lib/hooks/useObject'
const Debug = () => {
  const [json, setJson] = useObject({ title: 'test' })
  return (
    <Container>
      <Button onPress={() => { setJson({ 'random_number': Math.random() * 1000 }) }}>
        정보가져오기
      </Button>
      <Text>{JSON.stringify(json, null, 1)}</Text>
    </Container>
  )
}
export default Debug
*********************************************************/

useAxios를 만들어 보았다.

슬/도/아/밤/ — Wed, 25 May 2022 18:46:22 +0900

RestAPI 를 할때 axios를 많이 사용한다.

조금더 유용하게 사용하기위해 hooks 기반으로 만들었고, loading, error 로 같이 받을수 있게 해두었다.

코드는 다음과 같다.

/**
 * @name useAxios
 * @description hooks기반 fetch
 */

import {useState} from 'react'
import axios from 'axios'

export const useAxios = (_url?: string, _options = {}) => {
  const [result, setResult] = useState<string>('') // *-------------- result
  const [loading, setLoading] = useState<boolean | null>(null) // *--------- Loading
  const [error, setError] = useState<any>(null) // *----------------- Error

  // *---------------- response
  async function response(_config) {
    setLoading(true)
    // const token = ''
    // const config = Object.assign({ headers: { Authorization: `Bearer ${token}` }, withCredentials: true, }, _config)
    const config = Object.assign({withCredentials: true}, _config)
    const res = await axios(config)
    setLoading(false)
    if (res?.status === 200) {
      // REST성공
      setResult(res?.data)
      return res?.data
    } else {
      // rest실패
      setError(res?.data)
      return {...res.data, result: 'fail'}
    }
  }
  // *---------------- Error 실행
  function errorFunc(error) {
    setLoading(false)
    setError(error)
    errorMsg({...(error as any)})
  }
  // *-------------------------------------- FETCH
  async function ajax(url?: string | null, params?: {}) {
    const config = {method: 'GET', url: url || _url, ...params}
    try {
      return await response(config)
    } catch (error) {
      errorFunc(error)
    }
  }

  // *-------------------------------------- GET
  async function get(url?: string | null, params?: {}) {
    const config = {method: 'GET', url: url || _url, params: Object.assign(_options, params)}
    try {
      return await response(config)
    } catch (error) {
      errorFunc(error)
    }
  }
  // *-------------------------------------- POST
  async function post(url?: string | null, data?: {}) {
    const config = {method: 'POST', url: url || _url, data: Object.assign(_options, data)}
    try {
      return await response(config)
    } catch (error) {
      errorFunc(error)
    }
  }
  // *-------------------------------------- PUT
  async function put(url?: string | null, data?: {}) {
    const config = {method: 'PUT', url: url || _url, data: Object.assign(_options, data)}
    try {
      return await response(config)
    } catch (error) {
      errorFunc(error)
    }
  }
  // *-------------------------------------- DELETE
  async function del(url?: string | null, data?: {}) {
    const config = {method: 'DELETE', url: url || _url, data: Object.assign(_options, data)}
    try {
      return await response(config)
    } catch (error) {
      errorFunc(error)
    }
  }
  // *--------------------------------------
  return {result, ajax, get, post, del, put, loading, error}
}

/**
 * @description 에러발생시코드
 * @param error
 */
export const errorMsg = (...params) => {
  console.log('%c' + `[ajax ERROR] `, 'width:100%;font-size:12px;padding:5px 10px;color:#fff;background:red;')
  console.log(JSON.stringify(params, null, 1))
}
/********************************************************
[사용법]
  const { get, loading } = useFetch(`${USER}/community/join/board`, { offset: 0 });
  //*------- fetch
  async function fetch() {
    const res = await get()
    const res1 = await get(`${USER}/community/join/board/some`, { offset: 20 })
  }
  // useEffect
  useEffect(() => { fetch(); }, [])
  post, delete, put 일때 success, fail 체크는 
  if (res?.result === 'fail') {  }
  
  //-----------------------------------------------
  const { loading, ajax } = useAxios(url)
  async function fetch() {
    const res = await ajax(url,
      {
        params: { query: '컴퓨터' },
        headers: {
          'X-Naver-Client-Id': NAVER_CLIENT_ID,
          'X-Naver-Client-Secret': NAVER_CLIENT_SECRET
        }
      }
    )
    setFetch(res)
  }

*********************************************************/