• 오랜만에 블로그 이미지 들을 바꿨다
• 적용시키고 나니까 128x128 사이즈에 안어울리는 것 같아서
• 크기 제한을 풀었다

1
2
3

{/* <figure class="image is-128x128 mx-auto mb-2"> */}
<figure class="image mx-auto mb-2">

• is-128x128 을 없애준다
• 또는 자신의 고유한 클래스를 넣어주고 커스텀해도된다

• 기본 한글 폰트가 너무 구려서 웹폰트라는 것을 적용시켜보았다
• http://deminoth.github.io/google-font-kor/ 한글 폰트
• 나눔 고딕을 적용해보았다

환경

• 나는 hexo에서 icarus 테마를 사용하고 있다

폰트 고르기

• https://fonts.google.com/?subset=korean

theme 코드 변경

1
2
3
4
5
6
7
8
9
10

// 51 line
const fontCssUrl = {
  default: fontcdn("Ubuntu:wght@400;600&family=Source+Code+Pro", "css2"),
  cyberpunk: fontcdn("Oxanium:wght@300;400;600&family=Roboto+Mono", "css2"),
  nanumgothic: fontcdn("Nanum+Gothic:wght@400&family=Roboto", "css2"),
};

// 151 line
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href={fontCssUrl['nanumgothic']} rel="stylesheet" />

• fontcdn 이라는 메서드가 있어서 그냥 활용했다
• icarus theme config 파일의 fontcdn이 google로 되어있어서 그대로 사용할 수 있었다

1
2

$family-sans-serif ?= 'Nanum Gothic', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
// $family-sans-serif ?= Ubuntu, Roboto,'Nanum Gothic Coding', 'Open Sans', 'Microsoft YaHei', sans-serif

• 나눔고딕을 3순위로 했는데, 영어랑 한글이랑 부자연스러운 것 같아서 그냥 나눔고딕을 1순위로 올렸다

1

$article-font-size ?= 1.3rem

• 하는 김에 본문 폰트 사이즈도 키워주었다

확인하기

1
2

hexo generate
hexo server

• 잘 갱신되었는지 확인한다

배포하기 전 확인하기

• hexo server에서는 최신 css 상태를 반영하는데,
• 그런데 실제로 배포될 때는 css파일이 갱신이 안된다
• 그래서 public/css/default.css 파일을 삭제하고, 다시 hexo generate로 생성해야한다
• 그리고 배포한다

참고

• Jekyll 기반의 GitHub Page 생성(3) - 웹 폰트 설정

• 깃헙 페이지에 google analytics 를 적용하고,
• 사용자 통계를 받아보자

환경

• 나는 hexo에서 icarus 테마를 사용하고 있다

애널리틱스 계정 생성

• 계정 생성이라는 것을 먼저해주었다

• https://analytics.google.com/analytics/web/provision/?hl=ko&pli=1#/provision
• 측정 시작이라는 버튼을 누른다

• 계정 이름을 적당히 입력한다

• 속성 설정을 적당히 입력한다

• 비즈니스 정보를 입력한다
• 처음 애널리틱스를 사용해 보아서 이게 맞나 싶었는데, 이 과정을 거쳐야한다..

애널리틱스 데이터 스트림 설정

• 게정 생성을 완료하면 이런 화면이 나오는데, 웹을 선택한다

• https, 내 깃헙 주소, 스트림 이름을 입력하고 스트림 만들기를 선택한다

• 측정 ID 를 복사한다
• // 다른 블로그들을 봤을 때, 예전에는 추적 ID였던 것이 측정 ID로 용어가 바뀌였다

hexo config.yml google_analytics 설정

• 나는 hexo icarus 테마를 사용하고 있다
• icarus 테마 설정파일인 _config.icarus.yml 에 위처럼 추가해주었다
• 내 기준으로 290라인 정도에 위치하고있다

적용된 것 확인하기

• hexo generate 명령어로 현재 설정이 적용이 되었나 확인해보자
• vscode에서 ctrl shift f 를 눌러 검색창을 띄우고, 자신의 측정 ID를 검색해보자
• 그러면 생성된 모든 .html 파일에서 검색되는 것을 확인할 수 있다

• 그러면 이제 배포하고, 약간 기다리면 애널리틱스 대시보드에서 카운팅 되는 것을 확인할 수 있다

