[minimal-mistakes] 깃허브(GitHub) 원격 테마 적용하는 방법

#Miniaml-Mistakes 원격 테마

원격 테마의 장점은 Minimal-Mistakes 테마가 업데이트 될때마다 쉽게 업그레이드 할 수 있으며 폴더 구조가 단순합니다.

하지만 단점도 존재 하는데 구글에서 Minimal-Mistakes 테마의 Custome 방법을 검색하다 보면 대부분 _sass/minimal-mistakes폴더의 css파일을 수정하게 되는데, 이 부분을 수정할 수 없기 때문에 다른 방법을 찾아야 합니다.

본 글은 아래 링크에 있는 원격 테마에 대해 읽어보고 직접 실행해본 후기로, _sass/minimal-mistakes폴더의 css파일를 수정하지 않고 다른 방법으로 테마를 커스텀하는 방법에 대해서도 설명하고 있습니다.

📌https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

# gemfile 만들기

원격 테마를 적용하기 위해 새로운 폴더를 생성합니다. 그리고 아래와 같이 gemfile를 생성합니다.

source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins
gem "jekyll-include-cache", group: :jekyll_plugins
gem "webrick", "~> 1.8"

📢 gemfile 뒤에 txt 같은 확장자가 없음을 확인하세요.

# _config.yml 만들기

다음으로 _config.yml파일을 만들어야 합니다. Minimal-Mistakes Git 저장소에 있는 _config.yml파일의 내용을 복사합니다.

📌 _config.yml

_config.yml 파일 중에 아래 내용을 참고하여 값을 수정 합니다.

# theme                  : "minimal-mistakes-jekyll"  # theme 속성은 주석처리 합니다.
remote_theme           : "mmistakes/minimal-mistakes" # remote_theme로 활성화 합니다.

# Site Settings
repository               : "mmistakes/minimal-mistakes" # 자신의 repository 주소를 입력 합니다. 

# 원격 테마 테스트

현재까지 폴더 내의 파일 리스트 입니다.

🔽 아래 명령어를 실행행합니다.

bundle exec jekyll serve

📢 오류가 발생한다면 Rudy가 설치되어 있는지 확인하세요.

webrick과 관련된 에러가 발생한다면 아래의 명령어를 실행 후 다시 실행합니다.

bundle add webrick

아래와 같이 실행되면 정상적으로 실행된 것입니다.

브라우저에서 확인해보겠습니다. 뭔가 표시되긴 하는데 이상합니다. 원인은 해당 웹 주소로 접근했을 때 보여줄 index.html파일이 없기 때문입니다.

index.md파일을 만들고 아래와 같이 입력합니다. 저장 후 다시 웹 브라우저에서 확인해봅니다.

---
title: "안녕하세요."
author_profile: true
---
메인 페이지 입니다. site Title을 누르면 이 페이지로 이동됩니다.

이제 정상적으로 웹 사이트가 표시되는 것을 볼 수 있습니다.

# 원격 테마 커스텀

시작 부분에서 원격 테마의 경우 _sass/minimal-mistakes폴더의 css파일을 수정할 수 없기 때문에 다른 방법으로 이 테마의 css를 수정해야 된다고 언급했었습니다. 원격 테마의 css 수정을 위해서 /assets /css에 main.scss 파일을 생성하고 아래와 같이 입력합니다.

이제부터 커스텀과 관련된 css내용들은 main.scss에 추가하면 됩니다.

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

@import "minimal-mistakes/skins/dark"; // skin
@import "minimal-mistakes"; // main partials

아래는 오원석님의 깃허브 블로그에서 원격 테마의 수정한 예시 입니다.

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

//
// 리모트 테마 또는 Gem 테마를 사용하는 경우
// 부분적으로 _sass 내의 파일을 수정할 수가 없다고 함.
// 때문에 /assets/css/main.scss 파일에서 재정의를 통해 수정을 하도록 함.
//

