[Git]초보자도 할 수 있는 Github 블로그 만들기(2)

지난 포스팅에 이어서 오늘은 생성한 블로그를 직접 브라우저에 실행시켜보고, 테마를 적용해서 디자인을 변경해 보도록 하겠습니다.

1. 블로그 실행하기

지난 시간에 만들었던 블로그 UserName.github.io 폴더를 열어보시면 README.md 파일 하나만 있는데, 블로그를 실행하기 위해 임시로 파일 하나를 생성하도록 하겠습니다.

파일을 생성하기 위해 CMD 창을 열고 지난 시간에 만든 블로그 Repository로 이동해서 index.html을 생성합니다. 지난 포스팅에서와 마찬가지로 UserName에는 본인의 유저명을 사용하시면 됩니다. 저는 MoyaBlog가 되겠죠??

cd Desktop/gitBlog/UserName.github.io       //Repository 경로로 이동
echo "Hello World!!" > index.html           //index.html 파일 생성

정상적으로 위의 코드가 실행되었다면 아래 이미지와 같이 Repository 에 index.html 파일이 추가된 것을 볼 수 있습니다.

이제 파일을 만들었으니 Git 저장소에 다시 반영을 해줘야 합니다. 아래 명령어를 차례대로 입력해서 실행합니다.

git add --all
git commit -m "frist commit"
git push -u origin main

Git을 처음 접하시는 분들은 생소하실 수 있지만 commit 과 push는 가장 많이 사용하는 기본적인 작업이므로 꼭 알고 계셔야 합니다.

간략하게 설명드리자면 commit은 변경 사항을 반영하고 push는 반영된 내용을 원격 저장소에 업로드하는 것입니다. commit을 하게 되면 이력을 남기고 내 로컬에는 저장되지만 타인과 공유할 수 없고 push를 통해 저장소에 업로드를 해야 합니다. 따라서 블로그를 수정해도 commit만 하고 push를 하지 않으면 다른 사람에게는 보이지 않기 때문에 push까지 완료해 주셔야 합니다.

push를 완료했다면 Git 저장소에 index.html 파일이 업로드된 것을 확인할 수 있습니다.

이제 브라우저 주소 검색창에 UserName.github.io 를 입력해 보면 “Hello World!!”라고 되어있는 화면이 나타납니다. 굉장히 허접해 보이지만 여러분은 지금 개인 블로그 설정에 성공하셨습니다.
그래도 여기까지 따라온 스스로에게 박수를 치며 다음 단계인 테마 적용으로 넘어가도록 하겠습니다.

2. 테마 적용하기

이제 허접한 화면을 탈바꿈 시키기 위해 테마를 적용해 보겠습니다. Git 블로그는 jekyll에서 제공하는 테마를 사용합니다.

jekyll은 Ruby 언어로 구성된 텍스트 변환 엔진으로 미리 정의한 규칙에 따라 웹사이트를 만들어 주고, Github의 내부 엔진이기 때문에 Github page에서도 자유롭게 동작합니다.

우선 사용하고 싶은 테마를 선택해야 하는데, 아래 사이트에서 원하는 테마를 선택합니다.

• jekyllthemes.org

• jekyll-themes.com

• jekyllthemes.io

• themes.jekyllrc.org

저는 개발자들이 많이 사용한다는 minimal-mistakes 테마를 사용해서 진행하도록 하겠습니다.
링크를 통해 minimal-mistakes Git 저장소에서 아래 이미지와 같이 code 버튼을 눌러 나오는 창의 Download ZIP을 통해 파일을 다운로드 받습니다.

다운로드 받은 파일을 로컬의 Git 저장소 Repository에 압축을 해제합니다. 충돌이 나는 항목은 모두 덮어쓰기 해서 진행해 주세요. 그리고 다시 Git 저장소에 업로드하기 위해 commit 하고 push를 진행합니다.

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

CMD 창에서 위의 코드를 차례로 진행하면 아래 이미지와 같이 저장소에 반영된 모습을 볼 수 있습니다.

마지막으로 브라우저 주소 검색창에 블로그 주소(UserName.github.io)를 입력하면 테마 적용 완료됩니다.

깃 저장소에 push 하는 것과 반대로 git 저장소에서 내용을 내려받는 pull을 할 수 있는데 아래와 같이 실행하면 되는데 push와 마찬가지로 git폴더 경로에서 실행을 해야 합니다.

git remote -v   //연결된 저장소 확인
git pull        //저장소 확인 후 pull

위 작업을 완료했다면 PC의 git 폴더가 업데이트가 된 것을 확인할 수 있습니다.

여기까지 따라하신다고 고생많으셨습니다.
다음에는 Git으로 블로그 만들기 마지막편인 로컬 환경설정 편으로 돌아오도록 하겠습니다.

감사합니다.