• icarus 테마를 적용하고 다 좋았지만,
• 커스텀하고 싶었던 것들이, 칼럼들의 비율과 가로 넓이가 너무 좁다는 것이였다
• 한번 커스텀해보자

themes 폴더에 icarus 테마깔기

• npm install hexo-theme-icarus ; npm으로 icarus 테마를 설치할 수 있는데,
• 이 방법으로 설치한 테마는 커스텀하여 사용하기에는 구조가 이상한 것 같아서(node_modules 안에서 icarus패키지를 수정..)
• 테마 설치는 /themes 디렉터리 아래에서 클론 방식으로 하는 것을 추천한다
• git clone --depth 1 https://github.com/ppoffice/hexo-theme-icarus.git
• 그냥 클론하게되면 커밋 내역까지 다 불러오느라 용량이 커진다
• --depth 1을 붙여 최신 상태만 받아 올 수 있다
• 필요없는 .git 폴더를 삭제해도된다

• 참고 ; git clone 커밋 히스토리없이 가볍게 클론하기

1

theme: icarus

• 위에서 설치한 테마 디렉터리명이랑 _config.yml 의 theme 항목의 값이랑 동일해야한다

themes
└── icarus

• 디렉터리 구조는 이렇다

칼럼 비율 조절하기

• 수정하기 용이하도록 themes/icarus 경로에서 vscode를 실행한다
• 지금부터 설명하는 파일의 경로는 themes/icarus 기준의 상대경로이다

1
2
3
4
5
6
7
8
9

function getColumnSizeClass(columnCount) {
  switch (columnCount) {
    case 2:
      return 'is-3-tablet is-3-desktop is-3-widescreen'; // 여기 수정
    case 3:
      return 'is-4-tablet is-4-desktop is-3-widescreen';
  }
  return '';
}

• layout/common/widgets.jsx 로 가보면 getColumnSizeClass라는 함수가 있다
• 여기에 자신의 columnCount 에 맞게 수정한다
• columnCount 의 기본값은 2라서 case 2인 경우를 수정한다
• 나는 is-3으로 수정했다

1
2
3
4
5
6
7
8
9
10
11

<div
  class={classname({
    column: true,
    'order-2': true,
    'column-main': true,
    'is-12': columnCount === 1,
    'is-9-tablet is-9-desktop is-9-widescreen': columnCount === 2, // 여기 수정
    'is-9-tablet is-9-desktop is-6-widescreen': columnCount === 3,
  })}
  dangerouslySetInnerHTML={{ __html: body }}
></div>

• layout/layout.jsx 하단을 보면 위 코드가 나오는데
• 나는 is-9로 수정해주었다

• 전체 12에서 기본값은 프로필이 들어있는 영역이 4, 게시글 영역이 8이였다
• 위처럼 수정하게되면 우선 그 비율을 3, 9로 변경해준 것이다
• 프로필 영역을 좁게, 게시글 영역은 크게 바뀐 것이다
• 이 12라는 것은 칼럼들의 상위에 있는 container의 크기를 기준으로 12등분한 것이다
• 그럼 이 container의 크기를 늘려보자

container 크기 늘리기

1
2
3
4
5

$gap ?= 16px
$tablet ?= 769px
$desktop ?= 1288px
$widescreen ?= 1480px
$fullhd ?= 1672px

• include/style/base.styl 로 가서 23라인 정도에 이런 코드가 보일 것이다
• 나는 $widescreen, $fullhd의 값을 각각 200px 씩 늘려주었다
• 그랬더니 container가 커졌다!

커스텀 css 적용하기

• 나는 보통 글을 쓸때, 그림을 먼저보고주고 그 아래에 그에 대한 설명을 하는 편이다
• 그래서 그림 위에있는 글이 아래 사진과 별로 관계가 없다는 것을 마진을 주어 표현하고 싶다
• 그런데 매번 그림이 나올 때 마다, <br>을 할 수도 없고…
• 그래서 아예 게시글 영역 안에 있는 이미지 태그에 대한 커스텀 css를 적용시킨다

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

&.article
    .article-meta, .article-tags
        color: $text-light

    .article-meta
        overflow-x: auto
        margin-bottom: .5rem

    .article-more
        @extend .button.is-light

    .content
        word-wrap: break-word
        font-size: $article-font-size

        img                     // 여기 추가
            margin-top: 30px    // 여기 추가