//
// Breakpoints 기준값 재정의 - 아래 import 이전에 정의해야 함.
//
// 기본 값이 데스크탑에서 large에서 x-large 이상 구간인 경우 폰트가 커지지만
// 양쪽 네비게이션 영역과 TOC 영역이 같이 넓어 지면서 상대적으로 표현할 수 있는
// 글 영역이 작아져서 효율적이지 못함을 느꼈습니다.
//
// 이에 이 영역을 포함한 전체 영역에 대한 조정을 실시했으며,
// 제가 가지고 있는 samsung z fold 3에서 외부 액정, 내부 액정, 내부 액정 회전시,
// 데스크탑에서 작을 때 부터 큰 사이즈 까지 모두 최적이라 생각되는 넓이에 맞춘 
// 개인적인 최적화된 값 입니다.
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_variables.scss
//   
$small: 576px;            // default 600px
$medium: 720px;           // default 768px
$medium-wide: $medium;    // default 900px
$large: 992px;            // default 1024px
$x-large: 1340px;         // default 1280px
$max-width: 1600px;       // default $x-large

@import "minimal-mistakes/skins/dark"; // skin
@import "minimal-mistakes"; // main partials

//
// font 크기 재정의 - import 이후 정의해야 함.
//
// 위의 breakpoint와 함께 수정되었으며, large에서 글씨를 한 단계 올리지 않은 이유는
// nav, toc의 넓이가 변경되기 때문에 실제 컨텐츠 공간이 적어지는 부분을 고려했기 때문입니다.
// 데스크탑에서 x-large 이상일 경우 폰트를 올려 더 크게 표시되도록 하며 이는 기존 값보다
// 더 넓은 값을 사용하도록 합니다.
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_reset.scss
//
html {
  font-size: 16px;                    // Default 16px;

  @include breakpoint($medium) {
    font-size: 18px;                  // Default 18px;
  }

  @include breakpoint($large) {
    font-size: 18px;                  // Default 20px;
  }

  @include breakpoint($x-large) {
    font-size: 20px;                  // Default 22px;
  }

}


//
// link underline 제거
//
// 기본 링크에 underline이 가독성을 떨어트려 제거하였습니다.
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_basee.scss
//
a {
  text-decoration: none;                // 추가된 코드입니다.

  &:focus {
    @extend %tab-focus;
  }

  &:visited {
    color: $link-color-visited;
  }

  &:hover {
    color: $link-color-hover;
    outline: 0;
  }
}


//
// Grid Item 숫자를 4에서 3으로 조정
//
// collection layout등에서 사용하는 entries_layout: grid인 경우
// 표시되는 grid item의 개수가 4개로 설정되어 있는데 너무 작게 표시되는 것 같아
// 이를 3개로 표시되도록 수정하였습니다.
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_archive.scss
//
.grid__item {
  margin-bottom: 2em;

  @include breakpoint($small) {
    float: left;
    width: span(5 of 10);

    &:nth-child(2n + 1) {
      clear: both;
      margin-left: 0;
    }

    &:nth-child(2n + 2) {
      clear: none;
      margin-left: gutter(of 10);
    }
  }

  @include breakpoint($medium) {
    margin-left: 0; /* override margin*/
    margin-right: 0; /* override margin*/
    width: span(4 of 12);

    &:nth-child(2n + 1) {
      clear: none;
    }

    &:nth-child(3n + 1) {
      clear: both;
      margin-left: 0;
    }

    &:nth-child(3n + 2) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

    &:nth-child(3n + 3) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

  }

  //
  // page hero에서 호출하는 page meta 출력시 사용되는 글꼴의 크기를 키웠습니다.
  // 제가 추가로 작성한 _include/excerpt_hero.html 에서 표시되는 readtime등의 
  // meta 데이터 출력시 사용되는 값입니다.
  //
  // 이 값은 .grid__item 내에서 사용되는 값입니다.
  // 범용으로 선언 된 .page__meta와 별개 입니다.
  //
  // 원본위치: [remote-theme]/_sass/minimal-mistakes/_archive.scss
  //

  .page__meta {
    margin: 0 0 4px;
    font-size: 1em;         // default 0.6em
  }

  .page__meta-sep {
    display: block;

    &::before {
      display: none;
    }
  }

  .archive__item-title {
    margin-top: 0.5em;
    font-size: $type-size-5;
  }

  .archive__item-excerpt {
    display: none;

    @include breakpoint($medium) {
      display: block;
      font-size: $type-size-5;
    }
  }

  .archive__item-teaser {
    @include breakpoint($small) {
      max-height: 200px;
    }

    @include breakpoint($medium) {
      max-height: 200px;
    }
  }
}


