깃 블로그 만들기

Intro

---

언젠가 만들어야지 했던 깃 블로그. 드디어 만들어보기로 했다.

Main

---

1. 기본 페이지 만들기

깃허브에 이름이 본인아이디.github.io인 공개 레포지토리를 생성한다.

생성된 레포를 클론하여 로컬로 가져간 뒤에, index.html을 만들고 push해보자.

index.html 하나만 넣어줘도 기본 페이지 완성

url로 아까 생성한 레포명을 입력하면 생성된 페이지를 확인할 수 있다.

2. Jekyll 설치

블로그 템플릿은 Jekyll을 통해 가져오기로 했다.

Jekyll을 설치하기 위한 gem은 Ruby의 라이브러리이므로, 결국 이를 사용하기 위해 윈도우에서 루비 사용을 위해서는 RubyInstaller를 통해 설치를 해줘야 한다.

참고로, ruby를 설치하기 위해서는 주요 플랫폼 별로 사용하는 도구가 다르다. (Windows는 RubyInstaller, Linux/UNIX는 RVM 등..)

RubyInstaller 설치

여기들어가서 본인 사양에 맞는 Ruby+Devkit 버전으로 설치해준다.

설치된거 실행하고 쭉 넘기면, 게이지 바 다 채워지면 이런 창이 뜬다.

-disposition=filename%3D%22Untitled.png%22&x-id=GetObject)

Enter누르면 기본값으로 알아서 설치가 진행된다. 혹시 이런 창이 뜨지 않았다면, cmd 열고 ridk install 을 통해 설치를 진행할 수 있다.

Jekyll 설치

1. ruby에 있는 라이브러리인 gem을 사용해서 jekyll을 설치한다.

   gem install jekyll bundler
   

2. 올바르게 설치 되었는지 확인하기

   jekyll - v;
   

3. Jekyll 생성

   이제 로컬에 레포가 저장된 경로로 가서 jekyll을 생성해보자.

   명령어 실행 전에, 해당 경로에 있던 index.html을 지워줘야 한다.

   jekyll new ./
   

   

   나는 폴더가 비워져있지 않다고 안됐는데, 아마 Readme때문에 그런듯 하여 —force 옵션을 붙여 실행시켰다.

   잘 된다 ^.^

4. bundle 설치

   bundle install
   

   잘된다 ‘^’

5. 로컬서버에 띄우기

   bundle exec jekyll serve
   

   

   로컬서버에 Jekyll가 띄워지고, http://127.0.0.1:4000/를 통해 확인할 수 있다.

   

6. 원격에 Push

   로컬에서 잘 뜨는걸 확인했으니 push해주자. push후 본인github.io 주소로 들어가면 위와 동일한 페이지를 확인할 수 있다.

   쟌-

3. 템플릿 적용

이제 Jekyll를 설치한 이유인 예쁜 템플릿을 찾아 적용해보자.

📌 테마 찾아볼 수 있는 사이트 모음

• jamstackthemes.dev
• jekyllthemes.org
• jekyllthemes.io
• jekyll-themes.com

정말 많아서 다 보진 못하고, 나의 조건에 맞는(다크모드 / 태그 / 목차옆에 보이기 / 카테고리 분류 잘 나눠져서 보이기 / 마크다운 깔끔,,) 템플릿을 보자마자 바로 결정했다.

이제 고른 테마를 적용해본다.

1. 테마 다운로드

   

   내가 찾던 사이트는 바로 다운로드 가능해서 여기서 받았는데, 테마 홈페이지(레포)가서 다운로드 하면 됨.

2. 압축 풀고 나의 로컬레포 안에 모두 붙여넣기

   아마 동일한 파일이 있다고 뜰수도 있는데, 그냥 덮어쓰기로 진행하면 된다.

3. 위와 동일한 방식으로 로컬에서 서버 확인하기.

   bundle exec jekyll serve
   

   http://127.0.0.1:4000/로 확인해보면 테마가 그대로 적용된 것을 확인할 수 있다.

   까망까망 편-안

4. 커스터마이징

   이제 나의 정보를 수정해보자. 생각보다 수정할거 자잘하게 많은데, 본인이 사용하는 템플릿 커스터마이징 관련 검색하면 많은 블로그에서 친절히 어떤걸 바꿔야 하는지 설명해준다. 나같은 경우엔 정말 흔히들 사용하던 템플릿이라, 쉽게 찾아서 수정할 수 있었다.

4. Github를 통한 배포

이제 commit한 변경사항을 원격 레포에 push해주면 자동으로 배포가 된다.

하지만 나는…왜….

---layout: home # Index page---

이런 텍스트만 적힌 페이지가 뜨냐며.. (저거 index.html 내용인데,,)

배포과정에서 문제가 생긴거라, 로컬작업에서는 확인할 수가 없어 하나씩 뜯어고쳐가며 push를 반복했다.

원래

💡 pages-deploy.yml.hook → pages.deploy.yml 로 변경해주기 !!

원인은 바로 github/workflows/안에 있던 pages-deploy.yml.hook ….

사실 처음에 에러 검색하면서 접했었던 블로그에서 pages-deploy.yml안의 push할 브랜치 설정값을 main으로 바꿔주라길래, 엥 난 저런 확장자 없고 .yml.hook만 있는데? 다른 템플릿 참고해서 그런가보다~ 하고 남일마냥 넘겼다.

근데 다음날 다시 검색 또 검색하면서 다른 글을 보다 알았는데, 뒤에 붙어있던 .hook확장자를 제거하고 push해줘야 한다는 것이다,,

.hook확장자를 가진 파일은 처음 봤다. 이게 뭘까.

💡 hook 파일이란 ?
소프트웨어에서 이벤트를 처리하기 위한 작업을 정의하는 스크립트 파일

hook과 yml의 차이점 ?

1. hook 파일
   • 일련의 명령어나 작업들의 집합으로 이루어진 스크립트 파일
   • 소프트웨어에서 이벤트를 처리하기 위한 작업을 정의하는 데 사용
2. yml 파일 - 데이터의 구조를 정의하는 데 사용되는 파일 형식 - 설정 파일 또는 데이터베이스와 같은 데이터 저장소에서 데이터를 저장하고 구성하는 데 사용

결국, pages-deploy는 Github에서 해당 웹 사이트를 배포할때 읽어들이는 배포 설정값들이 들어있는 파일이었기에, 데이터를 저장하고 구성하는데 쓰이는 yml확장자를 가져야 배포가 진행될 수 있었던 것이다.

다시 원격저장소에 push해준다.

좌측에 주황색 아이콘이면, 실행중인 것. 빨간색 뜨지마라…….

push를 하면, 레포지토리의 Actions에서 배포가 잘 이루어지고 있는지 확인할 수 있다.

템플릿 설정으로 인해 현재 이 블로그는 push만 해도 자동으로 배포까지 연결되고 있다.

Github 쓰면서 지금까찌 Actions가 뭘 보는 건지 몰랐는데, 잘 이뤄지는지 지켜보면서 너무 신기했다.

성공적으로 배포 완료 !!

드디어 깃 블로그를 팠다,, 이제 글 열심히 써야지

Outro

---

이거 보면서 전체적으로 따라갔고,

Ruby 설치 중 막혀 이 부분을 참고했다.

• post 작성 시 참고할 마크다운 문법