초보자를 위한 GitHub Blog 만들기 (25.01기준) - 2
안녕하세요, 지난번에 반쯤 성공했다고 말씀드렸는데요. 저번에 뜬
---layout: home # Index pagee ---같은 경우는 index.html 파일이 적용되어서 나온 현상입니다. 이번 포스팅에서는 이를 해결하고 마무리해보도록 하겠습니다..
초보자를 위한 GitHUb Blog 만들기
Step1. GitHub 설정
Step1.1: _config.yml 파일 수정
_config.yml 파일에는 많은 설정 정보들이 포함되어 있습니다. 한번 읽어보시는 것을 추천 드리며, _config.yml 파일 커스텀은 이곳을 참고해주세요.
연필모양 눌러 수정
생성한 Repositoy 안의 config.yml 파일에 들어가, 위쪽의 연필 모양을 누르면 수정이 가능합니다.
우선 url과 baseurl을 수정해보겠습니다. url에는 여러분들의 블로그 주소를, baseurl에는 여러분의 user name을 입력해주세요.
예시) url: "https://username.github.io"
baseurl: "/username"
url과 baseurl 수정
Commit message와 Extended description는 나중에 수정한 내용을 알아보기 쉽도록 작성하고 Sign off and commit changes를 눌러줍니다. url과 baseurl을 수정하고 위쪽 Commit changes...를 눌러줍니다.
Sign off and commit changes 클릭
Step 1-2: Jekyll Configure
Settings 탭에 Pages에 들어가면 보이는 Jekyll의 Configure 버튼을 눌러주세요.
그리고 바로 Commit changes…를 눌러 jekyll.yml파일을 생성해줍니다.
다른 것은 수정하지 않고 Commit changes…
그러면 Code에서 jekyll.yml이 생성된 것을 확인할 수 있습니다.
Action에 들어가면 앞서 작성한 commint message를 클릭하면 바뀐 내용을 볼 수 있습니다.
error 메세지
jekyll.yml이 생성되었지만 테마를 아직 초기화하지 않아 사용할 수 없습니다. 이게 많은 분들이 테마를 적용해도 ---layout: home # Index pagee --- 가 뜨고 화면이 나오지 않는 이유입니다. 자 그럼 초기화를 진행해 보도록 하겠습니다.
Step 2. 초기화
Step 2.1: Clone
clone의 방식은 여러가지가 있을 수 있습니다. GUI 없이 프롬트 명령어로만으로 진행할 수 있지만, Git을 잘 사용할 줄 모르시는 분이라면 commend line을 이용하기 보다는 Github Desktop을 추천해드립니다.
Github Desktop 설치가 설치되었으면, 원격지에 있는 Github repository를 로컬과 Clone 해 줄 것입니다. 어려운 말처럼 들릴 수도 있지만 간단히 말해, 인터넷 웹페이지에 어떠한 저장공간(Repository)에 만든 것을 로컬(본인의 PC)로 가져오는 것이라고 생각하면 됩니다.
아래는 Github Desktop을 이용한 방법입니다. 
Github Desktop을 이용한 Clone
Github Desktop을 설치하고 Github 로그인 하면, Clone 할 수 있는 버튼이 보일 것입니다. 그럼 우리가 가져올 Repository를 선택하고 원하는 폴더를 선택하면 여러분의 로컬 PC에 파일을 내려받을 수 있습니다.
Clone할 리포지토리가 제대로 보여지지 않거나 선택을 하지 못하였을 경우, 좌측상단의 File -> Clone a repository -> GitHub.com -> Your repositories에서 해당하는 repository 를 선택 후, 클론 해주시면 됩니다.
Step 2.2: Ruby 설치
로컬에서 Jekyll을 사용하기 위해서는 Ruby을 설치해줘야 합니다.
Ruby 설치
여러분의 환경에 맞게 꼭! WITH DEVKIT, 버전 3이상으로 설치해주세요. 설치파일은 실행 후, 별 다른 수정 없이 Nest만 눌러 디폴트로 설치합니다. ### Step 2.3: jekyll 설치 jekyll을 설치하기 위해 윈도우 키를 누르고 명령프롬프트 혹은 cmd 라고 쳐서 새 창을 열러줍니다.
gem install jekyll bundler
cmd 창에
gem install jekyll bundler 이라고 입력하면 설치가 진행됩니다. 시간이 조금 걸릴 수 있습니다. 설치가 끝났다면 jekyll -v이라고 입력했을 때 설치한 버전이 뜨면 성공적으로 설치가 완료된 것입니다.
Step 2.3: 초기화
이제 초기화할 모든 준비를 마쳤습니다. Jekyll 테마를 초기화 하기 위해 tools/init.sh 파일을 실행해줍니다. 저는 Git Bash를 사용할 겁니다. 우리가 아까 클론 한 폴더 내에서 오른쪽 마우스를 클릭 후 Open Git Bash here을 클릭합니다.
Open Git Bash here
그리고
$ tools/init.sh 이라고 입력하면 초기화가 진행됩니다. 마지막에 > Initialization successful! 이라고 나오면 초기화 성공한 것입니다. 이후,
$ bundle $ jekyll serve 입력해줍니다. bundle 명령어를 통해 필요한 파일들을 설치하고, jekyll serve 명령어를 입력하시면 로컬에서 여러분의 블로그를 확인할 수 있습니다.
성공한다면 https://127.0.0.1:4000/ 혹은 https://localhost:4000/ 으로 접속해 확인해보세요. 
jekyll serve를 통한 블로그 확인
Step3. 동기화 및 배포
Step3.1: 동기화
현재는 로컬과 Github에 있는 코드가 다를겁니다. Github Desktop을 사용하여 로컬에서 수정된 부분을 commit하고 push해줍니다. 
Github Desktop을 통해 commit
Github Desktop을 통해 push
그러면 수정된 코드가 Github repository에 적용될 것입니다.
확인해보면 workflows내 파일들 그리고 _posts 하위 파일들이 삭제되고, bootstrap.css와 assets/js/dist내 여러 js 파일들이 추가 되었을 것입니다.
여기서 workflows/pages-deploy.yml파일을 삭제해줘야합니다. 삭제하는 방법은 Github 사이트 내에서 delete file을 하시고 commit 하시거나 로컬에서 파일을 삭제하시고 GitHub Desktop 또는 cmd를 통해 변경 사항을 commit, push 하시면 됩니다.
Step3.2: 배포
build, deploy 확인
pages-deploy.yml를 삭제하면 Actions 에서 build 와 deploy가 잘 되는 것을 볼 수 있습니다. 이제 성공입니다!
이제 접속해보면 테마가 적용된 블로그가 보이실 것입니다. 아직 업데이트가 안 되었다면 ctrl+shift+r을 통해 새로 고침 해보세요.
마무리
여기까지 고생 많으셨습니다.
테마를 적용 시켰을 때 ---layout: home # Index pagee --- 라고 떠서 곤란하신 분들도 있었을 겁니다. 이번 포스팅을 통해 많은 분들이 문제점을 잘 해결 할 수 있으면 좋겠습니다.
이제부터는 블로그 커스텀을 진행해보도록 하겠습니다.
다음 포스팅
- 초보자를 위한 GitHUb Blog 만들기 (25.01 기준)-1
- 초보자를 위한 GitHUb Blog 만들기 (25.01 기준)-2
- 초보자를 위한 GitHUb Blog 만들기 (25.01 기준)-3