마라톤을 준비하는 사람이 몇 달 동안 매일 아침 뜁니다. 그 시간에는 아무도 안 봅니다. 기록도 남지 않습니다. 그러다 대회 날 결승선을 통과하면 그때 처음으로 남에게 보여줄 수 있는 것이 생깁니다. 완주 메달과 기록증입니다.

지금까지 열아홉 강 동안 한 일이 딱 그 아침 훈련이었습니다. 커밋을 쌓고, 되돌리고, 창고에 올렸습니다. 전부 의미 있는 일이지만 남에게 보여주려면 설명이 필요했습니다.

오늘 그게 끝납니다. 강의가 끝나면 손에 주소 하나가 남습니다. 카톡으로 보낼 수 있고, 이력서에 적을 수 있는 진짜 웹 주소입니다. 그리고 오늘도 코드는 한 줄도 안 씁니다.

1. 5강 — git init내 폴더에 저장소를 만들었다
2. 6~10강 — 커밋고치고 담고 기록을 남겼다
3. 11~13강 — 마크다운# 와 - 로 글을 썼다
4. 14강 — git push깃허브 창고에 올렸다
5. 20강 — 주소가 생긴다그 파일이 웹페이지로 열린다

저장소 화면과 웹페이지는 다른 물건입니다

지금도 깃허브에 가면 README.md 가 보입니다. 그럼 이미 웹에 올라간 것 아닌가 싶지만, 그건 저장소를 구경하는 화면입니다. 위에 파일 목록이 있고, 옆에 커밋 개수가 붙어 있고, 주소에 github.com 이 들어갑니다. 개발자끼리 코드를 보러 오는 자리입니다.

저장소 화면

지금까지 보던 것

• 주소가 github.com/계정/저장소
• 파일 목록 · 커밋 기록이 같이 보인다
• README.md 는 아래쪽에 곁들여 나온다
• 코드를 보러 오는 사람용

Pages 로 만든 웹페이지

오늘 만들 것

• 주소가 계정.github.io/저장소
• 글만 나온다. 파일 목록이 없다
• 글씨체와 색이 입혀진 한 장의 페이지
• 깃을 모르는 사람에게 보내도 되는 주소

GitHub Pages 는 깃허브가 무료로 주는 기능입니다. 저장소에 있는 파일을 인터넷 주소로 열어줍니다. 서버를 빌리거나 도메인을 사지 않아도 됩니다. 켜기만 하면 됩니다.

마크다운을 페이지로 바꿔주는 것이 테마입니다

여기서 11강에 던져둔 이야기를 받습니다. 그때 "이 문법이 왜 필요한지는 20강에서 압니다" 라고 미뤄뒀습니다.

브라우저는 마크다운을 모릅니다. # 제목 이라고 적힌 파일을 그냥 주면 # 를 글자 그대로 보여줍니다. 사이에서 누가 마크다운을 웹페이지로 번역해 줘야 합니다. 그 일을 하는 것이 Pages 안에 들어 있는 변환기고, 테마는 그 결과물의 옷차림입니다.

1. README.md# 제목 · - 목록 이 적힌 글자 파일
2. 테마가 변환한다제목은 크게, 목록은 점을 찍어서
3. 웹페이지글씨체 · 색 · 여백이 입혀진 한 장

Pages 를 켭니다

14강에서 만든 my-first-repo 저장소로 갑니다.

1. 01

   저장소 위쪽 Settings 를 누릅니다

   톱니바퀴 아이콘이 붙어 있는 탭입니다. 저장소마다 따로 있습니다

2. 02

   왼쪽 목록에서 Pages 를 찾습니다

   목록이 길어서 아래쪽에 있습니다

3. 03

   Source 를 Deploy from a branch 로 둡니다

   기본값이 그것입니다. 그대로 두면 됩니다

4. 04

   아래 칸에서 master 와 / (root) 를 고릅니다

   None 으로 되어 있으면 안 켜집니다. 반드시 바꿉니다

5. 05

   Save 를 누릅니다

   잠시 뒤 위쪽에 주소가 나타납니다

테마를 고릅니다

같은 Pages 화면 아래쪽에 테마를 고르는 자리가 있습니다.

1. 01

   Theme chooser 의 Choose a theme 를 누릅니다

   Pages 설정 화면 아래쪽에 있습니다

2. 02

   마음에 드는 것을 하나 고릅니다

   지금은 아무거나 골라도 됩니다. 나중에 얼마든지 바꿉니다

3. 03

   Select theme 를 누릅니다

   편집 화면으로 넘어갑니다

