죽어가는 내 티스토리 블로그와 깃허브 잔디를 살리기위해 다시 시작한 깃허브 블로그
윈도우 노트북에는 깃허브 블로그 환경 세팅이 되어있지만 맥북에서는 해본적 없어 ruby와 jekyll 설치부터 시작하였다.
이전에 작성했던 깃허브 블로그 만들기 포스팅 👉🏻 https://juran-devblog.tistory.com/2
0. Jekyll 이란
Github에서 개발한 정적 웹사이트 개발 툴로 Ruby(루비)로 작성되었다.
HTML이나 Markdwon 등의 언어로 글을 작성하면 이를 정의한 규칙에 따라 레이아웃으로 포장하여 정적 웹사이트로 만들어 준다.
기본적으로 Markdown으로 post 작성 > Jekyll 실행하여 웹에서 어떻게 보여지는지 확인 > 푸쉬하여 깃허브 올리고 배포 이 순서대로 깃허브 블로그 포스트 작성이 완료된다.
1. Ruby & Jekyll 설치
[참고] https://danaing.github.io/etc/2022/03/14/M1-mac-jekyll-setting.html
일단 homebrew는 설치된 상태이다.
rbenv를 통해 여러 버전의 Ruby를 설치할 수 있다. Mac M1의 경우 Ruby(system)가 설치되어있는데 rbenv로 최신 버전의 Ruby를 설치하고 해당 버전을 글로벌로 바꾸려한다.
brew명령어로 rbenv, ruby-build 설치하기
1
brew install rbenv ruby-build
설치 가능한 Ruby 버전 확인하기
1
rbenv install -l
원하는 버전의 Ruby 설치하기
1
rbenv install {version}
설치된 버전 확인하기
1
rbenv versions
글로벌 버전 변경하기
1
rbenv global {version}
rbenv PATH 추가하기
1
2
3
# vim ~/.zshrc 하단에 추가
export PATH={$Home}/.rbenv/bin:$PATH && \
eval "$(rbenv init -)"
코드 수정 적용
1
source ~/.zshrc
Ruby 설치하다 만난 에러 xcrun: error: invalid active developer path
[참고] https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/
CommandLineTools를 식별하지 못해 발생한 에러라고 한다. xcode-select로 설치하여 해결할 수 있다.
xcode-select --install
Bunlder 설치하기
1
gem install bundler
Jekyll 설치하기
1
gem install jekyll
2. 블로그 레퍼지토리 생성
{github 아이디}.github.io 이름의 공개 레퍼지토리를 생성한다. 이 레퍼지토리 이름이 곧 블로그 주소가 된다.
나의 경우 테마를 바로 적용하기 위해 테마 레퍼지토리를 Fork 해온 뒤 이름을 변경하였다.
3. 블로그 테마 적용
내가 선택한 테마는 Chirpy
직접 소스코드 내려받아서 어찌저찌 해봤는데 다 디플로이 실패하고 그냥 블로그 따라서했다..
깃에서 테마 Fork 해온 뒤 (https://github.com/cotes2020/jekyll-theme-chirpy) 2번 내용과 같이 레퍼지토리 이름을 바꿔준다.
블로그 소스코드 내려받기
1
git clone {github.io_repo_clone_url}
Chirpy 초기화
1
2
cd tools
./init.sh
필요한 패키지 설치
1
bundle
jekyll 실행시켜서 확인
1
jekyll serve
http://127.0.0.1:4000/ 접속하여 확인했을 때 블로그가 잘 나오면 성공!
그 다음은 평소 깃 사용하는대로 변경사항을 푸쉬하면 된다. 푸쉬 성공 후 조금 시간이 지나면 디플로이되고 {github아이디}.github.io 에 접속하면 푸쉬한 블로그가 잘 뜨는걸 확인할 수 있다.
깃에 올리기 전, 빌드 및 배포 오류를 막기 위해 .gitignore 에 아래 파일을 추가해준다.
1
2
# vim .gitignore
Gemfile.lock
그리고 커밋, 푸쉬
1
2
3
git add .
git commit -m "commit message"
git push origin master
푸쉬 후 배포 상태 확인하기
4. 블로그 시작
블로그 껍데기가 만들어졌다면 이제 내용을 꾸며볼 차례이다. _config.yml 수정하여 대충 내 블로그의 환경설정을 해준다.
- timezone: Asia/Seoul
- title: Juran’s Devlog
- avatar: assets/img/{이미지파일명} #프로젝트 내 파일 경로, 좌측 메뉴의 이미지 파일
그 밖에도 여러 옵션들이 있는데 주석이 잘 달려있어서 보고 수정하면 된다.
난 블로그 글씨체랑 폰트 크기가 마음에 안들어 scss파일들을 수정하였다. (구글폰트 https://fonts.google.com/)
1
2
@import url('https://fonts.googleapis.com/css2?family={font_name}&display=swap');
font-family: {font_name}, sans-serif;
개발자도구를 켜서 수정하고 싶은 부분 속성의 파일 위치를 파악한다.
해당 파일로 가서 원하는대로 수정해준다. 보통 .scss 파일들은 _sass 폴더나 _layout 폴더에 있다.
포스트는 _posts 폴더 아래 YYYY-MM-DD-{제목}.md 파일로 작성한다. 여기서 제목에 띄어쓰기는 들어가면 안된다! 띄어쓰기 대신 -를 사용하자. 아니면 포스팅 안에 포스트 관련 옵션들을 지정할 수 있다.
1
2
3
4
5
6
7
8
9
---
layout: post
title: {title}
description: null
tags: [tag1, tag2, ...]
img: null
categories: [category1, category2, ...]
date: 'YYYY-MM-DD HH:mm:SS ...'
---
잘 모르겠다면 데모의 post 예시를 참고하자 https://github.com/cotes2020/jekyll-theme-chirpy/tree/master/_posts
이리하여 깃허브 블로그 되살리기 끝 👊🏻