• .styl 에 대한 문법은 잘모르지만,
• 들여쓰기로 셀렉터들의 관계가 정의되어있고
• 내가 원하는 게시글 영역의 이미지 태그가 적용되려면
• .article .content 아래에 img 태그에 대한 css를 정의해주었다

배포, 적용시키기

• 이렇게 변경하고 나고 배포를해야는데 그냥 배포하면 적용이 안된다
• public/css/default.css 를 삭제해준다
• 그리고 배포를 하면, hexo에서 default 파일이 없어짐을 감지하고 새로 생성하게 되는데,
• 그때 변경 내역이 적용된다!

favicon

logo

avatar

nofollow

• https://ko.wikipedia.org/wiki/Nofollow
• SEO 설정을 하면서 알게된 것이다
• hexo-autonofollow 모듈을 설치해
• 외부 링크에 nofollow 속성을 넣어준다
• 참고 ; 구글 서치 콘솔 가이드

• 너무 많은 포스트들 속에.. 파묻혀있는 새 글

draft 사용하기

1

hexo new draft "hexo에서 초안, 작성중 사용하기"

layout

• hexo에서는 새 포스트를 생서할때 layout이라는 것을 지정할 수 있다
• 기본적으로 3개의 레이아웃이 있다. post, draft, page
• post레이아웃은 기본값이다. source/_posts/ 아래에 생성되게 만든다
• page레이아웃은 페이지를 생성한다. source/ 아래에 생성되게 만든다
• draft레이아웃은 source/_drafts/ 아래에 생성되게 만든다

Draft

• source/_drafts/ 아래에 생성된 md들은 기본적으로 렌더링 되지 않는다
• 즉, 배포해도 블로그에 표시되지 않는다
• 따라서 작성중인 글을 노출시키지 않을 수 있다
• 또 포스트가 많아지면서 source/_posts 디렉터리가 복잡해지는데, 여기서 스크롤해가면서 작성중인 글을 힘들게 찾을 필요가 없다

작성완료하는 법

• 포스팅이 끝나면 이제 _posts 디렉터리로 옮기면 된다

1
2
3

hexo publish [layout] [작성 완료한 포스트 파일명]

hexo publish aws aws-공부

• 드래그 앤 드랍으로 직접 posts 폴더로 옮겨줄 수도 있는데
• publish 명령을 사용하게 되면 layout을 지정할 수 있다
• scaffolds 디렉터리에 만들어준 틀대로 front-matter가 바뀐다
• layout은 생략하면 기본값으로 post가 적용된다

로컬에서 테스트하기

• 아쉽게도 우리가 알고 있는 hexo server로는 draft가 노출되지 않는다

1

hexo server --draft

• 근데 --draft 옵션을 사용하면 source/_drafts 디렉터리에 있는 md파일도 렌더링되어 나타나게 된다

• 루트 디렉터리에 404.html이 존재하면 기존 404 페이지를 대신해 보여준다

• hexo에서 적용시키려면 source 디렉터리에 404.html을 만들면된다

  

• 그런데 hexo에서 배포할때 자동으로 테마에 맞게 지정된 레이아웃으로 변환한다

• 이를 막기 위해 404.html의 Front-matter 에 layout: false로 지정한다

1
2
3
4
5

---
layout: false
---

<!DOCTYPE html>

Front-matter

• hexo에서 파일 최상단에 적는 yml을 Front-matter라고 한다

1
2
3
4
5
6
7
8
9
10
11

---
title: 커스텀 404 페이지 만들기
toc: true
category: blog
tags:
  - hexo
  - 404
  - custom page
thumbnail: /images/커스텀-404-페이지-만들기20200921/preview.jpg
date: 2020-09-21 09:15:59
---

404 소스 출처

• https://codepen.io/purplexmoss/pen/PoPyzMW

• 나도 멋진 깃허브 블로그를 만들어보고 싶었다. (지금 이 블로그!)

• Hexo 라는 블로그 프레임워크가 있었다

• 한글로 된 공식 문서도 있어서 접근하기 좋았다

• 나는 카인드패밀리님의 영상을 보고 따라하면서 만들어 보았다

• Hexo를 이용하면 멋진 블로그를 뚝딱하고 만들 수 있다

