이제 웹페이지를 만들었으니 블로그의 기본 몸체를 만들고 옷을 입혀줄 차례입니다.

저는 편리를 위해 이미 만들어진 html 템플릿을 사용했고 HTML5 UP 의 반응형 페이지가 마음에 들어 이곳에서 골랐습니다.
( 가장 편한 방법은 GitHub Pages에서 지원하는 Jekyll themes를 사용하는 것이 더 편합니다. )

저는 많은 템플릿 중에 Editorial 라는 템플릿이 제일 마음에 들고 블로그에 잘 어울릴 것 같아서 선택했습니다.

GitHub에 Editorial을 Jekyll themes 방식으로 변환한 파일이 있어서 이 파일을 이용했습니다. [링크]
( HTML5 UP에 있는 다른 템플릿도 Jekyll (템플릿 이름) 과 같은 식으로 구글링하면 나오는 것 같습니다. )

GitHub에서 다운받은 editorial-jekyll-theme 파일을 내 리포지터리에 올리기 위해 GitHub Desktop을 다운로드하고 실행해줍니다.

GitHub Desktop을 설치하고 실행해서 깃허브 로그인까지 끝마친뒤,
File > Clone repository… 를 선택하거나 Clone a repository from the internet… 을 선택해줍니다.

그 다음 GitHub 닉네임/GitHub 닉네임.github.io 리포지터리를 선택해주고 Choose… 을 눌러 경로를 지정해준뒤 Clone을 눌러 로컬 저장소로 복제합니다.
그리고 복제한 로컬 폴더에 아까 다운받았던 editorial-jekyll-theme 폴더 안에있는 파일들을 넣어줍니다.

그러면 왼쪽에 ** changed files 라고 변경사항이 뜹니다. 그 다음에 Summary (required) 에다가 커밋의 요약을 적어주고 메인에 커밋을 해줍니다.

그리고 Push origin 버튼을 눌러주면 GitHub 닉네임.github.io 리포지터리에 Editorial 템플릿이 업로드 된것입니다.
그 다음 https://GitHub 닉네임.github.io/에 접속해주시면!

짜잔~! 웹사이트가 다 깨져서 출력되는 것을 볼 수 있습니다.

당황하지않고 Ctrl + Shift + i 로 개발자 도구를 켜서 원인을 파악해줍니다.
오른쪽 밑에 콘솔을 보니 css파일들과 js파일들을 못불러와서 이런 에러가 발생한것같네요.

이 에러는 _config.yml 파일에 있는 내용 중 Site settings에서

# Site settings
title: Editorial
subtitle: by HTML5 UP
email: youremailaddress@gmail.com
description: A FREE AND FULLY RESPONSIVE SITE TEMPLATE
baseurl: "/editorial-jekyll-theme" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site
author:
street_address: 1234 Somewhere Road
city: Nashville
state: TN
zip_code: 55555
country: United States of America
phone: (716) 555-5555

baseurl 와 url 를

baseurl: "" # the subpath of your site, e.g. /blog
url: "https://ysnam1023.github.io" # the base hostname & protocol for your site

다음과 같이 baseurl은 비워주고 url은 https://GitHub 닉네임.github.io 로 수정한 후 푸쉬해주면

깔끔하게 웹사이트에 Editorial 템플릿이 적용된것을 볼 수 있습니다.