//
// .notice 글자 크기 조정
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_notices.scss
//
@mixin notice($notice-color) {
  margin: 2em 0 !important;  /* override*/
  padding: 1em;
  color: $text-color;
  font-family: $global-font-family;
  font-size: $type-size-5 !important;     // default $type-size-6
  text-indent: initial; /* override*/
  background-color: mix($background-color, $notice-color, $notice-background-mix);
  border-radius: $border-radius;
  box-shadow: 0 1px 1px rgba($notice-color, 0.25);

  h4 {
    margin-top: 0 !important; /* override*/
    margin-bottom: 0.75em;
    line-height: inherit;
  }

  @at-root .page__content #{&} h4 {
    /* using at-root to override .page-content h4 font size*/
    margin-bottom: 0;
    font-size: 1em;
  }

  p {
    &:last-child {
      margin-bottom: 0 !important; /* override*/
    }
  }

  h4 + p {
    /* remove space above paragraphs that appear directly after notice headline*/
    margin-top: 0;
    padding-top: 0;
  }

  a {
    color: mix(#000, $notice-color, 10%);

    &:hover {
      color: mix(#000, $notice-color, 50%);
    }
  }

  code {
    background-color: mix($background-color, $notice-color, $code-notice-background-mix)
  }

	pre code {
		background-color: inherit;
	}

  ul {
    &:last-child {
      margin-bottom: 0; /* override*/
    }
  }
}

/* Default notice */

.notice {
  @include notice($light-gray);
}

/* Primary notice */

.notice--primary {
  @include notice($primary-color);
}

/* Info notice */

.notice--info {
  @include notice($info-color);
}

/* Warning notice */

.notice--warning {
  @include notice($warning-color);
}

/* Success notice */

.notice--success {
  @include notice($success-color);
}

/* Danger notice */

.notice--danger {
  @include notice($danger-color);
}

//
// archive list page meta 글자 크기 조정
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_archvie.scss
//

/*
   List view
   ========================================================================== */
  
.list__item {
  .page__meta {
    margin: 0 0 4px;
    font-size: 0.8em;         // default 0.6em
  }
}

.archive__item-excerpt {
  margin-top: 0;
  font-size: $type-size-5;

  & + p {
    text-indent: 0;
  }

  a {
    position: relative;
  }
}

//
// categories, tags, years 에서 사용하는 taxonomy index 글자 크기 조정
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_page.scss
//
.taxonomy__index {
  display: grid;
  grid-column-gap: 2em;
  grid-template-columns: repeat(2, 1fr);
  margin: 1.414em 0;
  padding: 0;
  font-size: 1em;                         // default 0.75em
  list-style: none;

  @include breakpoint($large) {
    grid-template-columns: repeat(3, 1fr);
  }

  a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.25em 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid $border-color;
  }
}

//
// page meta 글자 크기 조정
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_page.scss
//
.page__meta {
  margin-top: 2em;
  color: $muted-text-color;
  font-family: $sans-serif;
  font-size: $type-size-5;        // default $type-size-6

  p {
    margin: 0;
  }

  a {
    color: inherit;
  }
}

//
// table 글자 크기 조정
//
// 원본위치: [remote-theme]/_sass/minimal-mistakes/_tables.scss
//
table {
  display: block;
  margin-bottom: 1em;
  width: 100%;
  font-family: $global-font-family;
  font-size: $type-size-5;            // default $type-size-6
  border-collapse: collapse;
  overflow-x: auto;

  & + table {
    margin-top: 1em;
  }
}

📌참고링크 - 오원석님의 깃허브 블로그