• 간단하게 설명하자면,

• Hexo에서 원하는 테마를 받아와서 글을 쓰고, 내 github.io 저장소와 연결하고 배포하는 거다

따라하기

• 먼저 nodejs와 git이 설치되어 있어야 한다
• 또, https://chinsun9.github.io/ 와 같은 url을 얻고싶으면 {자기 깃허브 아이디}.github.io이름의 저장소가 있어야한다
• 준비되었다면 cmd를 열고 hexo cli를 전역으로 설치한다
• 나는 vscode에서 터미널을 열어서 진행했다. vscode가 최고다

1

npm i hexo-cli -g

• hexo 프로젝트 생성

• 적당한 빈 디렉터리로 이동한다음에 아래 명령어를 실행한다

• 혹시 다른 테마를 적용하길 원하는 사람은 테마 적용방법을 찾아 보기 바란다. 여기선 icarus를 설명한다

1
2

hexo init
npm i hexo-theme-icarus

• 다음엔 icarus테마를 위한 config를 생성한다

1

hexo config theme icarus

1
2
3
4
5
6
7
8

INFO  Validating config
ERROR {
  err: [Error: EISDIR: illegal operation on a directory, read] {
    errno: -4068,
    code: 'EISDIR',
    syscall: 'read'
  }
} Plugin load failed: %s hexo-theme-icarus

• 위 같은 오류가 나면 무시하고 다시 명령을 실행한다

1

hexo config theme icarus

1
2
3
4
5
6
7

INFO  === Checking package dependencies ===
ERROR Package bulma-stylus is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
ERROR or:
ERROR yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

• 그러면 다른 오류메시지가 나온다
• 이러이러한 패키지가 필요하다하면 추가로 설치해준다

1

npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

• 현재까지 설치된 패키지 목록

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

{
  // ...
  "hexo": {
    "version": "5.2.0"
  },
  "dependencies": {
    "bulma-stylus": "^0.8.0",
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-inferno": "^0.1.3",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-icarus": "^4.0.1"
  }
}

• 종속성이 해결되면 다시 실행

1

hexo config theme icarus

1
2
3
4
5
6
7
8
9

INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
WARN  None of the following configuration files is found:
WARN  - C:\git\tmp blog\_config.icarus.yml
WARN  - C:\git\tmp blog\node_modules\hexo-theme-icarus\_config.yml
INFO  Generating theme configuration file...
INFO  C:\git\tmp blog\_config.icarus.yml created successfully.
INFO  To skip configuration generation, use "--icarus-dont-generate-config".
INFO  === Registering Hexo extensions ===

• 위처럼 메시지가 나오면 성공이다

• 이제 최상위 디렉터리에 _config.yml 이라는 파일이 있는데 아래 처럼 수정한다

• 블로그가 될 저장소 주소를 적어준다

1
2
3
4
5

theme: icarus
deploy:
  type: git
  repo: https://github.com/chinsun9/chinsun9.github.io
  branch: master

• 여기까지 성공적으로 됬다면 로컬에서 확인해 볼 수 있다

1

hexo server -p 3000

• 새 포스트를 써보자

1

hexo new "타이틀"

1
2
3
4

INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Created: C:\git\2020-github-pages-hexo\source\_posts\new-post20200916.md

• 위와같은 메시지가 나오는데 vscode터미널같은 경우 ctrl+click을 통해 바로 저 파일을 열어 볼 수 있다

• 열어서 열심히 md 언어로 포스팅을 하고 저장한다

• 이제 배포를 해보겠다

• hexo-deployer-git을 설치한다

1
2

npm i hexo-deployer-git -g

• 그러면 다음 명령어를 사용할 수 있다

1
2

hexo generate
hexo deploy

• 위처럼 명령어를 두번쓰기 귀찮아서 명령어 하나로 묶어 버렸다
• 하는 김에 hexo 커밋까지..

1
2
3
4
5
6
7
8
9
10
11

{
  // ...
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "test": "hexo server",
    "start": "hexo generate & hexo deploy & git add . & git commit -m "
  }
  // ...
}

• 글을 하나 쓰고 나면 npm start 명령어로 배포하고 커밋한다.
  npm start "커밋메시지"
• 이런식으로 써서 편하게? 관리하려고 했다