HTML, CSS, 바닐라 자바스크립트로 날씨 변환기를 구축하는 방법 (네 번째 부분: 배치)

본 강좌의 마지막 부분에서 GitHub 페이지에 프로젝트를 배치할 것입니다.

GitHub 저장소를 만드는 방법

https://github.com/으로 이동하여 계정에 로그인하십시오.만약 계좌가 없다면, 당신은 무료 계좌를 만들 수 있습니다.


로그인한 후 오른쪽 위 모서리로 이동하여 New Repository 을 클릭합니다.

저장소에 대한 간단한 이름을 작성합니다.

그리고 선택할 수 있는 설명을 추가할 수 있습니다.

저장소가 공공으로 설정되어 있는지 확인하십시오.

그리고 녹색 Create Repository 버튼을 눌러주세요.

너는 GitHub에서 이 페이지를 보아야 한다.

GitHub 저장소에 로컬 프로젝트 추가 방법

Visual Studio 코드로 돌아가 터미널을 엽니다.

터미널에서 프로젝트 폴더에 있는지 다시 확인하십시오.

Git는 Linux와 Mac 컴퓨터에 설치해야 합니다.Windows의 경우 다음 instructions에 따라 Git를 설치하는 방법에 대해 설명합니다.
터미널에서, 우리는 먼저 README.md 명령을 사용하여 touch 파일을 추가할 것이다.이 파일은 항목이 다른 사용자에게 주는 의미를 설명합니다.

touch README.md

Explorer 탭에서 새 파일을 볼 수 있습니다.
README.md 파일을 열고 항목을 설명하는 짧은 문장을 추가합니다.
.md은 Markdown을 대표하는데 이것은 텍스트를 포맷할 수 있는 언어이다.가격 인하에 대한 자세한 내용은 documentation을 참조하십시오.
좋은 자술 파일을 만드는 방법에 대해 더 알고 싶으면 article을 통독하십시오.
터미널에서 .gitignore 명령을 사용하여 touch 파일을 추가합니다.이 파일은 컴퓨터가 GitHub로 푸시할 때 일부 파일을 무시하는 것을 알려줍니다.

touch .gitignore

VS 코드에서 .gitignore 파일을 열고 DS 저장소를 추가합니다.

**/.DS_Store

프로젝트 폴더를 만들 때 DS 저장 파일을 만들었지만 GitHub에 추가할 필요가 없습니다.
터미널로 돌아가서 새 Git 저장소를 초기화합니다.

git init

그리고 우리는 add 명령을 사용하여 모든 파일을 추가해야 한다.

git add .

그리고 git에서 제출한 -m 로고를 사용하여 이 파일들을 추가할 메시지를 추가해야 합니다.

git commit -m "adding project files"

터미널에 추가할 모든 파일을 볼 수 있을 것입니다.

그리고 우리는 우리의 저장소를 위해 main 지점을 만들어야 한다.

git branch -M main

그런 다음 GitHub에서 만든 저장소에 로컬 프로젝트를 추가해야 합니다.
새로 만든 저장소 페이지 설명에서 찾은 명령을 복사합니다. 이 페이지에는 GitHub 사용자 이름과 프로젝트 이름이 포함됩니다.

녹색 Code 단추를 누르고 URL을 복사해서git 프로젝트 URL을 찾을 수 있습니다.

터미널에서 복사한 명령을 붙여넣고 enter 키를 누르십시오.

git remote add origin https://github.com/jdwilkin4/Weather-Converter-Project.git

마지막으로 터미널에서 이 명령을 실행하고 enter 키를 누르십시오.

git push -u origin main

너는 터미널에서 이 소식을 보아야 한다.

GitHub 구성 파일로 돌아가 브라우저를 새로 고쳐 모든 프로젝트 파일을 봅니다.

GitHub에서 Git를 사용하여 새 저장소를 만드는 방법입니다.이제 Git는 프로젝트를 변경할 때마다 이러한 변경 사항을 추적하여 GitHub의 저장소로 밀어 넣을 수 있습니다.

GitHub 페이지에 프로젝트 배포

마지막 단계는 GitHub 페이지를 사용하여 프로젝트를 배치하는 것입니다.GitHub Pages은 GitHub 프로젝트를 위해 정적 사이트를 만드는 무료 방식이다.
GitHub의 프로젝트 저장소에서 설정 탭을 클릭합니다.

왼쪽에서 Pages 옵션을 클릭합니다.
Source에서 main지점을 선택해야 합니다.

그리고 Save 버튼을 눌러주세요.

새 항목 URL을 포함하는 메시지를 보실 수 있습니다.

프로젝트 URL을 클릭하여 새 프로젝트의 생방송을 보십시오.

이것이 바로 GitHub 페이지를 사용하여 프로젝트를 배치하는 방식입니다.
사용자 정의 영역을 추가하는 방법에 관심이 있으면 GitHub documentation을 읽으십시오.
HTML, CSS, Vanilla JavaScript를 사용하여 날씨 변환기를 구축하는 방법에 대한 네 가지 시리즈를 완성해 주셔서 감사합니다.😄
my GitHub repo에서 최종 프로젝트의 모든 원본 파일을 볼 수 있습니다.
Final project