개요

TIL을 책처럼 쓰고싶어서 깃허브 레포지토리를 만들어서 작성했었다. 주변에서 Github로 블로그를 만들 수 있다는 얘기를 들어왔고 찾아봤을 때 꽤나 어려워보여서 미루고 미뤘었다.
그러다가 이번 기회에 한 번 해봤고 생각보다 쉬워서 글로 작성해보려한다.

어떻게?

깃허브에서는 Github Pages라는 정적 호스팅 서비스를 지원하고 있다. 그래서 내가 만든 페이지를 모두가 볼 수 있는 인터넷상에 공개할 수 있다.

따라서 직접 프론트 파일을 작성하고 디자인해서 나만의 블로그를 만들 수 있다. 근데 이러면 너무 어려울 것 같다. 대부분의 깃헙 블로그는 블로그 템플릿을 제공하는 서비스를 이용해서 만들어진다. 일단 무료템플릿으로 따라해보고 욕심이 생긴다면 유료 템플릿까지 도전해봐도 괜찮을 것 같다.

만약 템플릿을 정한 뒤 블로그를 만들었는데 템플릿이 마음에 안든다면 게시글 파일만 따로 백업해놨다가 바꿔도 된다.

깃허브 블로그의 장점은 이렇다.

  • 블로그에 글을 올리면 잔디밭이라고 하는 내 프로필 페이지의 초록색을 채울 수 있다.
  • 직접 커스텀하여 나만의 블로그를 만들 수 있다.
  • 커스텀하려면 html, css를 조금 손봐야하긴 하지만 공부가 된다.

단점으로는 검색엔진 최적화를 직접 해줘야한다는 점과
만약 커스텀을 하고싶을 때 템플릿에서 제공하는 기본 동작 외에는 직접 알아보고 적용해야하는 번거로움이 있다.

시작하기

1. 마음에 드는 템플릿을 찾는다.

테마는 지킬에서 찾아볼 수 있다.
지킬 테마1
지킬 테마2

위의 링크에서 마음에드는 템플릿을 찾는다. 데모도 확인할 수 있으니 보고 자신의 스타일인 템플릿을 고른다. 템플릿은 여러 종류가 있는데 크게 포트폴리오형, 블로그형으로 나뉜다.

많은 사람들이 사이드 바가 있는 템플릿을 선호하는 경향이 있다.
개인적으로 깔끔해 보이는 템플릿 몇 개를 추려보자면 이렇다.

lanyon
monos
dotX

2. 레포지토리 만들기

자신의 깃허브 계정명.github.io로 설정해준다. 이는 나중에 호스팅될 때 내 블로그 주소가 된다.

3. 레포지토리 클론하기

이렇게 만들어진 레포지토리를 내 로컬에 클론한다.

4. 환경 셋팅하기

자신이 사용할 테마의 공식 문서를 보면 설치 방법에 대해 나와있다.
내가 사용하는 테마는 이렇게 나와있다. Yat installation

여기서 로컬에 명령어를 입력하라고 하는데 명령어를 입력하기 위해선 루비가 설치되어있어야한다.
지킬이 루비에서 동작하기 때문인데 현재 로컬에 루비가 설치되어있는지 확인하려면 ruby -v 명령어를 통해 확인해보면 된다.

최신버전이라면 상관없는데 테마에서 요구하는 루비 버전이 있다. 버전이 안맞는다면 업데이트해주어야한다. 나는 맥을 사용하기 때문에 맥 환경에서 했던 작업을 정리해보면

ruby -v
brew update
brew install rbenv
rbenv install -l
rbenv install 버전
rbenv versions
rbenv global 버전

ruby -v

이렇게 설정했는데도 버전이 그대로라면 환경 변수의 문제가 있는 것이다.

which ruby

위의 which 명령어를 통해 어디에 설치되어있는 ruby를 사용하고 있는지 확인할 수 있는데 경로가 다르다면 /.rbenv 이하에 최신 버전이 설치되어서 버전이 그대로인 것이다.

rbenv init

이 명령어를 입력하면 eval "$(rbenv init - zsh)" 와 같이 출력된다.

이걸 nano ~/.zshrc 명렁어를 통해 파일을 열고 위의 값을 넣어줬다.
확인해보니 제대로 동작했다.

그 다음은 공식 문서에서 알려준대로 했다.
설정 파일에 설정을 추가하고 bundle명령어를 통해 템플릿 관련 의존성을 설치하는 절차로 이해했다.
그리고 애드 커밋 푸쉬로 깃허브 레포지토리에 업로드한다.

5. Github Pages로 배포하기

레포지토리 위쪽의 탭에서 Settings를 클릭한다.

