Chirpy 테마를 이용한 Github Pages 개설 [2]
로컬 서버 생성 및 테마 설치
본 게시물은
Windows 10환경에서 진행됨을 알려드립니다.
25.01.14일자 기준으로 진행하며,Chirpy의 버전은7.2.4v입니다.
북마크
☝ 1단계를 진행하지 않으신 분들께서는 위 링크를 클릭하여 이전 글을 확인해주시기 바랍니다.
이번 글에서는 이전에 생성한 Repository 를 바탕으로 로컬 서버를 실행해보고, 테마를 적용해보도록 하겠습니다.
1. 로컬 서버 실행하기
1. Jekyll 프로젝트 생성하기
Win 키를 누르고, PowerShell 을 검색 후 실행하신 뒤, 아래의 명령어를 입력하여 현재 디렉토리의 위치를 확인합니다.
1
2
$ pwd
C:\Users\username
현재 디렉토리가 파악이 되었다면, Powershell 에서 바탕화면에 있는 username.github.io 폴더로 이동해주세요.
디렉토리를 이동할 땐, cd 명령어를 이용하시면 됩니다.
프로젝트 폴더에 직접 들어가서 파일 탐색기 위쪽에 있는 경로를 복사한 후
cd명령어 뒤에 붙여넣기 하시면 빠르게 이동하실 수 있습니다.
1
$ cd .\Desktop\username.github.io\
반대로, 이전 디렉토리로 이동하고 싶으시다면 cd .. 명령어를 입력해주시면 됩니다.
cd 와 .. 사이에는 공백이 있으니, 이 점 확인 바랍니다.
1
$ cd ..
이동하셨다면, 마지막으로 한번 더 pwd 를 입력하여 현재 디렉토리가 아래와 같은지 확인해봅시다.
1
2
$ pwd
C:\Users\MinSeong\Desktop\username.github.io
해당 디렉토리로 오셨다면, 아래의 명령어를 실행하여 Jekyll 프로젝트를 생성합니다.
아래의 명령어를 실행하기 전, 프로젝트 폴더 내부에 파일이 있다면
전부 삭제 후 명령어를 실행하시기 바랍니다.
프로젝트 폴더 내부에 파일이 있다면, 명령어 실행 시 아래와 같은 에러가 나타나게 됩니다.
Conflict: C:/Users/Username/Desktop/username.github.io exists and is not empty.
Ensure C:/Users/Username/Desktop/username.github.io is empty or else try again with--forceto proceed and overwrite any files.
1
$ jekyll new ./
명령어를 실행한 후, 프로젝트 폴더에 아래와 같이 파일들이 생성되었다면 성공입니다.
설치가 완료되었다면, 아래의 명령어를 순서대로 실행합니다.
1
2
3
$ bundle install
$ bundle update
$ bundle install
install 이 완료되었다면, 아래의 명령어를 입력하여 로컬 서버를 실행합니다.
1
$ bundle exec jekyll server
실행을 한 뒤 사진의 빨간색 박스를 보시면, http://127.0.0.1:4000/ 이 적혀있습니다.
인터넷 브라우저를 켜신 뒤, http://127.0.0.1:4000/ 로 접속해줍니다.
사진과 같이 Welcome to Jekyll! 문구가 있는 사이트가 열린다면 성공입니다.
Q. 로컬서버는 무엇이고, 이것을 사용하는 이유는 무엇인가요?
로컬 서버는 쉽게 말해서, 내 PC 에서만 작동하는 웹 서버입니다. 사용하는 이유는 주로
Jekyll블로그를 개발하고 수정하는 과정에서 빠르게 결과를 확인하기 위함입니다. 코드를 수정 후 페이지를 새로고침 하면, 실제로 게시글을 배포하기 전의 모습을 확인할 수 있고, 오류를 미리 파악하여 배포 후 발생하는 버그를 줄일 수 있습니다.
2. Chirpy 테마 설치 및 초기화
1. Chirpy 테마 다운로드
본문은 chirpy 테마를 기준으로 진행합니다.
위 링크를 클릭하여 사이트에 접속한 뒤, Releases v7.2.4 를 클릭합니다.
Source code (zip) 를 클릭하여 jekyll-theme-chirpy-7.2.4.zip 을 다운로드 합니다.
다운로드한 압축파일을 안의 모든 파일들을 본인의 프로젝트 폴더 username.github.io 에 전부 넣어주세요.
파일들을 넣으실 때, 중복 경고가 나타나게 되는데 덮어쓰기 해주시면 됩니다.
2. Chirpy 테마 초기화
초기화는 말 그대로 테마의 순정상태를 만드는 것 입니다.
Linux 에서는 bash tools/init.sh 라는 명령어로 초기화를 쉽게 할 수 있습니다.
하지만 Windows 환경에서는 동작하지 않아서, 직접 삭제하는 과정을 거쳐야 합니다.
아래의 폴더 및 파일을 찾아서 삭제해주시면 되겠습니다.
-
username.github.io/.github/workflows/starter폴더 삭제 -
username.github.io/docs폴더 삭제 -
404.html파일 삭제 -
about.markdown파일 삭제 -
index.markdown파일 삭제 -
Gemfile.lock파일 삭제
3. github message 수정
username.github.io/.husky 경로에 들어가시면 commit-msg 라는 파일이 있습니다.
이 파일을 더블클릭 후, VS Code 로 실행해주세요.
commit-msg 파일 내부엔 아래와 같은 코드가 작성되어 있는데, 내용을 전부 지워주시면 됩니다.
1
npx --no -- commitlint --edit $1
3. Node.js 및 npm 설치
Node.js 를 설치하셨다면, npm 도 함께 설치됩니다.
설치를 해주신 뒤, Powershell 을 실행하여 아래의 명령어를 입력했을 때, 아래와 같이 출력되면 성공입니다.
1
2
$ node -v
v22.13.0
1
2
$ npm -v
10.9.2
npm -v 명령어가 실행되지 않을 경우
npm -v 명령 실행 시 아래와 같은 오류가 나타나는 분들이 있을 수 있습니다.
npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다.
자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
이는 PowerShell 의 실행 정책 때문에 발생한 오류입니다.
실행 정책을 변경하기 위해서, PowerShell 을 관리자권한 으로 실행 후, 아래의 명령을 실행해주세요.
1
Set-ExecutionPolicy RemoteSigned
이후 아래의 명령어를 실행시키면 정상적으로 출력됩니다.
1
npm -v
이후 PowerShell을 통해서 프로젝트의 루트 디렉토리로 이동합니다.
1
$ cd .\Desktop\username.github.io\
루트 디렉토리로 이동하셨다면, 아래의 명령어를 순서대로 실행해주시면 됩니다.
1
2
$ npm install
$ npm run build
추가적으로 Bootstrap 이라는 것도 설치해주겠습니다.
1
$ npm install bootstrap
Bootstrap 이 정상적으로 설치되었는지 확인하기 위해서는 아래의 명령어로 알 수 있습니다.
1
2
3
4
$ npm list bootstrap
jekyll-theme-chirpy@7.2.4 C:\Users\MinSeong\Desktop\Minssuy99.github.io
`-- bootstrap@5.3.3
아래 사진과 같이 dist 폴더 및 파일들이 생성되었다면 성공입니다.
여기까지 진행되었다면 한번 더 아래의 명령어를 실행시켜줍니다.
1
2
3
$ bundle install
$ bundle update
$ bundle install
이후 아래의 명령어를 실행 후 로컬서버로 접속합니다.
1
$ bundle exec jekyll server
로컬서버의 주소는 목차 1번 에서 보여셨듯이, http://127.0.0.1:4000 로 접속해주시면 됩니다.
아래와 같은 화면이 출력된다면 성공입니다.
마치며
이번 글에선 로컬서버를 통해서 블로그에 chirpy 테마를 적용하고 확인하는 단계까지 끝마쳤습니다.
다음 글에선, 블로그를 커스텀하고 github 에 push 까지 하는 과정을 알아보겠습니다.
긴 글 읽어주셔서 감사합니다.