Post

[Gitblog] Jekyll 기반 Chirpy 테마 Gitblog 수정 - _config.yml 수정

Posted Updated
By 이효준
11 min read
[Gitblog] Jekyll 기반 Chirpy 테마 Gitblog 수정 - _config.yml 수정

_config.yml 수정

_config.yml에서는 개인 홈페이지의 환경 설정값을 수정할 수 있습니다.

앞선 포스트에서는 _config.yml에서 url만 수정하여 배포가 가능하도록 했습니다. _config.yml에서는 url뿐만 아니라 블로그의 다양한 환경 설정값을 수정할 수 있습니다. 설정값을 순서대로 하나씩 살펴보도록 하겠습니다.

버전마다 _config.yml의 구성이 다를 수 있습니다. 저는 7.3.0 버전에서 수정했습니다.

아래의 내용들은 jekyll-seo-tag, jekyll-theme-chirpy _config.yml 주석과 CDN 개요의 내용을 기반으로 작성했습니다.

  • theme
    지금 적용하고 있는 테마 이름입니다. 우리는 jekyll-theme-chirpy을 사용하고 있기 때문에 수정할 필요가 없습니다.
  • lang
    어떤 언어를 타겟으로 작성할지 정할 수 있습니다. 저는 ko로 설정하겠습니다.
  • timezone
    시간설정입니다. Asia/Seoul로 해둘게요.
  • Jekyll SEO tag 설정
    SEO tag는 검색 엔진 최적화(SEO, Search Engine Optimization)를 위해 웹페이지에서 사용되는 HTML 태그입니다. 말 그대로 검색 엔진에 페이지의 내용을 알려주고 다른 사용자가 웹 페이지를 쉽게 발견할 수 있도록 합니다.
    • title
      블로그에서 가장 중요한 제목입니다. Sidebar에 블로그의 제목을 확인할 수 있고 블로그 Home에 접속했을 때, Tap에서도 블로그 제목을 확인할 수 있습니다.
    • tagline
      부제목입니다. Sidebar에 블로그의 제목 바로 밑에서 확인할 수 있습니다. 1
    • description
      meta 태그용 긴 설명입니다. 이 설명은 블로그를 검색했을때, 아래의 그림처럼 블로그에 대한 설명으로 나타나게 됩니다. 2
    • url
      배포하는 블로그의 전체 url입니다. 일반적으로 https://<username>.github.io로 설정을 합니다.
    • github, twitter
      GitHub, Twitter 유저명을 입력하면 됩니다. 꼭 입력할 필요는 없습니다.
    • social
      Footer에 저작권 소유자의 이름, 연락 방법 등을 입력할 수 있습니다. 3
      • name
        저작권 소유자의 이름입니다.
      • email, links
        저작권 소유자에게 연락하는 방법입니다.
    • webmaster_verifications
      사이트 소유권 확인용 메타태그입니다. 관련 내용은 [Gitblog] Jekyll 기반 Chirpy 테마 Gitblog 생성 - ③ Google 검색 엔진에 노출시키기에서 다뤘습니다.
  • analytics
    Web Analytics설정을 위한 것으로 방문자 활동을 추적할 수 있도록 외부 웹 분석 도구를 연동할 수 있습니다. Google, Goatcounter 등 다양한 Web Analytics를 사용할 수 있습니다.
  • pageviews
    페이지 조회수입니다. 지금은 오로지 Goatcounter 에서만 제공한다고 합니다.
  • theme_mode
    비워두면 Sidebar의 하단에 있는 Toggle 버튼으로 Light 버전과 Dark 버전을 블로그 이용자가 선택할 수 있습니다. 하지만 비워두지 않고 light 또는 dark를 입력하면 해당 버전으로만 블로그를 유지할 수 있습니다.
  • cdn
    CDN은 콘텐츠 전송 네트워크(Content Delivery Network)로 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크입니다. 클라이언트와 웹 사이트 서버 간에 중간 서버를 두어 효율성을 높이는 방식이라고 합니다. 이 부분은 개인적으로 유지하고 있는 Cloud가 있다면 설정해주세요.
  • avatar
    Sidebar에 어떤 이미지를 띄울지 정할 수 있습니다. 4
  • social_preview_image
    소셜 미리보기 이미지를 지정할 수 있습니다. 이미지 경로를 설정해두면 블로그 사용자가 블로그 링크를 Facebook, Twitter 등에 공유할 때 미리보기 썸네일로 표시됩니다.
  • toc
    게시글에 대해 전역적으로 목차(Table of Contents)를 표시할지 말지 설정하는 값입니다.
  • comments
    댓글 기능을 활성화하기 위한 항목입니다.
    • provider
      어떤 방식으로 댓글을 받을지 정할 수 있습니다. 아래와 같이 총 3가지 방식이 있습니다.
      • disqus
        DISQUS 계정으로 댓글을 등록할 수 있습니다. 단순하게 shortname을 등록하면 사용할 수 있습니다.
      • utterances
        GitHub Issue 기반의 경량 댓글 시스템입니다. GitHub 유저라면 쉽게 댓글을 달 수 있지만 답글을 달 수는 없습니다.
      • giscus
        GitHub Discussions 기반의 댓글 시스템입니다. GitHub 유저라면 쉽게 댓글을 달 수 있고 utterances과 달리 답글도 바로 달 수 있어서 저는 이 방식을 채택했습니다. giscus를 설정하는 방법은 아래에서 확인해주세요.
  • assets
    정적 asset(CSS, JS, 이미지 등)을 외부 CDN이 아니라 직접 호스팅하는 기능을 제어하는 설정입니다. 해당 방식에 대해서 자세히 알기 위해서는 chirpy-static-assets의 README를 확인해주시기 바랍니다.
  • pwa
    PWA는 Progressive Web App로 웹사이트를 앱처럼 설치하고, 오프라인에서도 사용할 수 있게 해주는 기능입니다.
  • pageinate
    블로그의 Home에서 게시할 페이지 개수를 지정하는 설정입니다.
  • baseurl
    사이트의 기본 하위 경로를 지정하는 설정값입니다. 우리는 사용자Repository에 Gitblog를 배포했기 때문에 baseurl을 비워둬도 문제가 없었습니다. 하지만, 프로젝트를 개설하고 다양한 프로젝트를 관리하게 되면 이야기가 달라집니다. 예를 들어, 프로젝트에서 문서를 myblog라는 이름으로 운영할 경우 사이트 주소는 https://<username>.github.io/myblog/가 됩니다. 이때는 baseurl = "myblog"라고 설정해야 경로가 올바르게 작동합니다.
  • 나머지 설정
    수정하는 것을 추천하지 않습니다.