4. 04

   아래 Commit changes 를 누릅니다

   고를 때마다 커밋이 하나 생깁니다. 웹에서 하는 커밋입니다

   theme: jekyll-theme-cayman

여기서 중요한 일이 하나 벌어졌습니다. 깃허브 쪽에 내가 안 만든 파일이 생겼습니다. 지금까지는 내 컴퓨터에서 만들어 올리기만 했는데, 처음으로 반대 방향이 생긴 겁니다.

17강에서 배운 것을 바로 씁니다. 터미널을 열고 작업 폴더에서 git pull 을 칩니다.

• $ git pull
• Updating 7b2d4e0..a91f3c5
• Fast-forward
• _config.yml | 1 +
• 1 file changed, 1 insertion(+)
• create mode 100644 _config.yml

create mode 는 새 파일이 생겼다는 뜻입니다. 이제 내 컴퓨터에도 _config.yml 이 있습니다.

주소를 확인합니다

주소는 규칙으로 정해집니다. 외울 필요는 없지만 조각을 알면 오타를 잡기 쉽습니다.

조각	뜻
hong-gildong	내 깃허브 계정 이름
.github.io	깃허브가 Pages 에 쓰는 고정 주소
/my-first-repo/	Pages 를 켠 저장소 이름

index.html 같은 파일을 만든 적이 없는데도 페이지가 열립니다. 시작 파일이 따로 없으면 README.md 를 첫 화면으로 씁니다. 그래서 이 편은 HTML 없이 여기까지 올 수 있습니다.

이제 고치면 반영됩니다

여기부터가 진짜입니다. README.md 를 고쳐서 push 하면 웹페이지가 따라 바뀝니다. 따로 올리는 작업이 없습니다.

1. README.md 를 고친다메모장이든 VS Code 든 상관없다
2. git add · git commit6강에서 하던 그대로
3. git push14강에서 하던 그대로
4. 잠시 기다린다깃허브가 다시 페이지를 만든다. 1분 안팎
5. 새로고침하면 바뀌어 있다따로 할 일이 없다

한 번 해봅니다. README.md 에 줄을 하나 더하고, 커밋하고, push 하고, 1분 뒤 새로고침 합니다. 터미널에서 친 명령이 인터넷의 화면을 바꾸는 것을 눈으로 보는 게 오늘의 핵심입니다.

정리하면

• GitHub Pages 는 저장소의 파일을 인터넷 주소로 열어주는 무료 기능입니다. 서버가 필요 없습니다
• 저장소 화면과 Pages 페이지는 같은 파일을 다르게 보여주는 것입니다
• Settings → Pages → Source 를 master · / (root) 로 두고 저장하면 켜집니다
• 테마를 고르면 마크다운이 웹페이지로 번역됩니다. HTML 을 한 줄도 안 씁니다 — 11강에서 미뤄둔 답이 이것입니다
• 테마를 고르면 깃허브 쪽에 _config.yml 이 생깁니다. 곧바로 git pull 로 받아옵니다
• 이 pull 을 건너뛰면 다음 push 가 거절당합니다. "앉으면 pull" 이 여기서 값을 합니다
• 주소는 계정이름.github.io/저장소이름 입니다. 시작 파일이 없으면 README.md 가 첫 화면이 됩니다
• 켜자마자 뜨는 404 는 실패가 아닙니다. 1~2분 기다렸다가 새로고침 합니다
• 이제 고치고 push 하면 페이지가 따라 바뀝니다. 따로 올리는 작업이 없습니다
• 검색에 걸리는 공개 페이지입니다. 무엇이 올라가 있는지 한 번 보고 넘어갑니다

Part 4 가 끝났습니다. 14강에서 처음 인터넷으로 나가 창고에 택배를 부쳤고, 15 · 16강에서 인증 문제로 두 번 막혔다 뚫었고, 17강에서 받아오는 법을 배웠고, 18강에서 같은 일을 버튼으로 해봤고, 19강에서 명함을 만들었습니다. 그리고 오늘 주소를 가진 결과물이 하나 생겼습니다. 여기까지가 혼자서 깃허브를 쓰는 데 필요한 전부입니다.

다음 21강부터 Part 5 입니다. 이제 사람이 늘어납니다. 지금까지는 한 줄기로만 달렸는데, 실무에서는 여러 사람이 같은 저장소를 동시에 고칩니다. 그러려면 원본을 건드리지 않고 딴 데서 실험할 자리가 필요합니다. 그게 브랜치입니다. 14강과 오늘 설정 화면에서 스쳐 지나간 그 단어를 21강에서 제대로 봅니다. 평행 세계를 하나 만든다고 생각하면 됩니다.