본문 바로가기
좋은글들

Github 홈페이지 만들기 - 초보자를 위한 단계별 안내서

by voliuny 2024. 7. 30.

1. Github 홈페이지 만들기를 위한 필수 도구 소개

 

Static Site Generator

 

  • Github 계정: Github 홈페이지를 만들기 위한 첫 단계로 Github에 회원가입하고 계정을 생성해야 해. Github은 페이지 호스팅을 지원해주는데, 그냥 무료로 제공해주니까 빨리 만들자!
  • 텍스트 에디터: 코드를 작성할 텍스트 에디터가 필요해. 예를 들면 Visual Studio Code나 Sublime Text와 같은 툴을 사용할 수 있어. 이런 에디터들은 코드 작성을 편리하게 해줘.
  • Git: 코드의 버전을 관리하기 위해 Git이라는 도구를 사용해야 해. Git은 변경 이력을 추적하고 협업을 쉽게 할 수 있게 도와줘. 꼭 기억하자!

 

 

2. Github 계정 만들기

 

Profile

 

  • Github 웹사이트에 접속하기: 웹 브라우저를 열고 주소창에 "github.com"을 입력한다.
  • 계정 생성 페이지로 이동하기: Github 홈페이지에 접속한 후 화면 오른쪽 상단의 "Sign up" 버튼을 클릭한다.
  • 개인 정보 입력하기: 사용자 이름, 이메일 주소, 비밀번호를 입력하고 "Sign up for GitHub" 버튼을 클릭한다.
  • 계정 인증하기: 이메일 주소로 전송된 확인 링크를 클릭하여 계정을 인증한다.
  • 계정 생성 완료: Github 계정이 성공적으로 생성되었고 이제 로그인하여 사용할 수 있다.

 

 

3. Repository 생성하기

 

Github Repository

 

  • Github 웹사이트에 로그인한다.
  • New repository 버튼을 클릭한다.
  • Repository 이름을 입력하고, 선택적으로 설명을 추가한다.
  • Initialize this repository with a README 옵션을 체크한다.
  • Choose a license를 선택하거나 나중에 할 수도 있다.
  • Create repository 버튼을 클릭한다.

 

 

4. Github Pages를 활용하여 홈페이지 만들기

 

Static website hosting

 

  • GitHub 페이지 생성
  • Settings 탭 클릭
  • GitHub Pages 섹션으로 이동
  • Source 드롭다운 메뉴에서 main 또는 master 브랜치 선택
  • 페이지 테마를 Choose a theme을 클릭하여 선택
  • 커밋 메시지를 입력하고 Commit changes 클릭
  • 새로 고침하여 변경 사항 확인
  • 웹 브라우저에 URL을 입력하여 홈페이지 확인

 

 

5. 로컬에서 작업한 내용을 Github에 업로드하기

 

Git Push

 

  • 로컬 저장소에서 변경사항을 확인하기: git status 명령어를 입력하여 작업한 파일들의 변경사항을 확인한다.
  • 변경사항을 스테이징하기: git add 파일명 명령어를 사용하여 변경사항을 스테이징한다.
  • 커밋하기: git commit -m "커밋 메시지" 명령어로 스테이징한 변경사항을 커밋한다.
  • Github에 푸시하기: git push origin 브랜치명 명령어로 로컬에서 작업한 내용을 Github에 업로드한다.

 

 

6. 홈페이지 완성 및 공개하기

 

Publishing

 

  • Github에 로그인한다.
  • Repositories 탭을 클릭하여 새 저장소를 만든다.
  • Repository Name에 홈페이지를 공개할 이름을 입력한다.
  • Description에 홈페이지에 관한 간단한 설명을 작성한다.
  • Initialize this repository with a README 옵션을 선택한다.
  • "Create Repository" 버튼을 클릭한다.
  • 로컬 컴퓨터에서 홈페이지 관련 파일들을 해당 저장소로 push한다.
  • 저장소의 Settings에서 GitHub Pages 항목을 찾아 "Master branch"로 설정한다.
  • 홈페이지 주소가 생성된 후, 해당 링크로 이동하여 홈페이지를 확인한다.

 

 

7. 추가 팁 및 자원 소개

 

Resources

 

  • 깃허브 데스크탑 - 깃허브 데스크탑 앱을 활용하면 좀 더 편리하게 저장소를 관리할 수 있어.
  • 깃허브 페이지 - 깃허브 페이지를 활용하면 개인 블로그나 포트폴리오를 호스팅할 수 있어.
  • 깃허브 공식 가이드 - 깃허브 공식 문서를 통해 더 깊이있는 사용법을 익힐 수 있어.
  • 깃허브 학습 리소스 - 깃허브 관련 다양한 학습 자료들을 이용해서 실력을 향상시킬 수 있어.