(Optional) giscus 설정 방법

giscus를 사용하기 위해서는 아래의 방법을 순서대로 진행하시면 됩니다.

아래의 방법은 Chirpy 테마에서의 설정 방법입니다. 그리고 앞선 포스트들과 일관된 내용으로 진행하기 때문에 Repository 이름을 <username>.github.io로 가정하며 작성했습니다.

  1. giscus에 먼저 접근한 후, giscus 설정 > 저장소의 절차를 따릅니다. 그리고 아래와 같이 <username>/<username>.github.io를 빈칸에 입력했을 때, 통과했습니다! 이 저장소는 모든 조건을 만족합니다.가 출력되어야 합니다.
    5

  2. giscus 설정 > 페이지 ↔️ Discussions 연결에서는 아래와 같이 설정해도 좋지만 기호에 맞게 설정해주세요. 6
  3. giscus 설정 > Discussion 카테고리, 기능, 테마는 아래와 같이 설정합니다. 당연하게도 기호에 따라 다른 설정을 하셔도 됩니다. 7
  4. giscus 설정 > giscus 사용에서 _config.yml에 입력이 필요한 repo_id, category_id가 생성되어 있을 것입니다. mapping, strict 등등 여러 설정 값도 생성 되었으니 확인하시고 입력해주세요. 8
  5. 이제 아래와 같이 comments가 생겼는지 확인하시면 됩니다. 9

마치며

자유도가 높은 Jekyll 기반 Chirpy 테마인 만큼 설정할 것도 많이 있습니다. 하지만 제가 설명한 내용을 살펴보면 그렇게까지 어려운 내용은 없습니다. 이 포스트도 여러분의 블로그 생성에 도움되기를 기대하며 마치도록 하겠습니다.

Gitblog, Jekyll기반 Chirpy 테마 Gitblog 수정
This post is licensed under CC BY 4.0 by the author.