Al-folio 템플릿을 사용해서 github.io 개인 홈페이지 만들기 (3)

Al-folio 템플릿을 사용해서 github.io 개인 홈페이지 만들기 (1) - 템플릿 가져오기

Al-folio 템플릿을 사용해서 github.io 개인 홈페이지 만들기 (2) - 홈페이지 deploy 하기

Al-folio 템플릿을 사용해서 github.io 개인 홈페이지 만들기 (3) - 로컬 서버에 홈페이지 띄우기 1

Al-folio 템플릿을 사용해서 github.io 개인 홈페이지 만들기 (4) - 로컬 서버에 홈페이지 띄우기 2

 

[Intel/M1/M2 맥북] al-folio 를 로컬 서버에 띄우기 (1)

오늘 글에서는 al-folio를 github repository에서 고치는 것이 아니라 로컬(내 노트북 혹은 컴퓨터)에서 고치고 실시간으로 고친 것들을 확인할 수 있도록 설정을 해보도록 하겠다. 이 글은 차례대로 하나씩 해야지 오류 없이 따라올 수 있으니 시간이 조금 걸리더라도 차근차근 따라오기를 바란다.

** 만약 어두운 배경에서 코드가 잘 안 보이시면 우측 하단의 달 모양을 눌러 흰색 배경으로 바꿔주세요!! **

 

1. Visual Studio Code 설치하기

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Download를 누르고 Visual Studio Code를 설치한다

 

2. Homebrew 설치

길이 너무 길어지는 관계로 다른 글에 올리도록 하겠다. https://yehyunsuh.tistory.com/6

[맥북] Homebrew 설치하기

 

3. 터미널 실행하기

cmd + space 를 눌러서 맥북 검색창을 띄우고 terminal 을 검색하여 실행한다.

 

4. Rbenv 설치 및 설정

아래의 명령어를 하나하나 터미널에서 실행한다.

brew update

brew install rbenv

rbenv install -l

rbenv로 설치할 수 버젼들이 있는데, 나는 가장 위에 있는 버젼으로 설치를 할 예정이다. 만약 본인의 터미널에서는 다른 버젼으로 나온다면, 본인의 터미널에서 나오는 버젼으로 설치하면 된다.

rbenv install 3.0.6

rbenv global 3.0.6

rbenv versions

이제 rbenv versions이 내가 설치한 버젼으로 설정된 것을 확인할 수 있다. 하지만 ruby의 version을 확인해보면 내 rbenv 버젼과 다름을 알 수 있다. 이제 내 로컬 ruby 버젼을 rbenv와 동일하게 만들어보자.

rbenv init

rbenv init을 실행하게 되면 어떤 파일을 수정해야하는지 알려준다. 이제 ~/.zshrc 파일로 이동하여 몇가지 수정을 해보도록 하자.

vim ~/.zshrc

우리는 현재 ~/.zshrc 파일에 들어와서 해당 파일을 수정할 수 있도록 되었다.

터미널에서 i를 누르면 밑에 --INSERT--가 생긴 것을 볼 수 있다. 이제 파일을 수정할 수 있는 상태가 되었다.

rbenv init을 했을 당시 ./~zshrc 파일에 추가해야 하는 명령어를 이제 추가해주자.

명령어를 전부 다 적었다면, esc 키를 눌러준다. 밑에 --INSERT--가 사라진 것을 확인할 수 있다.

--INSERT-- 가 사라진 상태에서 :wq! 를 누르고 엔터키를 눌러주면 저장 및 종료가 실행된다.

rbenv versions
ruby --version

이제 다시 rbenv와 ruby의 버젼을 확인해보면 일치하는 것을 확인할 수 있다.

 

이제 남은 과정은 다음 게시글에서 계속 이어나가 보자!