#GithubBlog_주말을 활용한 Github Blog 만들기 3편_Github Repository생성부터 로컬 환경에 띄우기까지!

# 본격적인  GithubBlog 제작 시작에 앞서

이전 포스팅에서는 GithubBlog를 만들기 위해 필요한 Ruby와 Jekyll을 설치하는 방법을 다뤘습니다. 만약 아직 설치가 되어있지 않은 분들이 있다면 해당 포스팅을 참고하여   Ruby와 Jekyll을 설치하고 진행해주시기 바랍니다.

#GithubBlog_주말을 활용한 Github Blog 만들기 2편_Ruby와 Jekyll 설치하기

이제 본격적으로 GithubBlog를 구축해보겠습니다. 설치가 완료된 분들은 아래 가이드를 따라 진행해주세요.

 

---

# Github Repository 생성 

1. Repository 생성하기

GithubBlog를 만들려면 자신의 Github에 로그인하여 Blog 제작을 위한 Repository를 생성해야 합니다.

아래 홈페이지로 접속하여 회원가입 또는 로그인을 진행합니다. 

GitHub: Let’s build from here

---

좌측 상단의 New를 클릭하여 Repository를 생성하셔도 되고, 화면을 못찾으시겠다면 우측 프로필을 클릭하여 Your repositories > 이동한 페이지 우측 상단 New를 클릭해서 생성하셔도 됩니다. 

 

---

Repository의 이름은 {my_github_username}.github.io의 형식으로 생성해야 합니다. 제 닉네임은 kozneokhan이라서 kozneokhan.github.io로 설정하였습니다. 

{my_github_username}.github.io

 

Description 제외 > Public 체크 > REDME 제외 >  None > None > Create repository를 클릭해서 생성합니다.

---

2. VSCode에서 git clone해서 로컬에 저장하기 

새로운 Repository가 생성되었다면, 자신의 로컬 저장소에 Repository를 git clone을 해줘야 합니다. 원하는 위치에 자신의 로컬 디렉토리를 만들고 VSCode 터미널에서 명령어를 실행해줍니다. 터미널은 CTAL + `(숫자 1 왼쪽 키)를 눌러 실행해주시면 됩니다. 

git clone https://github.com/{My_Github_Username}/{My_Github_Username}.github.io

---

---

---

# Jekyll 사이트 생성하기

이전에 수행한 모든 단계를 완료했다면, 방금 생성한 Repository는 이제 clone되어 로컬 환경에 설정한 디렉토리에 생성되었습니다. 즉, Github에서 생성한 프로젝트의 복제본이 로컬 컴푸터에 다운되었고, 해당 디렉토리를 통해 프로젝트 파일을 열고 편집할 수 있으며, 변경사항을 원격 저장소에 push하여 Github와 동기화할 수 있습니다. 

 

이제는 본격적으로 Jekyll을 사용하여 사이트를 생성해보겠습니다. 자신이 디렉토리 위치를 확인을 먼저 한 후, 만약 디렉토리 안에 파일이 있다면, 기존의 파일을 삭제하고 아래의 커맨드를 입력합니다. 

 

1) 터미널에 표시된 로컬 디렉토리의 위치가 다를경우 해당 로컬 디렉토리로 이동

 

cd your-repository-directory

// 터미널에서 cd를 누르고 설정했던 디렉토리의 이름을 작성하다가 
// TAB을 누르면 자동으로 작성완료합니다. ENTER를 눌러 디렉토리 위치를 바로잡아줍니다.

 

 

2) cd 설치경로 확인 후, chcp 65001을 터미널에 입력하기

 

chcp 65001

 

Active code page: 650001 문구가 출력되면 정상입니다.

---

---

---

 

 

3)  확인 후 이상이 없다면 jekyll new ./ 커맨드를 실행하기

 

jekyll new ./

---

 

jekyll new ./  커맨드를 실행해서 한 번에 통과했다면 다행이지만 대부분의 사람들은 밑에 오류가 뜹니다. 

Conflict: C:/Users/user1/Desktop/github.io exists and is not empty. 
Ensure C:/Users/user1/Desktop/github.io is empty or else try again with
`--force` to proceed and overwrite any files.

 

대략적으로 정리하면 현재 디렉토리가 비어 있지 않기 때문에 발생하는 문제하고 합니다. 이럴 땐 강제로 생성을 시도해야하며 사용시 데이터가 손실되지 않는지 확인해야합니다. 

 jekyll new . --force //강제로 시도하기 때문에 손실된 데이터가 있는지 확인해야합니다.

 

---

 4) 다음으로 bundle을 설치하고 업데이트 하기

 

(Bundle 업데이트 이후, 다시 한번 bundle install을 실행합니다.)

bundle install
bundle update
bundle install

 

---

 5) 로컬 서버로 실행하기

 

모두 잘 설치되었고 잘 작동하는지 확인하기 위해 로컬 서버를 터미널로 실행하여 localhost로 접속해봐야합니다.

bundle exec jekyll serve

 

만약 실행도중 webrick 파일을 찾을 수 없다는 에러가 뜬다면, 아래의 커맨드를 입력 후 서버를 재실행합니다. 

bundle add webrick

 

 

잘 실행이 되었다면, 위와 같은 문구를 확인 할 수 있습니다. 

---

 6) 로컬 주소로 접속하여 그동안 했던 작업이 잘 되었는지 확인하기 (로컬 주소는 4000)

http://127.0.0.1:4000/

 

로컬 주소인 http://127.0.0.1:4000/으로 접속하여 "Welcome to Jekyll!"이라는 문구가 나타나는지 확인합니다. 이는 Jekyll 개발 서버가 성공적으로 실행되었음을 의미합니다. 만약 해당 문구가 표시된다면, 로컬 환경에서 Jekyll을 활용하여 웹 사이트를 구축하는데 성공했습니다.

 

 

---

---

# 글을 마치며

이제까지 완료한 단계를 종합하면, GitHub에 새로운 저장소를 생성하고 해당 저장소를 로컬로 클론한 뒤, Jekyll을 활용하여 웹 사이트를 생성하고 로컬 서버에서 확인하는 과정을 거쳤습니다. 이로써 전체 프로세스의 약 70%를 완료했습니다. 다음 포스팅에서는 선택한 Jekyll 테마를 적용하여 웹 사이트에 멋진 디자인을 부여하는 방법을 다룰 것입니다. 방문해주셔서 감사합니다.