개발자의 여의도 표류기
MacOS에서 Github.io blog 만들기 본문
평소에 모르는 부분에 대해 검색하고 그것을 Notion에 기록하는 습관이 있다.
하지만 Notion에 정리한 내용은 남들에게 공유하기가 쉽지 않기 때문에
Blog를 같이 운영하면서 내가 공부한 내용들을 포스팅하기로 결심했다.
Tistory와 Github.io 중에 어떤 블로그를 운영할 지 많은 고민이 있었는데,
Tistory는 블로그 개설 과정이 매우 단순하다는 점이 좋아 처음엔 Tistory만 운영하고자 하였다.
하지만, Notion에 적은 내용을 Tistory로 다시 옮겨 적는 과정이 너무 귀찮았고 번거로운 작업이라는 것을 느꼈다.
Github.io는 반대로, Notion에서 작성한 글을 Markdown으로 내려받아 조금의 수정 작업만 진행해주면 내가 작성한 그대로 포스팅할 수 있다는 점이 너무 매력적이었다.
따라서, Github.io를 메인 블로그로, Tistory를 Troubleshooting을 주로 포스팅하는 서브 블로그로 병행 운영하기로 결심하였다.
그런데..
옛날부터 Github.io 블로그를 만드는 과정이 너무 복잡하고, 어렵게만 느껴져서 몇 차례 포기했던 기억이 있다.
이번에도 블로그를 만들면서 너무 헤맸지만, 결국에는 개설을 완료하였고 그 과정을 간단하게 정리하여 올리고자 한다.
4단계만 잘 따라오면 된다!
1. github.io 생성
GitHub Pages
Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
pages.github.com
- 이 방법대로 자신의 github 아이디로 github.io 블로그를 개설해주면 된다.
- 2번 Clone the repository 까지만 진행해주면 된다.
2. 테마 적용하기
[Jekyll Blog] 블로그 테마(Themes) 고르기 및 환경설정
개요 블로그 구축의 첫 관문. 테마를 고르고 GitHub 저장소에 등록하기 위한 사전 지식에 대하여 알아봅니다.
theorydb.github.io
Jekyll Themes
jekyllthemes.org
- 구글에 github jekyll theme 이런 식으로 검색하면 위 사이트 말고도 여러 테마를 적용할 수 있는 사이트를 찾을 수 있다.
- 그 중에서 나는 아래 테마를 선택을 하였다.
GitHub - vszhub/not-pure-poole: A simple, beautiful, and powerful Jekyll theme for blogs.
A simple, beautiful, and powerful Jekyll theme for blogs. - GitHub - vszhub/not-pure-poole: A simple, beautiful, and powerful Jekyll theme for blogs.
github.com
- Github에 들어가서 초록색 버튼 <> Code -> Download ZIP을 눌러준다
- ZIP 파일을 풀어주고, 폴더 안에 있는 내용을 username.github.io 폴더 안에 그대로 복사해주면 된다.
3. Ruby 설치
우선 terminal에서 username.github.io 폴더로 이동하도록 하자.
3-0. Homebrew 설치
Homebrew
The Missing Package Manager for macOS (or Linux).
brew.sh
- terminal에 brew를 검색하여 설치가 되어있지 않다고 나오면 위 사이트를 참고하여 먼저 설치해주도록 하자.
3-1. Ruby 설치
brew update
brew install rbenv ruby-build
- brew를 통해 rbenv를 설치해주도록 하자.
- 설치가 되어있으면 3-2로 넘어가면 된다.
3-2. Bundler 설치
$ gem install bundler
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.
- Bundler가 잘 설치되면 3-3으로 넘어가면 된다.
- 그렇지 않다면, 아래 블로그를 참고하여, Bundler를 잘 설치해주면 된다.
Mac에서 Gem::FilePermissionError 에러 발생시 해결 방법
Mac에서 Ruby의 패키지 매니저인 gem을 통해 설치를 진행하다 다음과 같은 에러를 만납니다. $ gem install bundler ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Ge
jojoldu.tistory.com
3-3. bundle install
bundle install
- 위 명령어는 2번에서 받아준 테마의 구동에 필요한 library를 설치하라는 의미이다. (정확하지는 않지만 의미적으로)
- 위 명령어를 입력하였을 때, 작동이 제대로 된다면 상관없겠지만.. 보통은 Ruby의 버전이 달라서 설치가 되지 않는 경우가 많을 것이다.
- 위 사진과 같은 경우도 jekyll 테마가 Ruby Version 2.7를 지원하지만, 내 PC에 설치된 Ruby Version이 3.2.2라서 library 설치가 제대로 진행되지 않는 것이다.
rbenv versions
- 위 명령어로 내 PC의 Ruby 버전을 확인해주도록 하자.
rbenv install -l
- 그 다음, 위 명령어로 설치할 수 있는 Ruby 버전을 확인하자.
- jekyll 테마가 version 2를 요구할 경우, 2.7.2를 설치해야 할 것이다.
- 나의 경우에는 이미 2.7.2가 깔려있기 때문에 list에 2.7.2가 존재하지 않는다.
ruby install 2.7.2
- jekyll 테마가 요구하는 Ruby version을 설치해주도록 하자.
- 2.7.2는 하나의 예시로 작성을 해둔 것이고, 실제로 필요한 버전을 입력하자.
rbenv global 2.7.2
rbenv versions
- PC의 Ruby 버전을 2.7.2로 바꿔주고, 잘 적용되었는지 확인하자.
bundle install
- 마지막으로, bundle install을 재시도 해보자
- 오류가 발생하지 않는다면, 아래와 같이 library들이 잘 설치 될 것이다.
bundle exec jekyll serve
- 마지막으로 local 환경에서 내 블로그가 제대로 작동되는지 확인해보도록 하자.
- 성공적으로 구동되면 localhost:4000에서 내가 내려받은 테마를 직접 확인해볼 수 있다.
4. 블로그 꾸미기
지금까지는 남의 테마를 그냥 다운받은 것이기 때문에 내 입맛대로 블로그의 구조를 바꿔주는 작업이 필요하다.
아래 블로그의 Jekyll 디렉토리 구조 파트를 참고하여 그 작업을 진행해주면 된다.
[Jekyll Blog] GitHub 연동 및 Jekyll 설치
개요 앞서 선정한 테마를 GitHub에 연동하고 Jekyll을 설치하여 웹브라우저에 직접 블로그를 띄워봅시다. 목차 GitHub 회원가입 및 Fork Git 설치 및 Clone Ruby & Jekyll 설치 Jekyll 디렉토리 구조 파일 수정
theorydb.github.io
Notion에서 작성한 글을 Github.io로 옮기는 방법은 아래 블로그에 잘 나와있다.
Notion으로 글 작성하고 Github io로 글 옮기기 - 뀔뀔(swieeft)의 개발새발기
기존에 블로그를 Notion으로 운영하기 위해 작업을 하다가 여러가지 문제점을 발견하여 Github io로 블로그를 이동하게 되었습니다. 그 과정에서 작성된 게시글들을 옮겨야 되는데 막막하던 차에 No
swieeft.github.io
5. 요약
Github.io 블로그 구축 과정은 다음과 같이 요약할 수 있다.
- 내 github.io 만들기
- 마음에 드는 테마 다운 받기
- 테마 구동에 필요한 library 설치
- 테마를 수정하며 블로그 꾸미기
중구난방으로 자료를 찾아보다가 github 블로그 구축의 꿈을 포기하는 사람이 없길 바라본다.
'Trouble Shooting' 카테고리의 다른 글
[Node.js] DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead. (0) | 2023.06.26 |
---|---|
[One-Key-Hidpi] 맥북 외장 모니터 배율(해상도) 조정 방법 (3) | 2021.01.02 |