git 으로 clone 한 icarus theme 를 사용하고 있다. 스타일과 코드를 수정하려면 아래 2개 사이트의 정보가 필요할 것 같다.

1. bulma.io
   • https://bulma.io/
2. inferno
   • https://github.com/ppoffice/hexo-component-inferno

layout 관련

기본 레이아웃은 layout.jsx 이다.과련해서 bulma 의 CSS 정의를 살펴보면 도움이 된다.

• Bulma sizes: https://bulma.io/documentation/columns/sizes/
• https://www.geeksforgeeks.org/bulma-different-column-sizes-per-breakpoint/?ref=ml_lbp

컬럼 수에 따른 조절…

icarus/layout/layout.jsx 에서 컬럼수로 폭을 조절하는 것을 상대적으로 정해주니 좀 더 시원해 졌다.

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

<div class="columns">
    <div class={classname({
        column: true,
        'order-2': true,
        'column-main': true,
        'is-four-fifths': columnCount === 1,
        //'is-12': columnCount === 1,
        'is-four-fifths-tablet is-four-fifths-desktop is-four-fifths-widescreen': columnCount === 2,
        'is-three-quarters-tablet is-three-quarters-desktop is-three-quarters-widescreen': columnCount === 3
        //'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
        //'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
    })} dangerouslySetInnerHTML={{ __html: body }}></div>

style 관련

responsive.styl

화면 폭 수정

themes/icarus/include/style/responsive.styl

• Javascript code determines the page width.

1
2
3
4

+fullhd()
    .is-2-column .container
        max-width: $widescreen - 1 * $gap
        width: $widescreen - 1 * $gap

style.styl

전체 스타일 시트는 themes/icarus/source/css/style.styl 에서 외부 .styl 파일을 을 import 해서 적용했다. 변경을 위해서 themes/my_icarus_custom 이란 폴더를 만들어 사용한다.

• themes/icarus/source/css/style 아래 추가할 스타일 파일을 만들어 사용한다.

1
2
3
4
5

hexo ROOT/
    |----- themes
            |
            |----- icarus/
                        source/css/my_bg.styl

배경이미지 적용

1. themes/icarus/source/css/style.styl 파일에 다음을 적용

1
2

// my custums
@import '../../include/style/my_bg'

2. 배경 이미지는 hexo/source/images/ 아래에 저장했다.

3. my_icarus_custom/bg.styl 파일에 CSS 스타일 작성

1
2
3
4
5
6
7

