Home [minimal_mistakes] 블로그 설정하기
Post
Cancel

[minimal_mistakes] 블로그 설정하기

Posted May 5, 2022
By nuyhc
10 min read

깃허브 블로그 설정하기

사실 깃허브 블로그와 관련된 내용들로 첫 TIL을 시작하게됬다.
그 이유는, 나도 아직 깃허브 블로그에 익숙하지 않기때문이다.
티스토리 블로그를 통해 로그나 정리한 내용들을 꾸준히 올려왔지만,
확실히 마크다운으로 정리된 문서를 작성하고 관리하는게 좀 더 편해 깃허브 블로그를 선택했다.
깃허브 블로그와 관련된 기본적인 학습이 끝나면, 마크다운을 다시 한번 정리하고 계획했던 내용들을 포스팅할 생각이다.
확실히 초반에는 블로그가 지저분할꺼 같다. 나도 잘 모르는 부분들을 찾아보면서 사실상 실습을하고 있는 상태이기때문에.. 나중에는 깔끔하고 잘 정리된 블로그로 변했으면 좋겠다.

기본 설정은 _config.yml 파일을 통해 진행된다.
해당 파일은 지킬 동작에 대한 설정 내용을 모두 담고있다. 그렇기때문에 해당 파일을 수정함으로써 블로그의 기본 뼈대를 구성할 수 있다.

1. 윈도우에 RUBY 설치하기

Ruby download이 사이트에서 루비를 다운 받았다.
리눅스나 맥OS였다면 터미널을 이용해 다운 받았겠지만, 지금은 주로 사용하는 환경이 윈도우라 .exe로 설치해줬다.

루비가 정상적으로 설치되면 Start Command Prompt with Ruby를 실행 시켜 ver ruby 명령으로 설치 여부를 확인해준다.
블로그를 클론한 로컬 위치로 와서 아래 과정을 수행해야하는거 같다.

1

gem install jekyll bundler

위 명령어를 이용해 지킬도 설치해줬다. _config.yml을 수정하고 실행 시키기 위해서는 루비가 설치되어 있어야하는거 같다.

깃허브 블로그를 생성하고 싶어 이것저것 찾아봐서 약간 짬뽕인 상태이긴한데,
크게 2가지 방식으로 만들어지는거 같다.

  1. 깃허브에서 지킬 템플릿을 클론해서 생성하는 방식
  2. 처음부터 개발 환경을 구성하고 푸시하는 방식

나는 첫번째 방식으로 처음에 생성했는데, 블로그 설정이나 수정 등에는 2번이 좀 더 유용한거 같다.
깃허브 블로그와 관련된 자료는 이분의 포스팅이 가장 잘 정리가 잘되어있고 설명이 친절한거 같아서 많이 참고하고 있다.

1

bundle exec jekyll serve

명령으로 호스팅 여부를 체크해야되는거 같은데,

1
2
3
4

Bundler could not find compatible versions for gem "jekyll-gist":
  In Gemfile:
    minimal-mistakes-jekyll was resolved to 4.24.0, which depends on
      jekyll-gist (~> 1.5)

실행하면 위와 같은 오류가 발생했다. 언뜻봐도 버전 호환성 문제인거 같아서

1

bundle update

명령으로 업데이트를 해주고 bundle exec jeky serve 명령을 다시 수행하니 정상적으로 작동했다.

위 과정을 수행한 이유는, _config.yml 파일을 수정하면 실행 중인 지킬 서비르를 중단하고 다시 실행시켜야 한다고해서였다.

2. _config.yml 구성

블로그 정보

1
2
3
4
5
6
7
8
9
10
11
12
13

# Site Settings
locale                   : "ko-KR"
title                    : "사이트 상단에 타이틀로 표시"
title_separator          : "-"
subtitle                 : "-"
name                     : "사이트 이름"
description              : "사이트 설명"
url                      : "인터넷에 공개되는 주소"
baseurl                  : "서브주소"
repository               : "깃허브 주소"
teaser                   : "이미지 - 게시물의 대표사진"
logo                     : "로고"
masthead_title           : "좌측 상단의 타이틀"

본문에 본인 블로그의 링크를 기재할 경우,

1

https://nuyhc.github.io/