스크린샷 2024-06-15 시간: 21 48 08

Settings에서 pages 탭을 클릭하고 2번째 Branch설정을 배포할 자신의 브랜치를 설정하고 save버튼을 누르고 냉수 한잔 마시고 오면 누구나 접속할 수 있는 주소가 나온다. 스크린샷 2024-06-15 시간: 21 53 18

스크린샷 2024-06-15 시간: 21 48 29

접속을 해보면 페이지가 나타난다.
내가 사용하는 테마의 공식 문서에서는 배포될 때 깃허브 액션을 사용하는 것을 권장하고 있다.
테마에서 서드파티 플러그인을 사용하는 경우 보안상의 이유로 바로 사용할 수 없기 때문이라고 한다.

글 작성

여기까지 됐으면 이제 글을 작성해보자.
레포지토리를 로컬에 클론한다. 개인적으론 깃을 다룰 때 깃 크라켄 프로그램이 편해서 추천!

스크린샷 2024-06-15 시간: 22 12 35

이런식으로 디렉토리 구조가 보이는데 _posts 디렉토리에서 게시글을 작성하면 된다.
게시글은 마크다운 형식으로 작성하면 되고 2019-01-12-게시글-제목.md의 형식으로 작성해야한다. 앞의 날짜는 작성한 날짜를 의미한다.
템플릿에서 샘플로 제공하는 게시글 파일이 있을 테니 보고 따라하면 어렵지 않았다. 게시글 형식 파일 하나를 남겨놓고 복사 붙여넣기로 사용하고 있다.

---
layout: post
title:  "Is Intelligence Enough"
author: 글 작성자
categories: [ 카테고리1, 카테고리2 ] # 카테고리는 왼쪽에서부터 오른쪽으로 url상 /로 구분되어 차례로 나타난다. 블로그 주소/카테고리1/카테고리2/파일이름
image: # 게시글에 상단에 이미지가 있다면 여기에 적기(게시글 목록에 이미지와 글 제목으로 노출된다.)
tags: [tag1, tag2] # 해시태그를 사용할 수 있고 카테고리별 정렬과 태그 정렬이 가능하다. 그러나 모든 테마에서 적용되는 건지 확실하지 않다.
# 자세한 건 사용할 테마의 공식문서를 보는 것을 추천. 그리고 문제가 생길 경우 사용하는 테마의 레포지토리 이슈 탭을 확인해보자. 여기서 찾아서 해결한 문제들도 많다.
---

이 밑에 마크다운 형식으로 글을 작성하면 포스팅 완료!

주의할 점은 마크다운은 #기호로 제목을 나타내는데 #한 개에 해당하는 제목은 위의 title에 적은 내용이다.
따라서 마크다운으로 게시글을 작성할 때는 #두 개로 시작하면 된다. #한 개로 시작하고 타이틀에도 같은 내용을 적으면 게시글 제목이 두 번 나온다.

발견한 문제

밤 12시가 넘자마자 바뀐 날짜로 게시글을 작성해서 푸시하면 업로드가 되지 않는 것을 발견했다. 종종 발생했지만 몰아서 업로드하면 되겠지 생각하며 그냥 넘어갔었는데 궁금해서 찾아보니 여러 글들이 나온다.
근본적인 문제는 지킬 디폴트 타임존인 UTC와의 우리 나라 시간대인 KST와의 시차 때문이었다. UTC는 우리나라보다 9시간 느리고 우리나라 기준으론 다음 날짜가 되었는데 아직 UTC 시간으로는 어제여서 게시글이 업로드되지 않는 것이다.

공식문서
지킬 설치 가이드
지킬 컨피그 옵션

해결 방법으로는 게시글을 작성할 때 상단 게시글의 메타정보를 입력하는 곳에 date: 현재 시간을 포함한 시간 정보를 명시하거나 published: true를 적는 것이지만 너무 귀찮지 않나 싶어서 찾아본 결과 지킬의 환경 변수에 timezone속성이 있어서 여기서 설정할 수 있다고한다.

다음과 같이 _config.yml에 timezone을 명시해준다.

timezone: Asia/Seoul

이제 바로바로 올라간다.

커스텀하기

기본적인 커스텀은 config.yml파일에서 하면 된다. 잘 만들어진 템플릿이라면 직접 사용자가 css를 건들거나 할 필요없이 config.yml에서 옵션을 키고 꺼서 간단히 커스텀할 수 있다.
그 외에 커스텀하고 싶은 부분이 있다면 가장 먼저 찾아봐야하는 것은 공식 문서다. 블로그의 하단 링크나 아니면 직접 검색해서 테마 공식 문서를 보면 나와있는 경우도 있고 없다면 이슈 탭에서 원하는 내용을 검색해서 적용하면 된다. 만약 커스텀 옵션으로 껐다 켰다하는 식으로 구현되어있는 것이 아니고 수정의 범위가 넓다면 다른 템플릿을 찾아보는 것이 좋다.

  • 지킬 테마는 대부분 영어를 기준으로 개발되어서 게시글을 썼을 때 단어가 이상하게 줄바꿈되는 경우가 생긴다. 예를 들면 
    안녕하세요 저
