GitHub Pages만들기(2) - 개발환경 구축하기

안영욱·2023년 3월 22일
0

GitPages 만들기

목록 보기
2/3
post-thumbnail

🔧목적

지난글에서 GitHubPage를 개설하고 템플릿 테마를 적용시키는 방법에대해 작성하였습니다
이제 이 템플릿 테마를 사용자의 목적에 알맞게 수정해야 할텐데,
Git을 바로 이용한다면 아마도

  1. 로컬에서 수정
  2. github로 push
  3. 반영된 페이지 확인

의 무한 반복일것입니다...이런식으로 작업한다면
작은 수정사항을 확인하기 위해 다소 불필요한 과정을 거쳐야하고 시간도 오래걸리기에
즉각적으로 피드백 받을수있는 개발환경을 구축을하는것이 좋습니다!

Ruby를 이용하여 jeklly Bundler사용해 정적사이트를 개설하면
localHost:4000 에서 변동 사항을 빠르게 확인할수 있다.


1. Ruby 설치하기

Ruby다운로드 링크 : https://rubyinstaller.org/downloads/

1-1. 굵은글씨Ruby+Devkit @.@.@ 을받아줍니다 (추천버전)
1-2. 모든항목에 동의해주고 설치를 진행해줍니다, 설치가 끝나고나오는 ridk install를 체크해줍시다.


이화면이 나온다면 성공적으로 다운로드 되었고 이제 1, 2, 3 플러그인들을 받아주어야한다.
1-3. Enter를 눌러 순차적으로 다받아준다.


1-4. 이런식으로 설치가 완료되고 Enter키를 누르면 자동으로 cmd가 종료된다
(저의경우 이미 설치가 되어있어 건너뛰었다는 경고가 나왔습니다.)


1-5. cmd를 관리자 권한으로 열고 ruby가 제대로 설치되어있는지 한번 확인해 줍니다.

ruby -v

밑에 정상적으로 설치버전이 출력이되었음으로 Ruby의 설치가 정상적으로 된것을 확인하였습니다.
이제 ruby에서 사용할 gem을 받아야합니다 gem은 일종의 ruby의 라이브러리 라고합니다.


2. Ruby Gems 설치하기

Ruby는 gem을 이용하여 프로젝트 제작하는데 이는 일종의 라이브러리 이고
Ruby Gems를 다운로드하여 이런 라이브러리들을 쉽고 간편하게 설치,관리 할수 있다고합니다.
(저도 처음 접하는거라 개념만 알고 넘어가겠습니다😅)

2-1. Window 사용자 - ZIP / Mac 사용자 - TGZ 받아 압축을 풀어줍니다.


2-2. cmd를 관리자 권한으로 열고 풀어준 파일경로로 이동해줍니다.


2-3. ruby setup.rb를 입력해 설치 해줍니다.

ruby setup.rb


2-4. 이후 ruby -v 으로 현재 버전이 나오면 정상적으로 설치가 정상적으로 완료된것입니다.

ruby -v

이제 Ruby의 기본적인 세팅은 완료되었고.. jekyll에 대한 세팅이 필요합니다


3. jekyll bundler 설치하기

jekyll bundler로 ruby를 이용한 정적사이트 생성에 필요한 라이브러리를 가져옵니다.

3-1. cmd창을 관리자권한으로열고 gem install jekyll bundler 입력하여 설치해줍니다.

gem install jekyll bundler


3-2. 설치가 완료되었다면 jekyll -v으로 버전을확인하고 잘나온다면 정상적으로 설치가 완료 되었습니다!

jekyll -v

이제 jekyll로 정적사이트 생성이 가능해졌습니다! 이제 생성해보도록 하겠습니다.


4. jekyll로 사이트생성

jekyll bundler 설차까지 완료되었다면 정적 사이트생성이 가능해집니다
이때 사이트는 localhost:4000/으로 생성하여 사용자 개인만 확인이 가능한 공간입니다!

4-1. cmd를 관리자권한으로 열고 GitPage 디렉토리로 이동

cd [내 Gitpage 디렉토리 경로]


4-2. bundle install 로 bundle을 한번 받아준다

bundle install


4-3. bundle exec jekyll serve 로 페이지를 생성한다!

bundle exec jekyll serve

위에 Server running... 이 나오면서 기존에 테마를 적용시켜둔 페이지가 생성되었다


4-4. 이제 인터넷 주소창에 localhost:4000/를 입력하면 내가 적용한 페이지가 보인다

localhost:4000/


이제 이렇게 정적 사이트를 생성하면 따로 git으로 업로드하고 최신화하지않아도
실시간으로 변화하는 사이트 모습을 볼수 있을것이다

그렇게 수정을하고 어느정도 commit이 쌓이거나 백업이 필요할때
git으로 push하는 형식으로 최신화관리를 할수 있다!

다음글은 이제 블로그를 커스터마이징 하는 글을 작성해보겠습니다.

profile
개발자좀 한번해보자

0개의 댓글