깃허브 블로그 만들기 - 세팅 및 설치 (1)

블로그 개설할때 티스토리, 벨로그 등등 다양한 블로그 플랫폼있지만 github 로 이용해서 블로그 개설할 수 있다길래 만드는 과정 보니까 나름 괜찮은 것 같더라구요.
그래서 github로 블로그 만드는 방법을 알려드리겠습니다.

해당 방법은 [window OS] 기준 입니다. 참고하세요.

1. 준비 과정

github 로 블로그 만들때 제로베이스부터 만드는 것보다 테마를 찾아서 적용하는게 더 훨씬 좋습니다.
검색하다보면 블로그 테마를 추천 해주는 사이트가 여러개 나오는데, 저는 그 중에서 정보 공유가 잘되어 있는 Jekyll Chirpy 테마 기준으로 작성 합니다.

설치 전 준비물

• Ruby - 버전 3.3.0 추천
• node.js - LTS or Current 둘중 하나 설치
• vscode - 혹시나 없으신 분들 설치

node.js와 vscode 설치는 과정은 생략합니다.

2. 설치하기

Ruby 설치

먼저 다운로드 받은 rubyinstaller-devkit-어쩌구.exe 실행해서 전부 다 동의 후 설치합니다.

설치가 끝나고 확인 누르면 ruby cmd 창이 나타나는데 Enter 입력하면 인스톨 시작됩니다.
인스톨 끝나고 마지막에 다시 Enter 누르면 세팅 끝납니다.

Chirpy 테마 다운로드

https://github.com/cotes2020/jekyll-theme-chirpy 로 접속합니다.

위 사진과 같이 clone 버튼 클릭 후 download ZIP 다운로드 받습니다.

다른 블로그에선 저장소 fork 해서 진행하는데 저 같은 경우 커스텀할 때 문제 생길 것 같아서 그냥 복제해서 사용합니다.

3. 세팅하기

압축풀기 후 vscode에서 해당 폴더 오픈 합니다.

폴더들 보면 막 이것 저것 있는데 필요없는 파일들을 수동으로 지우셔야 합니다.
우선 지워야할 폴더 및 파일은 아래와 같습니다.

• docs 폴더 삭제
• .github 폴더 내 workflows 폴더 제외 다 삭제
• workflows 폴더 내 page-deploy.yml.hook 제외한 나머지 파일 삭제
• page-deploy.yml.hook 파일 명을 page-deploy.yml 로 변경
  
  

파일들을 다 지웠다면 ctrl + shift + [~] 단축키 눌러 터미널 탭에서 다음과 같은 명령어를 순차적으로 실행합니다.

gem install jekyll
gem install bundler
bunlde
npm install

노드 모듈까지 생성 완료 되었으면 npm run build를 실행합니다.

npm run build

npm run build 후 window OS 인 경우 위와 같은 오류 메세지 나타납니다.
해당 원인은 window 환경에서 NODE_ENV 환경 변수를 설정하는 방식이 Unix 기반 시스템과 다르기 때문에 발생합니다. Unix 기반 시스템에서는 NODE_ENV=production와 같이 환경 변수를 설정할 수 있지만, window에서는 다른 방식을 사용해야 합니다.

다시 powershell 내에서 다음과 같이 실행 합니다.

npm install --save-dev cross-env

그리고 package.json 파일 내 build 찾아서 코드 수정합니다.

"scripts": {
  "build": "cross-env NODE_ENV=production npx rollup -c --bundleConfigAsCjs"
}

수정 후 다시 npm run build 하고 created min.js 생성 완료 되면 jekyll serve 실행 합니다.

jekyll serve

http://127.0.0.1:4000/
그러면 위와 같이 로컬호스트 주소가 나오는데 접속해보면 적용된 것을 보실 수가 있습니다.

[적용된 모습]

다음 포스트에서는 깃허브 저장소와 연동 하는 방법에 대해 알아보겠습니다.