안녕하세요 오늘은 지난 시간에 이어 github pages (깃허브 페이지)에 대해 추가적인 테마를 알아보려 합니다. 바로 jekyll 테마중에 하나인 UNO 테마인데요. 이 테마는 chripy 테마처럼 깜끔한 디자인과 가벼움을 자랑하는 테마입니다. 아래와 같이 단계별로 세팅 방법을 알아보도록 하겠습니다.
UNO 테마 다운로드
jekyll UNO 테마는 아래의 github 주소로 다운로드가 가능합니다. 테마 설치 방법은 github fork 를 통해서가 아니고 다운로드 후 소스를 업로드하는 방식으로 진행이 되기 때문에 로컬 PC 내 해당 코드를 다운로드 하셔야 합니다.
https://github.com/joshgerdes/jekyll-uno
자 그럼 github page 를 위한 github repository 를 만들어 보도록 하겠습니다.
github 레포지토리 생성(for github page)
github 에서 github page 에 대한 사전 습득 내용으로 아래의 링크를 참고하셔서 git 회원가입 및 간단 사용방법을 익히시기 바랍니다.
2. git(깃) 설치와 간단 사용방법, github 연동
저는 git 레포지토리 생성부터 다시금 살펴보도록 하겠습니다. github Dashboard 에서 "Create repository"를 선택 후 나오는 "Create a new repository" 페이지를 통해 레포지토리를 생성해 준다.
채워야할 정보는 "Repository name" 과 "Add a README file" 부분의 첵크입니다.
이전에도 언급했듯이 레포지토리 이름은 꼭 "xxx.github.io" 라는 이름 형태어야 합니다. 이 레포지토리를 만들고 아래와 같이 실제 xxx.github.io 를 브라우저 주소창에 넣고 열어보면 아래와 같이 "xxx.github.io" 라는 내용만 나오게 됩니다.
이제 소스에 UNO 테마를 넣어주는 과정만 있으면 됩니다.
UNO 테마 적용
자 이제 그럼 jekyll UNO 테마를 적용해 보도록 하겠습니다. 아래의 링크에 들어가셔서 아래의 그림과 같이 다운로드를 진행하시면 됩니다. (해당 설명 부분은 fork 형태의 jekyll 테마 설치 방법이 아니고 다운로드 후 적용하는 방식에 대한 설명입니다.)
https://github.com/joshgerdes/jekyll-uno
다운로드 후 압출을 풀면 아래와 같은 파일들이 보입니다.
위 파일들을 git clone(아래 두 링크 참조) 을 통해 로컬에 만들어 놓은 디렉토리에 복사 붙여넣기를 해주시면 됩니다.
2. git(깃) 설치와 간단 사용방법, github 연동
그 전에 github 사이트의 상태와 로컬 디렉토리의 상태를 먼저 확인해 보도록 하겠습니다. 로컬에는 github 의 레포지토리를 만들어 줄때 생성한 README.md 파일과 .git 에 대한 config 설정들이 들어있는 .git 파일이 있습니다. (주의. .git 파일은 지원지지 않도록 주의!!!)
자 그럼 아무것도 없는 디렉토리에 아까 다운받았던 UNO 테마의 디렉토리안에 있는 파일들을 모두 복사 붙여넣기 해주시기 바랍니다.
그 다음 과정은 UNO github에 README 문서를 보면 알수 있겠지만 아래와 같이 명령어들을 수행시켜 주시면 됩니다.
이 과정에서 사전과정(위 공유된 두 참조 링크) 부분에서 잘못 되어있을 경우에는 명령어들이 잘 안먹을 수 있습니다. 다시금 이전 환경을 확인해 주시기 바랍니다. 자 그럼 아래의 명령어를 cmd 나 powershell 을 이용해서 내가 UNO 테마를 옮겼더 디렉토리 패스에서 아래의 명령어들을 입력해 주시기 바랍니다.
gem install bundler
bundle install
bundle add webrick
bundle exec jekyll serve --livereload
그러면 위와 같이 live server 를 돌렸을때 로컬 브라우저를 열어 127.0.0.1:4000/jekyll-uno 입력하면 UNO 테마화면이 나와야 한다. 하지만 나오지 않았다. 왜냐하면 복사 붙여넣기한 디렉토리 path 가 달라졌기 때문에 UNO 테마의 config 를 조금 변경해 줘야 합니다. 변경사항은 아래의 그림에서 diff 를 보실 수 있습니다.
중요한 부분은 baseurl 부분입니다. 저 부분을 오른쪽과 같이 변경해줘야 default url 경로가 맞아 제대로 첫화면을 만나보실 수 있습니다. 자 그럼 로컬에서 다시금 라이브 서버에 의한 접근을 해보도록 하겠습니다. 아래의 화면을 보시면 잘 접속이 되고 있습니다.
그 다음은 당연하게 지금까지는 로컬 작업이었으며 remote 인 github 저장소로 업로드를 해줘야 합니다.
git add .
git commit -m 'Upload initial code'
git push -u origin main
완성되었습니다. 이제 로컬 주소가 아닌 xxx.github.io 주소를 넣어 브라우저를 동작시켜 주시기 바랍니다.
다양한 플랫폼에서 자동화를 하고싶으신 분들은 아래의 오픈방(무료코드 및 무료강의 제공)을 통해 이야기 나누고 있습니다. 관심있으신 분들은 함께해요!!! (코드 0123을 입력하고 들어오세요!!!)
https://open.kakao.com/o/gXPgJC9d (메인방)
https://open.kakao.com/o/g1c7d3Mf (서브방)
다루는 주제들 : 티스토리, 네이버블로그, 워드프레스, 유튜브, 인스타, 트위터, 페북, 숏폼, 메타플랫폼, 쿠팡파트너스, 뉴스픽, 애드픽, 오아시스 등 다양한 주제로 자동화에 대해 같이 이야기 하고 있습니다.
추가적으로 유튜브를 통해서도 만나봐요^^
https://youtube.com/@moonbird.thinker