는 ***입니다.

    이렇게 “저는”이 한줄에 표현되지 않고 줄이 바뀐다.
    이건 css의 word-break 속성을 손보면 된다. 주로 게시글에서 이런 문제가 생기기 때문에 게시글 컴포넌트를 찾고 해당하는 css를 찾아서 word-break: keep-all을 추가해주면 된다. 이렇게 수정해주면 아래와 같이 바뀐다.

    안녕하세요 저는
***입니다.

댓글 기능 추가하기

블로그를 하면서 도움이 되었다는 댓글을 보는 것 만큼 뿌듯한 게 없다. 블로그 자체에서 댓글 기능을 제공하는 템플릿도 있고 그게 아닌 템플릿도 있다. 이럴 경우 직접 댓글 기능을 추가해야한다.

서드파티 댓글 라이브러리에는 크게 3가지가 있다.

  • Disqus
  • Gitment
  • utterances
  • giscus

우선 Disqus는 기본 댓글 기능을 제공하는 대부분의 템플릿에서 사용하는 라이브러리로 우리가 사용하는 소셜 계정으로 Disqus에 간단하게 가입해서 댓글을 남길 수 있는 구조다.
사용자 입장에서는 가장 편리한 사용 방법이 아닐까 생각한다.

그러나… Disqus의 단점으로 언급되는 것이 있는데 바로 자체적으로 달리는 광고다.
댓글 창 위에 광고가 크게 달린다. 광고를 없애기 위해선 유료 플랜을 결제해야한다.
plus 플랜은 한 달에 12달러다.(24.6.20 기준)
CSS를 손보는 방법도 있는 것 같은데 다른 선택지도 한 번 알아보자.

Gitment는 댓글을 남기려는 사용자는 깃허브 계정으로 로그인하고 댓글을 단다. 일단 자료도 많이 없고 사용하려면 깃허브 셋팅에서 OAuth 앱을 만들고 키를 발급받아서 사용해야하는데 이 것을 깃허브에 올라가는 블로그 설정 파일에 적어야한다.(AWS에서 키가 노출되면 노티가 오는 것처럼 이렇게 했더니 깃허브에서 노티가 왔다.) CI Workflow를 손보면 CI과정에서 동적으로 환경변수로 넣어줄 수도 있겠는데 다른 선택지를 알아보자.

Utterances는 Gitment와 마찬가지로 깃허브 앱으로 댓글을 달려면 깃허브 계정으로 로그인해야한다. 댓글이 달리면 레포지토리의 이슈에 댓글 정보가 기록된다.
개인적으론 사용이 쉬운 Utterances가 좋은 것 같다. 개발 블로그인 만큼 블로그를 보는 대부분의 유저는 깃허브에 회원가입이 되어있을거고 왠지 전문적인 느낌이 나는 것 같아서…ㅎㅎ

그럼 Utterances를 사용해보자!

우선 댓글을 저장할 레포지토리를 만들어준다. 보통 별도의 레포지토리를 생성해서 관리하는 것 같다. 나는 blog-comments라는 이름으로 레포지토리를 만들어줬다.

그런 다음 utterances 사이트에 들어가서 설명을 읽고 따라한다.
configuration 부터 시작해서 정보를 입력하면 제일 하단에 내가 입력한 정보로 설정 코드를 자동으로 만들어준다.
Blog Post ↔️ Issue Mapping 부분은 달리는 댓글을 어떤 식으로 관리할 것인지를 설정하는 부분이다.

  • Issue title contains page pathname: til/memo/2023/12/17/Web-03와 같이 게시글의 경로 이름으로 매핑
  • Issue title contains page URL: 게시글의 url로 매핑
  • Issue title contains page title: 제목으로 매핑
  • Issue title contains page og:title: 오픈 그래프 태그의 제목으로 매핑
  • Specific issue number: 이슈 번호로 매핑
  • Issue title contains specific term: 특정 키워드로 매핑

1번과 2번의 큰 차이를 못느끼겠는데 디폴트로 1번이 선택되어있어서 1번으로 선택했다.

