이 글은 인프런의 "알잘딱깔센 GitHub" 강의를 듣고 정리한 내용입니다.
[무료] 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub - 인프런 | 강의
알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 GitHub 핵심 개념 책의 무료강의입니다. 해당 책과 Notion 링크도 무료로 다운로드 받을 수 있습니다. 비영리 프로젝트로 교재활용도 허락없이 가능합
www.inflearn.com
개인 프로젝트를 진행하면서 Github을 사용하였는데, 코드를 Github에 올리고 변경사항을 저장하는 용도로만 사용했었다. 코드를 공유하는 용도뿐만 아니라 협업 관리 툴로 Git과 Github은 무조건 필수적으로 사용하기 때문에, 전체적으로 어떻게 사용하는지 알고 싶어서 "30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub" 강의를 듣게 되었다.
Git과 Github 에 대한 무료 강의가 정말 많은데 그 중 이 강의를 선택한 이유는, 전체 강의 시간이 1시간일 정도로 굉장히 짧고, 어려운 내용을 들어도 아직은 이해를 못할 것 같기 때문에;; 기본적인 개념과 핵심만 들을 수 있는 "30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub" 강의를 선택했다.
전체 강의 내용을 다 담은 노션 페이지와 PDF 파일도 있기 때문에 공부할 때 각자에게 맞는 참고 자료를 보면서 공부하면 될 것 같다.
GUI로 깃헙 페이지 만들기
github 웹 서비스에서 파일을 올리고, 간단한 페이지를 서비스해보자.
Github에서 제공하는 정적 웹사이트 호스팅 서비스인 Github pages 를 이용하면 간단하게 웹페이지를 생성할 수 있다.
1) Github에서 public으로 리포지토리를 생성하고, index.html을 추가한다.
<h1>hello world</h1>
2) 웹 페이지를 생성하고자 하는 레파지토리에 들어간 후, 우측 상단의 Settings를 클릭하고, Settings 페이지에서 Pages를 클릭한다.
3) Source 하단의 셀렉트 박스를 클릭하면 branch를 선택할 수 있다. 보여주고자 하는 branch를 선택하고 Save 버튼을 누른다.
4) 사이트가 생성된다.
생성된 주소는 http://{Github 계정 명}.github.io/{리포지토리명} 으로 고정된다. 해당 주소를 클릭하면 웹 사이트를 확인할 수 있으며, 약간의 시간이 소요된다.
생성된 주소 링크로 들어가면 다음과 같이 페이지가 뜨는 것을 확인할 수 있다.
리포지토리 화면에서 코드를 수정할 수 있지만 다음과 같은 방법으로 코드를 수정할 수 있다.
위와 같은 레포지토리 화면에서 .을 클릭하면 아래와 같은 URL로 이동하며 다음과 같은 화면이 뜬다.
https://github.dev/{Github 계정 명}/{리포지토리명}
비주얼 스튜디오 코드처럼 직접 코드를 편집할 수 있다.
html:5를 엔터하면 다음과 같이 기본 틀이 만들어진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>그리고 아래와 같은 코드를 입력한다음 탭 키를 누르면 자동으로 html 코드가 생성된다. (이 문법은 따로 emmet 문법으로 따로 공부가 필요한 문법이다.)
<body>
h${hello world}*6
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body>
</html>
변경 사항을 저장하기 위해서는 왼쪽에서 소스 제어를 클릭하고 커밋 메시지를 입력한 후 커밋한다.
만약 도메인 주소를 변경하고 싶다면, 아래의 사이트를 참조한다.
https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site
CLI 기본 명령어
CLI로 Git을 사용할 때 기본 명령어는 다음과 같다.
1) 깃헙 코드를 받아올 로컬 폴더 생성 후 해당 폴더에서 우클릭해서 Git Bash 실행 (git 설치 필요)
2) git clone {깃헙링크} .
또는
git pull
Github 리포지토리에 있는 코드를 로컬 폴더에 받아온다.
코드를 처음 받아올 때는 git clone 명령어를 입력한다.
여기서 {깃헙 링크}는 해당 Github 리포지토리 페이지에서 Code 버튼을 클릭하여 확인할 수 있다.
3) git add .
4) git commit -m '커밋 메시지'
5) git push
로컬 폴더의 코드를 Github 리포지토리에 보낸다.
'Programming > Git 과 GitHub' 카테고리의 다른 글
| 알잘딱깔센 GitHub - Ch 5. Fork (0) | 2022.09.18 |
|---|---|
| 알잘딱깔센 GitHub - Ch 4. Branch (0) | 2022.09.18 |
| 알잘딱깔센 GitHub - Ch 3. GitHub (0) | 2022.09.18 |
| 알잘딱깔센 GitHub - Ch 2. Git (0) | 2022.09.12 |
| 알잘딱깔센 GitHub - Ch 1. Git & GitHub 기본 개념 (0) | 2022.09.12 |
