Font 와 Highlight color 수정 후 theme rebuild

Hugo / hugo-tranquilpeak-theme 테마의 font를 변경합니다.
수정한 값을 적용하기 위해 테마 rebuild 과정이 포함되어 있습니다. (Update: Dec 19, 2019)

Configurations

OS: Windows 10 (x64)
Browser: Google Chrome
Hugo: v0.61.0
Hugo theme: hugo-tranquilpeak-theme (0.4.7-BETA)
Fonts: Noto sans kr, IBM Plex mono

Edit fonts.scss, variables.scss & Rebuild theme

1. _fonts.scss, _variables.scss 두 파일을 아래를 참고하여 수정합니다

_fonts.scss 파일을 열고 마지막 라인에 구글 웹폰트를 추가합니다
S:\Hugo\blog\themes\hugo-tranquilpeak-theme\src\scss\utils_fonts.scss

15
16
17
18


(...)
@import
    url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap'),
    url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap');

_variables.scss 파일을 열고 아래 내용을 참고하여 폰트를 변경 합니다
S:\Hugo\blog\themes\hugo-tranquilpeak-theme\src\scss\utils_variables.scss

 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
27
28


// Global settings
// --------------------------------------------
// Font families
$open-sans:            'Open Sans';
$open-sans-sans-serif: 'Open Sans', sans-serif;
$merriweather-serif:   'Merriweather', serif;
$menlo:                 Menlo, Consolas, monospace;
$noto-sans-kr:         'Noto Sans KR', sans-serif;
$ibm-plex-mono:        'IBM Plex Mono', monospace;

$font-family-base: $noto-sans-kr;

$font-families: (
   // base
   'headings':          $noto-sans-kr,
   // components
   'code':              $ibm-plex-mono,
   'caption':           $noto-sans-kr,
   'image-gallery':     $noto-sans-kr,
   'post-header-cover': $noto-sans-kr,
   'post-meta':         $noto-sans-kr,
   'post-content':      $noto-sans-kr,
   'post-excerpt-link': $noto-sans-kr,
   'highlight':         $ibm-plex-mono,
   // layout
   'sidebar':           $noto-sans-kr
);
(...)

_variables.scss 파일에서 background, font color, size 등도 수정할 수 있습니다
열어본 김에 조금 더 시인성을 높이기 위해 아래처럼 컬러값을 수정했습니다

(...)
// Font size : (X.Xrem = XXpx, 1.0rem = 10px)
$font-size: (
    'xxlarge': 2rem,
    'xlarge': 1.8rem,
    'large':  1.7rem,
    'base':   $font-size-base,
    'medium': 1.5rem,            // medium font 1.4 -> 1.5 로 변경
    'small':  1.3rem,
    'xsmall': 1rem
);
(...)
// Highlight code
$highlight: (
    'background':  #000000,
    'font-size':   1.5rem,
    'border':      1px solid,
    'line-height': 2.3rem
);

// Highlight colors
// name of colors: http://www.color-blindness.com
$highlight-colors: (
    // Background
    'black':           #000,     // code background 외 아래 언급된 폰트 컬러 수정
    // General color
    'night-rider':     #ccc,
    'bondi-blue':      #0095b6,
    'persimmon':       #df5000,
    'asparagus':       #73ac6c,
    // Comment
    'pewter':          #555555,
    'cardinal':        #7388c4,
    'scampi':          #a674f1,
    'bahama-blue':     #7092fb,
    'egyptian-blue':   #1662ff,
    // Deletion color for .diff file
(...)

2. themes\hugo-tranquilpeak-theme 폴더로 이동 후 rebuild 합니다

;rebuild 가 실패하거나 실행이 안될경우 아래 3번 과정을 진행합니다

S:\> cd Hugo\blog\themes\hugo-tranquilpeak-theme
S:\Hugo\blog\themes\hugo-tranquilpeak-theme> npm run prod

3. hugo-tranquilpeak-theme 수정 후 필요한 rebuild 환경구성

;node.js v8.x 버전까지의 하위 버전이 필요합니다
다운받고 설치 후 어느 경로든 실행할 수 있도록 윈도 path도 설정합니다
파일: nodejs.org/dist/latest-v8.x/ node-v8.16.2-x64.msi

S:\> where node
C:\Program Files\nodejs\node.exe

S:\> where npm
C:\Program Files\nodejs\npm
C:\Program Files\nodejs\npm.cmd

S:\> node -v
v8.16.2
S:\> npm -v
6.4.1

4. 설치가 완료되면 다시 rebuild 합니다

*rebuild 를 위한 구성 중 node_modules 이름의 폴더와 하위 파일들이 생성됩니다
*build 실행 위치: \Hugo\blog\themes\hugo-tranquilpeak-theme

S:\> cd Hugo\blog\themes\hugo-tranquilpeak-theme
S:\Hugo\blog\themes\hugo-tranquilpeak-theme> npm install grunt-cli -g
S:\Hugo\blog\themes\hugo-tranquilpeak-theme> npm install grunt --save-dev

S:\Hugo\blog\themes\hugo-tranquilpeak-theme> dir |findstr node_modules
12/13/2019  13:35    <DIR>          node_modules

S:\Hugo\blog\themes\hugo-tranquilpeak-theme> npm run prod
> hugo-tranquilpeak-theme@0.4.7-BETA grunt S:\Hugo\blog\themes\hugo-tranquilpeak-theme
> node ./node_modules/grunt-cli/bin/grunt "buildProd"
(...)
Running "sails-linker:prodJs" (sails-linker) task
File "layouts/partials/script.html" updated.

Running "sails-linker:prodCss" (sails-linker) task
File "layouts/partials/head.html" updated.

Running "replace:linker" (replace) task
Done

5. Rebuild 후 페이지가 깨진다면…

*build가 완료되면 themes\hugo-tranquilpeak-theme\layouts\partials\script.html 파일과 head.html 파일이 업데이트 됩니다. 따라서 두 파일을 blog\layouts\partials 에 복사 및 수정하여 사용중이라면 업데이트 된 부분을 비교 후 별도로 반영해줘야 합니다.

theme rebuild로 style-(…).min.css 파일이 업데이트 되었습니다.

S:\Hugo\blog\themes\hugo-tranquilpeak-theme\static\css> dir

12/18/2019  10:26    <DIR>          .
12/18/2019  10:26    <DIR>          ..
12/18/2019  10:26            87,217 style-geg01wgs4obts5g7vfuj9friotgndu90dxpl4byfnmoii24z6hq3yn8g.min.css
12/18/2019  10:26           108,677 style.css
12/18/2019  10:26           108,677 tranquilpeak.css
               3개 파일             304,571 바이트
               2개 디렉터리  63,016,673,280 바이트 남음

head.html 을 열어서 업데이트된 style-(…).min.css 파일명으로 수정합니다
S:\Hugo\blog> notepad layouts\partials\head.html

46
47
48
49
50


(...)
    <!--STYLES-->
    <link rel="stylesheet" href="/css/style-geg01wgs4obts5g7vfuj9friotgndu90dxpl4byfnmoii24z6hq3yn8g.min.css" />
    <!--STYLES END-->
(...)

6. 브라우저 테스트 후 git push

http://localhost:1313/