그 다음으로 나오는 Issue Label은 깃허브를 사용해보신 분들이라면 아시겠지만 이슈에 라벨을 붙일 수 있다. 예를 들어 bug라던가 documentation이라던가… 어떤 라벨을 붙일지 선택하는 부분이다.
설정하지 않아도 괜찮고 설정하지 않으면 자동으로 utterances comment라벨이 붙는다.
아래 나오는 안내사항으로는 우선 사용할 라벨이 레포지토리에 정의되어있어야하고 라벨로 이모지를 사용할 수 있다고한다.

마지막으로 테마를 정할 수 있다. 여러가지가 있지만 일단 디폴트 테마로 적용했다.

여기까지 하면…

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="[ENTER TERM HERE]"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

코드가 생성된다.
복사해서 우리의 블로그 파일에 붙여넣으면 된다.

꼼꼼히 잘 만들어진 템플릿을 사용해야하는 이유가 여기에있다. 사실 댓글 기능이 필요하다면 기본으로 제공하는 템플릿을 사용하는 것이 가장 좋다.

지금 사용하고 있는 테마는 댓글 관련 코드들이 이미 작성되어있고 사용할 댓글 라이브러리를 주석 해제하고 사용하면 돼서 편하다.
지킬 테마는 html파일을 나누어서 include하는 방식으로 동작하는데 기본적으로 구현이 안되어있는 템플릿에 이걸 넣으려고 하면 벌써부터 머리아프다.

이 것 외에도 수학 수식을 사용하는데 어떻게 해야하는지 공식 가이드도 살짝 부족하고 직접 검색해봐서 적용해야한다면 차라리 공식 문서에 잘 설명된 템플릿으로 갈아타는 것도 좋은 방법이다.

얼마 전 giscus라는 서비스를 발견했다. Utterances와 비슷하지만 대댓글, 이모티콘, 정렬등의 기능이 있어서 갈아타볼까 생각중이다.

심화

우리가 사용하는 블로그 서비스인 티스토리나 벨로그같은 경우는 방문자 통계를 보여준다. 그리고 포털 사이트에서 검색해보면 내가 작성한 글을 찾아볼 수 있다.
깃허브 블로그에서는 이런 부분을 직접 해줘야한다.

이번에는 방문자 통계와 키워드를 검색했을 때 구글에서 이를 크롤링해서 검색 결과에 노출될 수 있도록 하는 SEO설정을 해본다.
우선 쉬운 방문자 통계 기능부터 해보자.

방문자 통계 기능은 구글 애널리스틱을 통해 할 수 있다.

구글 애널리틱스 바로가기
위의 링크에 들어가서 왼쪽 사이드바의 하단에 톱니바퀴 아이콘을 클릭해서 설정 페이지로 들어간다.

그리고 만들기 버튼을 클릭해서 계정을 만든다. 그러면 영어와 숫자가 섞인 일련 번호가 발급되는데 이걸 블로그 설정 파일에 붙여넣는다. 테마에 따라 직접 해줘야하는 경우와 이미 구현이 되어있고 주석처리되어있어서 config파일에 설정해주면 적용되는 경우가 있다. 내가 사용하고있는 템플릿은 이런 설정이 되어있어서 그냥 값만 넣어줘도 설정이 완료됐다.

다음은 SEO로 구글 서치 콘솔 사이트에 들어가서 도메인을 등록해준다.
나는 오른쪽의 옵션을 선택했다.
선택하면 도메인을 인증해야하는데 권장하는 html방식으로 했고 다운받은 파일을 블로그 프로젝트의 가장 루트경로에 붙여넣으면 인증이 완료된다.
(공식 사이트에 나와있듯이 인증된 다음에라도 이걸 삭제하면 연결이 끊긴다.)

다음으로 sitemap.xml을 등록해야한다.
사이트맵이란 말 그대로 웹사이트의 페이지, 파일의 관계를 제공하는 문서이다.

지킬에는 sitemap을 자동으로 생성해주는 플러그인인 jekyll-sitemap이 있다. 그래서 직접 파일을 생성해주지 않아도 자동으로 생성된다.
이걸 구글 서치 콘솔의 왼쪽 사이드바 메뉴인 sitemaps를 클릭해서 등록해준다. sitemap.xml으로 적으면 된다.

나는 여기서 에러가 났다.
sitemap에 적힌 경로들이 잘못되었다는 것인데 이러면 __config.yml에 url 항목을 수정해줘야한다(baseurl이 아닌 url을 수정).
url이 비어있는 경우 파일들을 제대로 읽지 못하니 자신의 깃허브 블로그 주소로 설정하면 끝이다.

이렇게 설정하고 실제 검색 사이트에 노출되기까지는 조금 시간이 걸린다.
똑같은 방법으로 네이버, 다음 등에도 등록해서 노출시킬 수도 있다.