기반으로 표현하면 편하다고한다. 과연 내가 손을 댈지는 모르겠지만, 커스텀 도메인을 등록하거나 변경할 일이 생기면 _config.yml의 수정으로 모두 변경된다고 한다.

teaser와 log 그림 파일을 사용할 계획이면 그림 파일을 담아둘 위치를 등록하고 주소를 기재한다.
지킬에서는, assets 폴더 밑의 파일들을 리소스로 사용한다는거 같다.
추후 이미지 사용을 고려해, assets 폴더 아래 images 파일을 생성했다.

1

![](https://nuyhc.github.io//assets/images/이미지이름)

형식으로 사용 가능한거 같다.

댓글

1
2
3
4
5
6
7
8
9
10
11
12
13
14

comments:
  provider               : # false (default), "disqus", "discourse", "facebook", "staticman", "staticman_v2", "utterances", "giscus", "custom"
  disqus:
    shortname            : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
  discourse:
    server               : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
  facebook:
    # https://developers.facebook.com/docs/plugins/comments
    appid                :
    num_posts            : # 5 (default)
    colorscheme          : # "light" (default), "dark"
  utterances:
    theme                : # "github-light" (default), "github-dark"
    issue_term           : # "pathname" (default)

블로그 댓글 기능을 설정하는 영역인거 같다.
깃허브 페이지 자체적인 댓글 기능은 없어서 보통 외부 댓글 서비스를 연결해주는 방식으로 사용한다고 한다.

저자 정보

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Site Author
author:
  name             : "nuyhc"
  avatar           : # path of avatar image, e.g. "/assets/images/bio-photo.jpg"
  bio              : "꾸준히 성장하고 싶은 개발자"
  location         : "Republic of Korea"
  email            : "spec327@naver.com"
  links:
    - label: "Email"
      icon: "fas fa-fw fa-envelope-square"
      # url: "mailto:your.name@email.com"
    - label: "Website"
      icon: "fas fa-fw fa-link"
      # url: "https://your-website.com"
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      # url: "https://twitter.com/"
    - label: "Facebook"
      icon: "fab fa-fw fa-facebook-square"
      # url: "https://facebook.com/"
    - label: "GitHub"
      icon: "https://github.com/nuyhc"
      # url: "https://github.com/"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      # url: "https://instagram.com/"

사이트 좌측 사이드바에 기본으로 사이트 저자 소개 항복이 존재하는데 해당 부분을 설정하는 영역인거 같다.

저자 정보(하단)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Site Footer
footer:
  links:
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      # url:
    - label: "Facebook"
      icon: "fab fa-fw fa-facebook-square"
      # url:
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      # url:
    - label: "GitLab"
      icon: "fab fa-fw fa-gitlab"
      # url:
    - label: "Bitbucket"
      icon: "fab fa-fw fa-bitbucket"
      # url:
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      # url:

맨 아래 부분에 표시되는 영역을 말한다고 한다. 위 영역과 마찬가지로 사이트 저자에 대한 소개를 설정할 수 있다고 한다.

블로그 표시 방법

1
2
3
4
5

# Outputting
permalink: /:categories/:title/
paginate: 5 # 첫 페이지에 보여줄 최근 게시물 수를 지정
paginate_path: /page:num/
timezone: # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

블로그 표시 방법을 설정하는 영역
timezone의 경우 한국이면 seoul을 사용한다고 한다.

_posts, _pages 기본 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true
  # _pages
  - scope:
      path: ""
      type: pages
    values:
      layout: single
      author_profile: true
      read_time: false
      comments: false
      share: true
      related: false

지킬에서는 게시물을 2가지로 구분한다.

  1. post
  2. page

post는 _posts 폴더에 위치하고, 해당 폴더의 날짜를 기반으로 파일명이 작성되고 이를 게시물로 변환한다.
반면, page는 날짜를 기반으로하지 않는 글을 의미한다.

일단 여기까지 알아본 내용을 기반으로 수정을해서 반영을 해봐야겠다.

TIL, GitHub Page
GitHub Git
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents

[minimal_mistakes] 글 작성하기

[minimal_mistakes] 블로그 메뉴 구성하기

Comments powered by Disqus.