GitHub Pages 깃허브 사용법 무료 웹사이트 설치와 설정 방법

IT&테크

GitHub Pages 깃허브 사용법 무료 웹사이트 설치와 설정 방법

IT 트렌드 헌터 2024. 7. 14. 13:18

안녕하세요, 여러분! 오늘은 GitHub Pages를 사용해 무료로 웹사이트를 만드는 방법을 상세히 알아볼게요. 코딩 초보자도 쉽게 따라할 수 있는 단계별 가이드와 실제 코드 예시를 준비했습니다. 함께 시작해볼까요?

깃허브 GitHub Pages란?

GitHub Pages는 GitHub에서 제공하는 무료 정적 웹사이트 호스팅 서비스입니다. 개인 프로젝트, 포트폴리오, 블로그 등을 무료로 호스팅할 수 있어요. GitHub 저장소와 직접 연동되어 버전 관리가 쉽고, 업데이트도 간편합니다.

GitHub Pages의 주요 특징

완전 무료 호스팅
Git을 통한 간편한 버전 관리
커스텀 도메인 지원
Jekyll을 이용한 정적 사이트 생성 지원

GitHub Pages 시작하기: 단계별 가이드

GitHub 계정 만들기

아직 GitHub 계정이 없다면, 지금 바로 만들어보세요.

GitHub 계정 만들기

새 리포지토리 생성

GitHub에 로그인 후, 오른쪽 상단의 '+' 아이콘을 클릭하고 'New repository'를 선택하세요.
리포지토리 이름을 'username.github.io'로 설정하세요. (username은 여러분의 GitHub 사용자명입니다)
'Public' 옵션을 선택하고, 'Add a README file' 체크박스를 선택하세요.
'Create repository' 버튼을 클릭하세요.

첫 웹페이지 만들기

새로 만든 리포지토리에서 'Add file' > 'Create new file'을 클릭하세요.
파일 이름을 'index.html'로 입력하세요.아래의 HTML 코드를 복사하여 붙여넣으세요:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 GitHub Pages 웹사이트</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>안녕하세요!</h1>
        <p>이것은 제 첫 GitHub Pages 웹사이트입니다.</p>
        <p>여기에 원하는 내용을 자유롭게 추가할 수 있습니다.</p>
    </div>
</body>
</html>

페이지 하단의 'Commit new file' 버튼을 클릭하세요.

GitHub Pages 활성화

리포지토리 페이지에서 'Settings' 탭을 클릭하세요.
왼쪽 사이드바에서 'Pages'를 클릭하세요.
'Source' 섹션에서 Branch를 'main'으로 설정하고 저장하세요.

웹사이트 확인

설정을 저장하면 페이지 상단에 여러분의 사이트 URL이 표시됩니다. (보통 https://username.github.io 형식)

이 URL로 접속하여 여러분의 웹사이트를 확인하세요!

웹사이트 커스터마이징

기본 HTML 템플릿을 사용했다면, 이제 여러분만의 내용으로 채워넣을 차례입니다. index.html 파일을 편집하여 텍스트, 이미지, 링크 등을 추가해보세요.

예를 들어, 간단한 포트폴리오 페이지를 만들고 싶다면 아래와 같이 수정할 수 있습니다:

<div class="container">
    <h1>홍길동의 포트폴리오</h1>
    <p>안녕하세요, 웹 개발자 홍길동입니다.</p>
    <h2>프로젝트</h2>
    <ul>
        <li>온라인 쇼핑몰 개발 (2023)</li>
        <li>날씨 정보 앱 개발 (2022)</li>
    </ul>
    <h2>연락처</h2>
    <p>Email: example@email.com</p>
    <p>GitHub: <a href="https://github.com/yourusername">github.com/yourusername</a></p>
</div>