github.io 페이지 만들기2 성공

이제 제대로 성공한 방법을 살펴보기로 하자.
다음번에 하려고 하면 또 까먹을 듯 하여 저장하는 글.

기본 시작 준비

 시작하기에 앞서 준비물들을 살펴보자.

1.1 텍스트 에디터 선택

 어떤 텍스트 에디터를 사용해도 좋으나 나는 지금까지 써봤던 것중 vscode가 가장 마음에 들기에 이것을 사용하기로 하였다.

1.2 github 회원가입하기.

  github에 로그인하기(없으면 회원가입).

 그 후 찾아보니 나중에 post를 명령어로 직접 쳐서 git에 올리는 방법도 있었지만 초보인 나는 github 프로그램을 깔아서 하기로 결정. github desktop

1.3 Ruby 설치하기

  우리는 블로그 사이트를 만들기 위해서 Jekyll을 사용할 것인데 이 때 Ruby를 먼저 설치 해 놓아야 사용 할 수 있다. Ruby

 이 사이트에 들어가 보면 다운을 할 수 있는데 오른쪽에 써있길 “wich version to download?” 아래 문구를 보면 진하게 “우리는 지금 Ruby+Devkit x.x.x (x64)를 추천하고 있다.” 라고 쓰여있을 것이니 그것ㄴ을 다운받으면 된다.
(현 시점에서는 Ruby+Devkit 3.2.X (x64))
  설치를 시작하면 Licencse Agreement 라는 문구가 보일 텐데 당연히 accept를 선택해 준 뒤 전부 Next를 누르면 된다.
 설치가 다 끝났을 때 즈음 Run ‘ridk install’ to setup 이라는 체크박스가 있을텐데 체크 후 Finish 버튼을 눌러 ridk를 다운받아주도록 한다. 그럼 커맨드 창이 뜰텐데 기다리다 Enter 누르라 뜨면 Enter를 눌러 모든 설치를 끝마치면 된다.

 모든 설치가 끝난 후 ruby -v 커맨드를 입력해서

C:\Users\raen0>ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x64-mingw-ucrt]

이런식으로 뜨게 되면 성공이다.

1.4 Jekyll 설치

•  사실 가장 간단한 것인데 내가 자꾸 실수한 부분…
  

  이제 Jekyll를 설치할 차례이다.
  아까 ruby 설치 후 확인 할 때 사용한 cmd 커맨드 창을 열어 다음과 같은 명령어를 처준다.

$ gem install jekyll
$ gem install bundler

  이번에도 다음 커맨드를 입력하여 잘 설치되었는지 확인을 하자.

$ jekyll -v
$ bundler -v

 이제 준비단계는 끝이 났고 github를 들어가 사이트 만들기를 시작해 보자.

2.1 Github repository 만들기

  처음에 만들었던 github 사이트에 로그인을 해보자. 그럼 다음과 같은 화면을 볼 수 있을 것이다. (나는 기본 desktop mode가 dark 라서 어두운 색이고 다른 사람들은 흰색일 수도 있다.) 이 화면에서 누가봐도 초록색으로 나를 눌러줘요! 라고 하는 버튼이 보인다. 그럼 이제 다음과 같은 화면을 볼 수 있을 것이다.
 여기서 이제 중요한 것이 나온다. Owner는 계정을 만들었으면 본인의 이름일 테니 바꾸지 말고, 그 옆에 Repository name 라고 쓰여있는 부분에 이제 본인의 github 주소 “github_username.github.io” 로 쓰면 된다.
 예를 들어 지금 이 블로그 같은 경우에는 “oil-ramp-cat.github.io”이다.
 그 후 맨 아래 내려가서 create repository를 눌러 만들어주자.

2.2 Git clone하기

 아까 우리는 쉽게 하기 위해서 github desktop 프로그램을 깔았었다.

 이제 쉽게 git clone을 해보자.

  처음 생성하면 위 사진과 조금 많이 다를 것이다. 하지만 우리가 봐야할 것은 위에 보이는 ‘File’이다.

  여기 보이는 ‘Clone Repository’ 버튼을 눌러서 원하는 위치에 빈 폴더 안에 clone 한다. 그럼 이제 clone 성공!

2.3 Jekyll 사이트 생성

 지금까지 문제없이 수행했다면 위에서 생성한 repository가 clone 되어 로컬 폴더 안에 저장되어있을 것이다.
 이제 커맨드 창을 열어 빈 폴더로 이동한다.

혹시나 나처럼 어떻게 폴더 이동하는지 모르겠는 사람들을 위한 설명

 일단은 cmd 기준이다.

 나 같은 경우에는 로컬 폴더를 D폴더에 저장하였는데 cmd로는 C폴더로 열려 어떻게 하는지 찾아보다 알게 되었다.
```shell $ C:\Users\raen0> ```
 일단 키게되면 C폴더에 있게 된다. 이 때
```shell $ D: ```
이라는 명령어만을 사용하여 바로 D 폴더로 옮길 수 있고 cd "주소"를 입력해 가려던 로컬 폴더로 이동할 수 있다.

  git clone을성공하였다면 아래 명령어를 입력하여 Jekyll 사이트를 생성해 보자. 이 때 폴더 안에 reame.txt파일이 있을 수 있으니 확인해 보자.

$ jekyll new ./

 그 후 bundle을 설치하고 업데이트 한다.
 간혹 update이후 문제가 생길 때도 있어 Bundle 업데이트 이후, install 을 다시 실행해 준다.

$ bundle install
$ bundle update
$ bundle install

 모두 잘 설치되었는지 확인을 위해 vscode로 폴더에 들어간 다음 아래 명령어를 입력하여 실행시켜 본다.

$ bundle exec jekyll serves

 잠시후 아래와 같은 문구가 뜨는 것을 볼 수 있고 http://127.0.0.1:4000/에 접속하여 Welcome to Jekyll! 이라는 문구가 표시된다면 일단 기본 설정은 완료한 것입니다!

마치며

 마침내 github.io에서 자신만의 사이트를 만들기 위한 첫걸음을 떌 수 있게 되었습니다.
 아직 페이지를 작성하지는 못하였지만 첫발을 내딛었다는 성취감이 있었달까요? 다음번에는 테마까지 정해서 끝을 향해 달려보도록 하죠!