GitBlog - 포스트 추가

포스트를 작성해보자

블로그를 생성했으니 이번엔 포스트를 작성해보도록 해보자.

개발환경 세팅

우선 블로그를 수정 및 개발하기 위한 환경을 세팅해야한다.
이건 운영체제에 따라 방법이 다른데, Windows는 Dev Containers를 사용한 방법을 추천하고, Unix 기반 OS는 Natively를 세팅하라고 나와있다.
나는 Windows를 사용하므로, Dev Containers를 사용한 방법을 설명하겠다.

Dev Containers를 이용한 방법

1. Docker Desktop을 설치
   Docker Desktop 설치 링크

2. VS Code와 Dev Containers extension 설치
   VS Code를 먼저 설치 완료한 다음 VS Code에 Dev Constainer extension를 설치해야한다.

   • VS Code 설치 링크

   • Dev Containers extension 설치 링크
     Continue

   팝업창의 Continue를 눌러서 VS Code 창으로 이동하면 정상이다. 나는 설치되서 사용 안 함이라 뜨지만 설치가 나오는게 정상 여기서 설치하면 된다.

3. 블로그 리포지토토리를 VS Code에 Clone
   VS Code에 내 블로그 리포지토토리를 클론할 건데, 클론하기 위해선 컨테이너 볼륨에 접근해야 한다. 아까 설치한 Decker Desktop 을 실행하자.
   처음 실행하면 로그인하고 설문조사 같은 걸 했던것 같다. 어려운 걸 시키진 않으니 걱정마라.
   완료 되었으면 VS Code로 돌아가자. VS Code에서 F1을 누르면 상단 검색 창이 활성화 된다.
   캡처하려고 클릭하면 검색 창이 없어진다…
   검색 창에 Dev Containers: Clone Repository in Container Volume… 명령어를 입력해보자. 그러면 컨테이너 볼륨의 github에서 리포지토리 복제 가 보일텐데, 이걸 누르면 깃허브 연결을 위한 창이 나온다.
   로그인 해주면 된다. 연결을 마치고 VS Code로 돌아오면 내 GitHub 계정이 가진 모든 리포지트리를 볼 수 있다. 블로그를 만들 때 사용했던 username.github.io를 선택하면 된다. 잠시 로딩을 기다리면 이렇게 클론이 완료된다. 클론 완료된 상태

블로그 수정 및 추가

클론이 완료되었으니 이제 컨테이너 볼륨에 접근한 상태다. 이제 VS Code를 통해 작업을 수행하면 된다.

1. Jekyll 서버 실행

   VS Code에서 ctrl + ‘ 키를 입력하면 터미널이 나온다. 터미널에 bundle exec jekyll s 명령어를 입력해보자.
   잠시 기다리면 이런 창이 나올 것이다.
   브라우저에서 열기 클릭 브라우저에서 열기를 누르면 자신의 블로그를 볼 수 있다. 주소창을 한 번 봐보자.
   주소창을 봐봐 주소창을 보면 127.0.0.1:4000 이라고 적혀있는 걸 볼 수 있을 것이다. bundle exec jekyll s 명령어는 jekyll 블로그를 로컬 개발 서버에서 실행하라는 명령어로, 이 명령어를 실행하면 로컬 서버가 실행된다.
   기본적으로 jekyll은 포트 4000번에서 웹사이트를 확인할 수 있다. 물론 다른 포트를 사용하고자 한다면 bundle exec jekyll s -P 5000 (포트 5000번에서 로컬 서버 실행) 이런 식으로 포트를 변경할 수 있다.
   참고로 운영 체제에 의해 보호되거나 다른 애플리케이션에서 사용하는 포트는 사용할 수 없으니 주의하자. ex) 0 ~ 1023번은 특정 프로토콜이나 서비스에 의해 예약된 포트라 사용이 불가능하다.
   이제 주소창에 127.0.0.1:4000을 입력하면 로컬 공간의 작업물을 확인 가능하다. VS Code에서 저장한 다음 로컬 공간에서 변화를 확인 할 수 있다.

2. 코드 수정 및 콘텐츠 작성

   새 포스트를 쓰기 전 _config.yml 파일을 수정하자.
   lang, timezone, title, description을 수정했다.
   
   이제 포스팅하는 방법을 알아보자.
   우선 포스팅을 하려면 _post에 YYYY-MM-DD-TITLE.확장자 형식으로 파일을 만들면 된다.
   여기서 확장자는 md나 markdown 만 사용해야한다.
   나는 2024-12-09-first.md 파일을 생성하고 작업해보겠다.
   생성한 파일 맨 상단에 Front Matter를 작성해야한다. Front Matter는 Jekyll과 같은 정적 사이트 생성기에서 사용되는 YAML 형식의 메타데이터라고 한다. 이걸로 문서의 속성을 정의하고 설정을 적용할 수 있다.

   ---
   title: 첫 포스트
   date : 2024-12-09 09:12:50 +0800
   author: <ByteFries> 
   description : "깃허브 블로그 공부"
   categories : [GitBlog]
   tags: [GitBlog]
   comments : true
   ---
   

   나는 이렇게 작성했다. 원래 layout도 명시적으로 추가해야하는데, 이 테마는 디폴트 레이아웃이 있어 생략 가능하다.
   코드 중 author는 추가 작업이 필요하다.
   _data/authors.yml 파일을 찾아보자. 없으면 만들면 된다. 해당 파일에

   <author_id>:
     name: <full name>
     twitter: <twitter_of_author>
     url: <homepage_of_author>
   

   이 형식에 맞게 작성하면 된다.

   Front Matter 아래에 아무 텍스트나 적어보면 텍스트가 적히는 걸 확인 할 수 있다. 수정이 안된다면 저장했는지 확인해보자 (ctrl + s)

3. 변경 사항 저장 및 푸시

   텍스트까지 적어봤으니 이제 작업 내용을 GitHub 리포지토리에 Push 해야한다. Push 하지 않으면 지금까지 한 작업이 다 의미가 없으므로 정말 중요하다.

   1. 로컬 서버 종료

      터미널을 클릭하고, ctrl + c 를 눌러 현재 실행중인 로컬 서버를 중단 시키자.

   2. git status

      git status 명령어를 입력하자. 이 명령어는 현재 작업 디렉토리의 상태를 보여주며, 파일이 수정되었는지, 추가 되었는지, Commit되지 않은 변경사항이 있는지를 확인 가능하다.
      제대로 저장이 되어있다면 변경사항이 하나라도 있을 것이다.

   3. git add .

      git add <파일> 명령어는 해당 파일의 변경 사항을 스테이지 영역에 추가한다. 여기서 ' .' 를 사용하면 모든 변경 사항을 스테이지 영역에 추가한다.

   4. git commit -m “설명”

      git commit 명령어로 스테이지된 변경 사항들을 Git의 history에 기록한다. -m “” 이건 커밋할 때 남길 메시지다. 코드 변경 사항을 버전으로 저장하여, 변경 전 상태로 되돌릴 수 있게 한다.

   5. git push origin main

      git push로 commit로 저장한 변경 사항을 원격 리포지토리에 반영한다. 여기서 origin은 원력 리포지토리의 이름이고, main은 브랜치의 이름이다.

git push origin 까지 성공했다면, GitHub에 들어가 블로그 리포지토리를 확인해보자. 그러면 수정된 모습을 확인 할 수 있을 것이다. (몇 분 걸릴 수 있으므로 기다려보자.)