게시 됨 업데이트 됨blog9분안에 읽기 (약 1324 단어)

Hexo 버전 업그레이드, 경고 지우기

버전 업그레이드

오랜만에 블로그를 정비하다가 hexo 버전을 업그레이드 하고 싶었다.
node가 그렇게 익숙하진 않아서 구글링으로 찾아보니 그냥 원하는 버전을 npm으로 설치하면 된다고 한다.
How can I upgrade hexo? #4572

7.0.0버전이 최신이긴 한데 이슈 생기면 대응하기 귀찮으니까 그냥 바로 아래의 6.3.0 으로 업그레이드 후 실행했다.

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
npm i hexo@6.3.0
hexo s

WARN  YAMLException: please see https://github.com/hexojs/hexo/issues/4917
FATAL 
TypeError: Cannot read property 'length' of undefined
    at composeNode (D:\workspace\blog\node_modules\hexo\node_modules\js-yaml\lib\loader.js:1492:60)     
    at composeNode (D:\workspace\blog\node_modules\hexo\node_modules\js-yaml\lib\loader.js:1441:12)
    at readDocument (D:\workspace\blog\node_modules\hexo\node_modules\js-yaml\lib\loader.js:1625:3)
    at loadDocuments (D:\workspace\blog\node_modules\hexo\node_modules\js-yaml\lib\loader.js:1688:5)
    at Object.load (D:\workspace\blog\node_modules\hexo\node_modules\js-yaml\lib\loader.js:1714:19)
    at Hexo.yamlHelper (D:\workspace\blog\node_modules\hexo\lib\plugins\renderer\yaml.js:20:15)
    at Hexo.tryCatcher (D:\workspace\blog\node_modules\bluebird\js\release\util.js:16:23)
    at Hexo.<anonymous> (D:\workspace\blog\node_modules\bluebird\js\release\method.js:15:34)
    at D:\workspace\blog\node_modules\hexo\lib\hexo\render.js:81:22
    at tryCatcher (D:\workspace\blog\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\workspace\blog\node_modules\bluebird\js\release\promise.js:547:31)
    at Promise._settlePromise (D:\workspace\blog\node_modules\bluebird\js\release\promise.js:604:18)
    at Promise._settlePromise0 (D:\workspace\blog\node_modules\bluebird\js\release\promise.js:649:10)
    at Promise._settlePromises (D:\workspace\blog\node_modules\bluebird\js\release\promise.js:729:18)
    at _drainQueueStep (D:\workspace\blog\node_modules\bluebird\js\release\async.js:93:12)
    at _drainQueue (D:\workspace\blog\node_modules\bluebird\js\release\async.js:86:9)
    at Async._drainQueues (D:\workspace\blog\node_modules\bluebird\js\release\async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (D:\workspace\blog\node_modules\bluebird\js\release\async.js:15:14)
    at processImmediate (internal/timers.js:464:21)

??? 뭐야 갑자기 왜…

당황했지만 일단 에러 로그에서 들어가보라고 나온 github issue 를 들어가보니 비슷한 오류에 대해서 이미 많은 토론이 진행되어 있었다.

6.1.0 버전으로 올렸을때 이런 이슈가 발생했고(2,3 도 비슷한듯) 해결책은 크게 두가지 였는데

  1. 6.0.0 으로 다운그레이드
  2. js-yaml 을 4.1.0 으로 업그레이드

이와 별개로 현재 사용중인 icarus 테마도 지원하는 버전이 있을거라고 생각해서 들어가보니 5.0.1 버전에서 hexo 6에 대한 언급이 있어서 이참에 최신버전으로 올렸다.

hexo-icarus-theme 5.0.1 release note

일단 위 내용들을 고려해서 6.0.0 으로 다운그레이드를 시도 했고 다시 실행해보니 정상적으로 실행되었다.

1
2
npm i hexo@6.0.0
hexo s

아직 의문인 점은 6.3.0 버전에서 설치되는 js-yaml은 분명 4.1.0 인데 서버 실행 시 오류가 발생하고 6.0.0으로 한번 내렸다가 다시 6.3.0 으로 올리면 정상적으로 실행된다는 점이다 … ㅎㅎ;;

거슬리던 경고들

하는 김에 그동안 거슬렸던 경고들도 몇개 있었는데 대략 아래와 같은 내용이었다.

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
INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
WARN  Theme configurations failed one or more checks.
WARN  Icarus may still run, but you will encounter unexcepted results.
WARN  Here is some information for you to correct the configuration file.
WARN  [
  {
    keyword: 'const',
    dataPath: '.widgets[7].type',
    schemaPath: '#/properties/type/const',
    params: { allowedValue: 'profile' },
    message: 'should be equal to constant'
  },
...
...
]

로그로 봤을땐 테마의 위젯 설정값이 뭔가 잘못된거 같길래 한참 이것저것 검색하다가 위젯 설정값을 찬찬히 보니까 type의 값을 주석처리 해놔서 발생한 오류였다.
진짜 이거 찾느라 시간 보낸거 아까워서 ㅠㅠ 나처럼 바보짓 하는 사람 없길 바라면 적는다.

1
2
3
4
5
6
7
- # Where should the widget be placed, left sidebar or right sidebar
  position: left
  type: #adsense
  # AdSense client ID
  client_id: ""
  # AdSense AD unit ID
  slot_id: ""

작업들을 하면서 느끼는건데 Jekyll을 사용해서 샘플로 만들어봤을때 너무 느린 속도가 싫어서 Hexo를 선택했는데 포스팅한 글을 git으로 동시관리가 안되고 별도 repo 설정해서 이중관리 해야하는 부분이나 영어보다 중국어 레퍼런스가 더 많아서 관련 자료 찾는데 쉽지 않은 부분 때문에 요즘엔 다른 엔진으로 갈아타는건 어떨까 하는 생각도 든다.

일단 블로그 글도 별로 없는데 이런거 고민할 필요는 없을거 같기도 하고 ㅋㅋㅋ 나중에 다시 생각해보자

 게시 됨 업데이트 됨blog2분안에 읽기 (약 371 단어)

카카오톡 오픈그래프 캐시 삭제 방법

블로그 대표 이미지를 변경했음에도 카카오톡에 공유 시 기존 이미지가 계속 나오는 문제가 있었다.

블로그 링크 이미지 변경 전

사이트의 소스코드의 태그를 확인해봐도, 오픈그래프 적용을 확인해볼수 있는 페이스북의 Sharing Debugger 사이트에서도 확인했을 때 문제가 없었으니

카카오에서 이미지 캐시가 문제라고 생각되서 구글링을 해봤고 역시 삭제하는 방법을 찾을 수 있었다.

삭제방법

  1. 카카오 개발자 사이트의 초기화 도구에서 OG(Open Graph) 캐시로 들어간다.

  2. 개발자 계정이 없다면 카카오 계정으로 간단하게 가입하고 있으면 로그인

  3. 삭제하려는 URL을 입력하고 초기화 한다.

og 캐시 초기화

이제 다시 카카오톡에 링크를 공유해보면 바뀐 이미지가 나오는걸 확인할 수 있다.

블로그 링크 이미지 변경 후

참고로 open graph 라는건 html 메타 태그의 종류 중 하나로 사용자가 링크를 sns의 입력창에 입력하면 크롤러가 미리 그 웹사이트를 방문해서 HTML head의 오픈그래프 메타 데이터를 긁어온다.

og:title, og:description, og:image 등 태그의 데이터를 바탕으로 미리보기 이미지와 설명을 만들어서 보여주게 된다.

 게시 됨 업데이트 됨blog8분안에 읽기 (약 1198 단어)

Github Page와 Hexo를 활용하여 블로그 개설하기

블로그를 시작하며

그동안 OneNote, Notion 등 노트프로그램을 사용하여 단편적으로 공부하던 내용을 블로그를 통해 좀 더 체계적으로 정리하고 다른사람들과 공유하고 싶은 생각에 블로그를 시작하기로 했다.(끈기가 부족한 편이라 얼마나 갈진 모르겠다^^;;)

Github + Hexo

일반적인 블로그를 생각하면 네이버 블로그, 티스토리, 혹은 미디엄, 브런치 등을 떠올릴 수 있지만 기술블로그를 표방하는만큼 github page를 이용하기로 마음먹었다. github page에서는 username.github.io 도메인을 무료로 제공하여 정적 웹페이지를 무료 호스팅해주고 있다.

github page에서 사용할 정적 웹페이지 생성기는 생각보다 다양한 종류가 있지만 마크다운 문서를 지원하면서 국내에서 가장 많이 사용되는 두가지는 다음과 같다.

  1. Jekyll
    1. Ruby 기반
    2. 다양한 테마, 플러그인 지원
    3. 환경설정 및 커스터마이징이 다소 복잡하며(특히 윈도우에서) 글이 많아지면 빌드속도가 느려진다는 이야기가 있다.
  2. Hexo
    1. Javascript(Node.js) 기반
    2. 마찬가지로 다양한 테마, 플러그인 지원
    3. npm을 통해 쉽게 설치 가능하며 Github 배포과정도 편하다.

처음엔 Jekyll을 사용하여 초기설정을 해봤는데 윈도우에서 설정이 너무 복잡하고 오류도 많이나서 익숙한 Node.js기반의 Hexo로 시작하기로 했다.

1. 설치

1.1 사전준비

  • Node.js 설치
  • Git 설치
  • Github 가입 후 신규 Repository 2개 생성

각 프로그램 설치는 이미 많은 문서들이 있기 때문에 별도로 언급하진 않겠다. Repository를 2개 생성하는 이유는 각각 블로그 운영, hexo 설정을 저장할 목적이며 블로그로 운영할 Repository name은 USERNAME.github.io 의 Public으로 생성한다.

2. Hexo 설치 및 블로그 생성

Hexo설정을 저장할 github repository를 clone 한 후 해당 위치에서 작업한다.

1
2
3
4
npm install -g hexo-cli
hexo init $디렉토리명
cd $디렉토리명
npm install

2.1 설정파일 수정

블로그 생성이 정상적으로 완료되었으면 이제 설정파일을 수정해보자.

root 경로에 _config.yml파일을 확인할 수 있는데 기본적인 블로그 설정은 이곳에서 관리한다. 자세한 내용은 공식문서에서 확인할 수 있다.

Site 설정

블로그 이름 및 간략한 소개를 설정한다.

1
2
3
4
5
title: Hello World
subtitle: No pain, No gain
description:
author: Jaeyong Yoo
...

URL 설정

블로그 URL 정보를 설정한다.

1
2
3
4
url: https://USERNAME.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

Github 설정

배포할 Github Page의 Repository 정보를 입력한다.

1
2
3
deploy:
  type: git
  repo: https://github.com/yoo0926/yoo0926.github.io

정상적으로 설치와 설정이 끝났다면 아래 명령어로 서버를 실행시켜 웹브라우저에서 http://localhost:4000 으로 접속하여 확인할 수 있다.

1
hexo server #or hexo s
  • 만약 로컬에서 실행 시 permission denied 가 발생하는 경우가 있다면 그냥 port를 변경해서 테스트하자
1
hexo server -p 8088

3. Github에 배포하기

로컬에서 테스트가 완료되었다면 이제 앞서 언급한 Github Page의 정적 웹페이즈 호스팅을 사용해보자.

Hexo Generate and Deploy

github에 배포하기 위해선 hexo-deployer-git 이라는 플러그인을 설치해야 한다.

1
npm install hexo-deployer-git

플러그인 설치가 완료되면 배포할 리소스를 생성하여 앞서 _config.yml 파일에서 설정한 배포설정의 저장소로 배포하게 된다.

1
2
3
4
hexo generate #hexo g
hexo deploy #hexo d
#동시에 하고 싶으면
hexo deploy --generate #hexo d -g

생성된 리소스는 USERNAME.github.io 저장소에 배포되며 https://USERNAME.github.io로 접속하게되면 블로그를 확인할 수 있다.

주의

간혹 deploy가 정상적으로 되지 않는다면 아래 명령어로 clean 후 다시 배포를 해보자.

1
2
hexo clean
hexo d -g

이상으로 기본적인 블로그 생성과 관련된 내용을 마무리 한다.

  • 추가메모
1
2
hexo new 포스트명 //기본설정값 draft 로 바꿔놓음
hexo publish 포스트명 //draft -> posts 로 이동

Reference
Hexo로 github 블로그 만들기 (Hueman 테마)
Github Page와 Hexo를 통해 30분만에 기술 블로그 만들기
Hexo 공식문서

팔로우

카테고리

최근 글

아카이브

태그

JWT1
algorithm3
blog3
book21
docker1
functional2
git1
googleTagManager1
hexo2
interview1
java3
kakao1
kakaotalk1
open graph1
postgresql1
programmers2
spring17
sql1
web1

업데이트 소식 받기

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.
×