GitHub Pages(깃허브 페이지)에서 웹 호스팅을 무료로 사용할 있다.
그래서 홈페이지를 직접 만들어보기로 했다.
직접 만들고 하나씩 꾸며가는 기쁨을 누려보자.
그럼 시작해 볼까?
GitHub Pages
GitHub Pages(깃허브 페이지)가 집을 지을 땅이다.
소스 관리를 위해 GitHub는 가입했었다.
이제 집 지을 땅도 준비되었다. (깃허브 가입)
설정에 가면 GitHub Pages(깃허브 페이지)가 있고 이곳에서 웹 호스팅을 설정할 수 있다.
GitHub Pages(깃허브 페이지)에서 홈페이지가 잘 작동하는지 테스트해 보자.
HTML 사용.
웹사이트에서 구조를 만들기 위해서 HTML이 필요하다.
윈도우 탐색기를 실행해서 홈페이지 작업에 필요한 폴더를 원하는 곳에 만든다.
githubBlog라는 이름으로 만들었다.
개발은 VSCode(Visual Studio Code)를 사용한다.
VSCode를 실행한다.
그리고 VSCode에서 만든 폴더까지 이동한 후 Select folder를 클릭했다.
왼쪽 탐색기를 보면 텅텅 비어있다.
첫 화면, index.html
홈페이지 첫 화면을 만들기 위해서는 index.html 파일이 필요하다.
위 화살표가 표시한 아이콘을 클릭해서 새 파일을 만든다.
이름을 넣는 칸이 생긴다.
index.html로 넣고 엔터를 치면 된다.
index.html 파일이 생성되고 우측에 코드창이 새로 만들어졌다.
우선 간단하게 기본 태그를 입력하고 테스트해 본다.
"ht"만 입력했는데 자동생성이 뜬다.
자동생성 옆에 어떤 내용이 자동생성 될지 미리 보기로 보여줘서 좋다.
html5를 기본 태그 설정으로 했다.
그리고 <body></body> 태그 내에 "내가 만든 index.html 파일!!!"을 입력 후 저장했다. (빨간 화살표)
이제 index.html 파일을 생성했다.
GitHub Pages에 등록해서 웹사이트를 열 수 있다는 말이다.
GitHub(깃허브)에 소스 올리기.
현재 index.html 파일은 로컬 위치인 내 컴퓨터에 저장되어 있다.
원격지에 소스를 올리고 해당 웹호스팅에서 읽게 해야 홈페이지가 작동한다.
Git 명령어를 이용해서 소스를 올려보자.
먼저 GitHub에 로그인한다.
홈페이지 소스를 저장하기 위한 새로운 레파지토리(repository)를 생성한다.
New를 클릭하면 레파지토리를 만들 수 있다.
- 새로운 레파지토리(repository) 이름은 "aistep"으로 만들었다.
AI 스터디를 한 단계씩 해보자는 의미다. - Public으로 설정해야 한다.
- Create repository를 클릭해서 생성한다.
"aistep" 레파지토리(repository) 생성을 하면 위 화면이 나온다.
아주 중요한 정보이므로 하나씩 살펴봤다.
aistep 저장소 주소는 위 이미지에 나와 있다.
우측 복사 버튼을 클릭해서 미리 저장해 두자.
위 명령어는 내 컴퓨터와 원격 github 레파지토리와 연결하기 위해 필요하다.
위 명령어를 통해 직접 연결했다.
Git 명령어로 소스 올리기.
우선 VSCode에서 터미널을 실행했다.
VSCode에서 상단 보기를 클릭하면 아래 터미널이 나온다. (단축키 : Ctrl + `)
하단에 터미널이 나타났다.
이제 GitHub(깃허브)에 Git 명령어로 소스를 올려보자.
먼저 git init를 실행했다.
Initialized라고 잘 처리되었다.
commit 명령어로 index.html 파일을 커밋한다.
어디로 올릴지 remote로 복사했던 url을 붙여 넣는다.
이제 push로 소스를 GitHub에 전달해야 한다.
하지만 오류가 났다. (빨간 글자들)
그 이유는 branch 명을 main으로 해서였다.
다시 branch명을 master로 하니 push가 잘 된다.
GitHub 설정에 General을 보면 Default branch가 있고 master로 지정되어 있다.
제대로 올라갔는지 확인해 봤다.
GitHub(깃허브)에 가서 code탭을 눌렀다.
처음과 달리 index.html이 보인다.
코멘트도 "first commit"로 잘 달려 있고 39분 전에 올렸다는 시간도 보인다.
성공이다.
GitHub Pages 웹호스팅.
이제 직접 만든 index.html을 GitHub에 올렸다.
이제 GitHub Pages(깃허브 페이지)에 설정해서 호스팅을 해야 한다.
- Settings를 클릭한다.
- 왼쪽 하단에 Pages를 클릭한다.
- GitHub Pages 페이지가 오른쪽에 나오고 Branch가 None로 되어 있다.
이제 Branch를 설정하자.
Branch에서 None를 클릭하면 master가 보인다.
선택하고 Save를 했다.
저장이 완료되니 페이지 상단에 아래와 같은 메시지가 나왔다.
"GitHub Pages source saved." 메시지로 저장 성공이다.
이제 뭘 하면 되지?
잠시 기다리고 왼쪽 Pages를 다시 클릭했다.
윗부분이 달라졌다.
"Your site is live at https://devtiboy.github.io/aistep/"이 보인다.
"Visit Site" 버튼을 클릭해 봤다.
오~내가 만든 사이트가 웹에서 실행이 된다.
이제 첫 Step이 끝났다.
정리하기.
내 컴퓨터(로컬)에 개발할 폴더를 만들었다.
VSCode(Visual Studio Code)를 실행하고 폴더를 연결했다.
index.html 파일을 만들고 html:5로 기본 태그를 넣고 저장했다.
GitHub에 로그인하고 새 레파지토리를 만들었다.
.git 정보를 복사했다.
VSCode에서 터미널을 실행하고 Git 명령어로 설정 및 파일을 옮겼다.
GitHub에서 확인하고 Pages에서 branch를 선택하고 저장했다.
url이 완성되고 웹페이지에서 잘 연결되는 것을 확인했다.
이제 다음 단계로 진행한다.
문의는 댓글로 주세요~
'Software > Git&Github' 카테고리의 다른 글
| GitHub Pages에서 블로그 만들기. Html로 레이아웃 만들어 보기. header, content, footer (0) | 2026.01.19 |
|---|---|
| GitHub Pages, CSS와 JS 파일 올려보기, 개인 블로그 만들기 (0) | 2025.12.04 |
| [Git]Git Bash 간단 명령어 정리. (init, config, status, add, commit) (0) | 2024.01.14 |
