점점 강해지고 있습니다.
[Blog] Github Page 테마 수정
Prologue
github blog의 테마를 Wall-E로 바꾸며 기록한 일지입니다.
기존 블로그 테마가 갑자기 장난스럽게 느껴져 새로 테마를 고르던 중 Wall-E 테마를 알게 됐고, 디자인에 혹해서 수정하게 되었습니다. 기존 테마인 chirpy 보다 사용법이 직관적이여서 끌렸던 점도 있습니다.
#1 기본 작업
테마를 바꾸기 위해 Wall-E 테마의 Readme.txt를 참고하였습니다.
- 이미 블로그가 있던 저는 Wall-E 테마를 fork해오기보다는 Wall-E 테마를 clone하여 PC에서 작업했습니다.
- jekyll 테마를 다운받았기 때문에, 이에 맞는 프로그래밍 언
- 어인 Ruby를 홈페이지에서 설치했습니다.
- ruby가 깔렸다면 jekyll를 설치해야 합니다.
gem install jekyll를 cmd창에 입력합니다. - 설치가 되었다면, 다운받은 Wall-E 테마 루트 폴더에서 cmd창을 실행하고,
jekyll serve를 입력해 서버를 켜봅니다. 기본적으로 설정되어 있는 링크는 localhost:4000이지만 컴퓨터 가용 포트에 따라 달라질 수 있습니다. - 감격스러운 장면을 볼 수 있습니다.
이를 (사용자이름).github.io 레포지토리에다가 커밋하여 git 저장소에 올라가도록 합니다.
다음 settings - Pages 탭으로 들어가 Build and deployment에서 Github Actions를 누르고 저장합니다. 이제 배포가 되었을 것입니다. 이전에는 직접 gh-pages 브랜치를 만들어서 했던 걸로 기억하는데, 많이 편해졌습니다.
#2 테마 수정하기
먼저 사진과 제목(title)등을 바꿔 줄 차례입니다.
사진은 assets/img 내의 logo.png와 profile.jpg을 수정하는 것으로 쉽게 변경할 수 있습니다.
title은 _includes내의 head.html파일에서 <title></title> 사이의 부분을 변경하면 손쉽게 바꿀 수 있습니다. 이외의 간단한 것들은 _includes나 _layouts 폴더를 조금만 뒤적거리면 바꿀 수 있도록 편리하게 세팅되어 있습니다.
다음으로 테마를 입맛대로 수정해볼 차례입니다.
먼저 Home 탭에서 OLDER POSTS란을 통해 작성한 모든 글이 나타나면서 스크롤이 엄청 길어지는 문제가 있었습니다.
이를 해결하고자 폴더 구조를 확인한 결과 _layouts/front.html에서 endif 문을 통해 전체 포스트를 계속 불러오고 있는 것을 확인하고, 해당 부분을 지워주었습니다.
(해당 부분 삭제)
그 결과, 메인페이지에 나타나는 10개의 박스만 나타나도록 변경되었습니다!
#3 SEO를 위한 sitemap.xml/robots.txt 추가하기
Google과 NAVER의 SEO(검색엔진 최적화)를 위해서 루트 폴더에 sitemap.xml / feed.xml / robots.txt 파일이 필요합니다. 이 중 feed.xml 파일은 이미 있으니 sitemap.xml과 robots.txt만 루트 폴더에 추가합니다.
- sitemap.xml : 웹사이트 내 목록을 나열한 파일로 목차와 같은 역할을 함
-
robots.txt : 웹사이트에 대한 검색엔진 로봇들의 접근을 조절해주고 제어해주는 역할, 그리고 로봇들에게 웹사이트의 사이트맵이 어디 있는지 알려주는 역할
- feed.xml : 웹 사이트의 최신 콘텐츠를 피드 형식으로 받을 수 있는 역할
sitemap.xml파일의 추가하기 위해서는 루트 폴더에서 새로운 파일을 xml확장자로 만들고 아래 내용을 삽입합니다.
robots.txt 파일을 추가하기 위해서는 루트 폴더에서 새로운 파일을 txt확장자로 만들고 아래 내용을 삽입합니다.
준비가 끝났다면 Google Search Console에 입장!
이전에 이미 등록 해놓은 상태라 처음 설정하는 법은 다른 블로그 등에 자세히 소개되어 있습니다~
여기서 sitemaps 탭 선택 하고 새 사이트맵 추가란에 sitemap.xml 입력하면 결과가 뜨게 됩니다.
또한 설정에 들어가서 robots.txt를 등록해줍니다.
다음은 Naver Search Advisor에 들어갑니다. 로그인 후 웹마스터 도구를 클릭, 사이트를 입력해줍니다.
HTML 파일 업로드 방식을 사용해 파일을 다운받고, 루트 폴더에 저장 후 커밋해줍니다.
소유확인을 누른 뒤, 등록한 사이트를 눌러 상세 정보를 들어갑니다.
요청 탭에서 RSS 제출을 눌러 feed.xml을 입력하고, 사이트맵 제출을 눌러 sitemap.xml을 입력하면 됩니다. 마지막으로 검증 탭에서 robots.txt를 누른 후, 저장했었던 robots.txt 파일 내용을 복붙하면 됩니다.
중간에 feed.xml 부분에서 등록한 사이트의 주소와 RSS 본문의 link 주소가 다릅니다. 라는 경고가 뜨며 실행되지 않았었는데, feed.xml을 들어가보니 <link></link> 부분이 비어있었고, _config.yml파일 내에 url: https://piacu.github.io를 추가해주면서 해결했습니다.
이로써 SEO도 끝났습니다.
참고 자료
https://www.twinword.co.kr/blog/basic-technical-seo/
Thank You For Reading
SeungJun Jeon