body {
  background-image: url("/images/vlcsnap-2023-05-16-14h44m58s614.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

이전 글 Hexo: icarus 테마 git기반 설치와 업그레이드 에 변경과 configurationsfile 을 더한 내용이다.

static file 기반 블로엔진인 Hexo에서 테마로 icarus 를 사용하려고 한다. 여기서는 icarus theme를 git으로 설치한다. 그리고 최신 버전으로 업그레이드 하는 과정을 살펴본다. 또한 icarus theme의 구성 파일에 대해서 좀 더 세부적으로 살펴본다.

1. Icarus theme git 설치
2. Configuration files
3. Upgrade

1. Icarus theme git 설치

icarus 테마는 getting-started-with-icarus 에 설명이 되어 있다. 여기서는 git 을 클론해서 사용해 보도록 하겠다.

- git clone

icarus 릴리즈 페이지 https://github.com/ppoffice/hexo-theme-icarus/releases 를 확인해서 원하는 버전 번호를 찾는다. hexo 프로젝트 폴더에 들어가서 아래 같이 5.0.0 버전을 지정해서 클론을 수행한다.

1
2

$ cd PROJECT_FOLDER
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b 5.0.0 --depth 1

클론한 결과는 아래 같은 폴더 구조를 갖는다.

1
2
3
4
5
6

themes/icarus
    ├── include
    ├── languages
    ├── layout
    ├── scripts
    └── source

- 설정

이제 hexo의 구성 파일 _config.yml 에 테마를 icarus 로 지정한다.

1
2

#_config.yml
theme: icarus

그리고 icarus 구성 파일 _config.icarus.yml 에 먼저 버전을 명시하고 icarus 테마 관련 설정을 진행한다.

1

version: 5.0.0

Configuration files

Icarus theme의 구성파일은, jyekyll 의 구성요소 + icarus 구성 파일로 제공한다. 구성 파일을 통해서 여러 형식의 화면 표현을 가능하게 한다. _config.yml 와 같은 위치에 있으면 된다.

아래는 구성파일의 우선순위 순서로 작성되어 있다:

• _config.yml: 사이트 구성 파일 (jekyll 의 기본 구성파일)
  • hexo _config.yml
• _config.icarus.yml: Icarus theme 기본 구성파일.
• 레이아웃 구성 파일
  • _config.post.yml : 글 내용 POST 레이아웃 화면/위젯 구성
  • _config.page.yml : 페이지의 레이아웃 화면/위젯 구성
• Jykell 의 Post/page front-matter
• (Deprecated) Legacy theme configuration file at themes/icarus/_config.yml
• (Deprecated) Legacy layout configuration file at themes/icarus/_config.post.yml and themes/icarus/_config.page.yml

Layout Configuration Files

레이아웃 구성은 icarus theme 의 구성파일과 같은 구조를 갖는다. 모든 블로그 포스트의 레이아웃을 위해서 _config.post.yml 파일을 참조한다. 그리고 _config.page.yml 은 사용자 지정 페이지를 위한 레이아웃에 적용된다.

_config.icarus.yml 파일:

• 세 개의 컬럼으로 사이트의 레이아웃을 배치한다.

  1 2 3 4 5 6 7 8 9 10

  widgets: - type: recent_posts position: left - type: categories position: right - type: tags position: right

_config.post.yml 파일

• POST는 위젯 위치를 left 로 두어서 위젯+본문의 두개 컬럼으로 구성된다.

1
2
3
4
5
6
7
8
9
10

widgets:
    -
        type: recent_posts
        position: left
    -
        type: categories
        position: left
    -
        type: tags
        position: left

Post/Page Front-matter

어떤 페이지/포스트에서 사이트/레이아웃 구성을 오버라이드 하려면 해당 포스트(글) 혹은 페이지의 Front-matter 로 구성해 사용하면 된다.

작성한 포스트 source/_post/some-post.md 에 선언한 Front-matter 구성.

1
2
3
4
5
6
7
8

title: My first post
date: '2015-01-01 00:00:01'
article:
    highlight:
        theme: atom-one-dark
---
# Some Post

some-post.md 의 Front-matter 는 아래 사항을 오버라이드한다.

• _config.post.yml, _config.icarus.yml 의 article.highlight 를 atom-one-dark 로 재구성한다.
• 단, font-matter에서 title, date, updated, comments, layout, source, photos, and excerpt 등은 재정의 되지 않는다.

Site Configuration File

앞서 설명한 icarus 테마, 레이아웃, font matter 파일을 사이트 구성파일을 재정의 한 것이다.

3. Upgrade

다른 버전의 icarus theme 로 업그레이드를 하려면 기존 폴더를 백업해 두고 다시 git clone을 통해 다운로드하고 _config.icarus.yml 구성 파일에 버전과 내용을 변경해서 사용하면 된다.

예를 들어 앞서 5.0.0 버전을 백업하고 5.1.1 버전으로 업그레이드 한다면 아래 같이 기존 irarus 를 icarus_5.0.0 같이 백업해 두고 새 버전이 잘 적응되는지 확인후 정리하면 된다.

1
2

$ cd PROJECT_FOLDER/theme
$ mv icarus icarus_5.0.0

이어서 새 버전을 git clone 한다.

1

$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b 5.1.1 --depth 1

hexo의 구성 파일 _config.icarus.yml 에 새 icarus 테마 버전을 명시한다.

1

version: 5.1.1

hexo 서버를 재시작해 정상적으로 동작하는지 확인한다. 그런데 필요한 npm 모듈 업그레이들 요구한다.

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

$ hexo server
INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================

ERROR Package hexo-component-inferno's version (1.1.0) does not satisfy the required version (^2.0.2).
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save hexo-component-inferno@^2.0.2
ERROR or:
ERROR yarn add hexo-component-inferno@^2.0.2

요구에 따라 업그레이드 해주면 된다.

1

$ npm install --save hexo-component-inferno@^2.0.2

정상적으로 업그레이드 되어서 server가 실행되는 것을 확인할 수 있다. 단, hexo clean 이후 에러를 만날 수 있어 보인다.

업그레이드 후 db.json 에러 대응

clean 해서 새로 생성하기 위해서 clean 명령후 generate 를 2번 정도 실행하면 보통는 db.json 에러가 없어지는데 업그레이드 후 아래 같이 계속 발생한다.

1
2
3

INFO  === Registering Hexo extensions ===
FATAL Error: [hexo-include-markdown] Could not open db.json .
    at ReadFileContext.callback (/Users/qkboo/work-blog/thinkbee.github.io/node_modules/hexo-include-markdown/lib/orverwriteCache.js:22:15)

블로그 solved-hexo-include-markdown 를 따라 다음 같이 처리했다.

1
2
3
4

#
$ npm install hexo-include-markdown --save
# clean & generate
$ hexo clean;echo "{}" > db.json;hexo generate

Upgrade to Icarus 5.2.1

2023/7월 Icarus 5.2.1 로 업그레이드 진행

1

git clone https://github.com/ppoffice/hexo-theme-icarus.git icarus -b 5.2.1

_config.icarus.yml 에 icarus theme 버전을 명시한다.

1

version: 5.2.1

서버를 재시작하고 확인한다. npm 모듈등… 문제가 없이 잘 진행된다.

참고

1. User guide: configurations

2023-07-09에 작성한 Hexo - icarus theme 설치: git기반 가 최신 글이다.

Hexo 의 테마인 icarus 를 git 을 통해 설치하고 원하는 버전으로 업그레이드 하는 과정을 살펴본다.

1. Icarus theme git 설치
2. Upgrade

1. Icarus theme git 설치

icarus 테마는 getting-started-with-icarus 에 설명이 되어 있다. 여기서는 git 을 클론해서 사용해 보도록 하겠다.

- git clone

icarus 릴리즈 페이지 https://github.com/ppoffice/hexo-theme-icarus/releases 를 확인해서 원하는 버전 번호를 찾는다. hexo 프로젝트 폴더에 들어가서 아래 같이 5.0.0 버전을 지정해서 클론을 수행한다.

1
2

$ cd PROJECT_FOLDER
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b 5.0.0 --depth 1

클론한 결과는 아래 같은 폴더 구조를 갖는다.

1
2
3
4
5
6

themes/icarus
    ├── include
    ├── languages
    ├── layout
    ├── scripts
    └── source

- 설정

이제 hexo의 구성 파일 _config.yml 에 테마를 icarus 로 지정한다.

1
2

#_config.yml
theme: icarus

그리고 icarus 구성 파일 _config.icarus.yml 에 먼저 버전을 명시하고 icarus 테마 관련 설정을 진행한다.

1

version: 5.0.0

2. Upgrade

다른 버전의 icarus theme 로 업그레이드를 하려면 기존 폴더를 백업해 두고 다시 git clone을 통해 다운로드하고 _config.icarus.yml 구성 파일에 버전과 내용을 변경해서 사용하면 된다.

예를 들어 앞서 5.0.0 버전을 백업하고 5.1.1 버전으로 업그레이드 한다면 아래 같이 기존 irarus 를 icarus_5.0.0 같이 백업해 두고 새 버전이 잘 적응되는지 확인후 정리하면 된다.

1
2

$ cd PROJECT_FOLDER/theme
$ mv icarus icarus_5.0.0

이어서 새 버전을 git clone 한다.

1

$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b 5.1.1 --depth 1

hexo의 구성 파일 _config.icarus.yml 에 새 icarus 테마 버전을 명시한다.

1

version: 5.1.1

hexo 서버를 재시작해 정상적으로 동작하는지 확인한다. 그런데 필요한 npm 모듈 업그레이들 요구한다.

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

$ hexo server
INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================

ERROR Package hexo-component-inferno's version (1.1.0) does not satisfy the required version (^2.0.2).
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save hexo-component-inferno@^2.0.2
ERROR or:
ERROR yarn add hexo-component-inferno@^2.0.2

요구에 따라 업그레이드 해주면 된다.

1

$ npm install --save hexo-component-inferno@^2.0.2

정상적으로 업그레이드 되어서 server가 실행되는 것을 확인할 수 있다. 단, hexo clean 이후 에러를 만날 수 있어 보인다.

업그레이드 후 db.json 에러 대응

clean 해서 새로 생성하기 위해서 clean 명령후 generate 를 2번 정도 실행하면 보통는 db.json 에러가 없어지는데 업그레이드 후 아래 같이 계속 발생한다.

1
2
3

INFO  === Registering Hexo extensions ===
FATAL Error: [hexo-include-markdown] Could not open db.json .
    at ReadFileContext.callback (/Users/qkboo/work-blog/thinkbee.github.io/node_modules/hexo-include-markdown/lib/orverwriteCache.js:22:15)

블로그 solved-hexo-include-markdown 를 따라 다음 같이 처리했다.

1
2
3
4

#
$ npm install hexo-include-markdown --save
# clean & generate
$ hexo clean;echo "{}" > db.json;hexo generate