[Github.io] Create

seuhyang·2023년 4월 13일

github.io

Github.io blog

목록 보기

1/1

OS : Mac OS

github의 블로그인 github.io를 한번 세팅해보고 싶었다.

Step. 1

프로젝트 생성

github에서 repositories 에서 새로운 프로젝트를 만든다

https://github.com/new

프로젝트 명은 반드시 userName.github.io 으로 만들어야 한다 고 함
( userName : 사용자 닉네임, ex test.github.io )

위와 같이 프로젝트를 설정하면 아래와 같이 만들어 진다.

Git Clone

먼저 해당 프로젝트에서 Code 버튼을 누르고 git clone할 수 있는 프로젝트 주소를 복사한다

이후 다음 명령어를 실행한다.

mkdir blog
cd blog
git clone 복사한 주소 입력

여기까지 하면 git 프로젝트 내용이 복사된것을 확인할 수 있다.

나는 아래의 단계를 먼저 진행하지 않았지만 먼저 확인하고 싶다면 진행해도 된다. 문제될 것은 하나도 없다.

이제 여기서 아래처럼 실행하면 홈페이지가 생성, 접속이 가능하다

cd 프로젝트명으로 생성된 폴더명 입력
echo "Hello World" > index.html
git add . 혹은 git add --all
git commit -m "add file, index.html"
git push -u origin main

사용자닉네임.github.io 를 들어가면 Hello World 가 찍힌 것을 확인 할 수 있다.

Step. 2

Theme

github.io에서 많이 사용되는 Jekyll 테마
직접 Theme를 만들고 커스터마이징을 할 수 있지만 아직은 아니여서 테마를 가져와서 썼습니다.

테마를 확인할 수 있는 사이트는

검색한다면 다른 것도 아마 존재할 것입니다. ~~귀찮아서 찾지 않음~~

찾아본 것에서 하나인 https://hydejack.com/ 테마를 사용할 것입니다.
저는 파일 다운받아서 직접 파일을 넣었습니다.

실행 준비

gem install jekyll bundler

위를 실행하면 바로 되는 사람도 있고, 안되는 사람도 있을 것이다.
아, 물론 나는 후자...😔..... 안깔려...😔😔😔

에러 메세지

gem install jekyll bundler   
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

해결방법 (homebrew가 깔려있다는 상태여야 함)

rbenv 설치. build

brew install rbenv ruby-build

설치 확인 및 현재 사용 버전 확인

rbenv versions

설지 가능한 버전 확인

rbenv install -l

설치 (3.2.2 버전 설치 ~~하려고~~했음)

rbenv install 3.2.2

위까지 완료하고 다음을 진행하고 싶었지만

하지만 나는 바로 설치 되지 않았지 ~~나는..개똥벌레..~~
BUILD FAILED...😫

BUILD FAILED (macOS 13.2.1 using ruby-build 20230330)

Inspect or clean up the working tree at /var/folders/zh/qf319y8s22lg23y6_lyl_04r0000gn/T/ruby-build.20230413113613.63122.hPooAV
Results logged to /var/folders/zh/qf319y8s22lg23y6_lyl_04r0000gn/T/ruby-build.20230413113613.63122.log

Last 10 log lines:
	Check ext/psych/mkmf.log for more details.
*** Fix the problems, then remove these directories and try again if you want.
Generating RDoc documentation
/private/var/folders/zh/qf319y8s22lg23y6_lyl_04r0000gn/T/ruby-build.20230413113613.63122.hPooAV/ruby-3.2.2/lib/yaml.rb:3: warning: It seems your ruby installation is missing psych (for YAML output).
To eliminate this warning, please install libyaml and reinstall your ruby.
uh-oh! RDoc had a problem:
cannot load such file -- psych

run with --debug for full backtrace
make: *** [rdoc] Error 1

어.... libyaml 깔래요...

brew install libyaml

# 깔려라...
rbenv install 3.2.2

..깔렸다!🫠...
친절하게 `rbenv global 3.2.2` 실행하라고 합니다. 기본 값으로 활성화 하라고..

사용 버전 변경

rbenv global 3.2.2

이렇게 하고 rbenv versions 3.2.2 버전이 적용이 안될 수 있습니다.
~~왜...😩~~

환경변수 설정

# 먼저 실행하고
vi ~/.zshrc
# 진입하면 i 를 눌러 INSERT MODE로 진입 후 맨 아래에 아래 코드 복사
[[ -d ~/.rbenv  ]] && \
export PATH=${HOME}/.rbenv/bin:${PATH} && \
eval "$(rbenv init -)"
# 적용
source ~/.zshrc
# 적용 후 다시 설치
gem install jekyll bundler

깔렸다..

Step. 3

로컬 서버 실행

개발 툴이든 터미널이든 아무튼 터미널에서

# ~/blog/프로젝트파일명 이동 된 상태에서 실행
bundle install
# 서버 실행
bundle exec jekyll serve

127.0.0.1:4000으로 로컬에서 실행 확인 할 수 있습니다.

서버 종료는 터미널에서 ctrl + c 하면 탈출하면서 서버 종료됩니다.

파일 설정 수정

_config.yml

# Theme
# ---------------------------------------------------------------------------------------

theme: jekyll-theme-hydejack
# remote_theme: hydecorp/hydejack@v9

위처럼 되어있는 코드를 아래 사진처럼 바꿨습니다.

authors.yml
정보 및 링크 관련 수정입니다. 메인페이지 github link 도 여기있습니다.

  # Social media icons in sidebar
  # Comment/uncommet to show/hide
  # Rearrange to change the order in which they appear
  social:
    # twitter:         <username>
    github:          <username>
  ...

이런식으로요

저는 여기까지 하고 git 에 올렸습니다.

git add .
git commit -m "theme"
git push

커스텀은 나중에 하는걸로...

참고사이트

seuhyang

Dev.