• 흠… 내 블로그 링크를 걸었는데 이상한 로고가 나온다!

\public\img\og_image.png

• 위치에 있는 이미지를 바꾸면 된다
• 이 사이트를 대표하는 이미지를 og:image라고 하는 것도 알게 되었다
• https://www.opengraph.xyz/ 이 사이트에 자기 블로그 주소를 입력하면 og image가 잘 갱신되었는지 확인 할 수 있다!
• 카톡 같은 메신저에 다시 내 블로그 링크를 걸어도, 이전 이미지가 나올 수 있는데, 그것은 캐시 때문이다. (언제 갱신될지 잘 모르지만 언젠간 갱신되겠지,.)

아무 이미지도 안나올 때…

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

title: 친성의 블로그
subtitle: '최고의'
description: '친성의 개발 블로그'
keywords:
  - dev
  - developer
  - coding
  - sw
author: chinsung
language: ko
timezone: 'Asia/Seoul'
url: 'https://chinsun9.github.io/'

• url에 자신의 블로그 주소를 입력

1

url: 'https://chinsun9.github.io/'

배포하기 전에 로컬에서 미리보자

hexo server

• 위 명령어를 통해서 로컬에서 내 블로그를 미리 볼 수 있다

• 4000번 포트로 접속하면 된다

• hexo server -p 3000 과 같이 -p 옵션을 통해서 포트를 지정할 수도 있다

• 가장 좋은 점은 변경 사항이 있으면 바로바로 갱신되어 나온다

• 실험적인 시도들을 먼저 로컬에서 해보고 잘되면, 배포할 수 있다

팁

• 이미지를 수정했는데 적용이 안되어 보일 수 있는데 브라우저 캐시 문제다
• 배포해서 깃허브에 올라가면 제대로 수정된 이미지가 보인다
• 깃허브에 배포해도 그 즉시 적용이 되지 않고 조금 시간이 걸린다
• 따라서 hexo server이 좋다!

안녕

하세요

저는

친성입니다

만나서

반가워요

다시

만나요

1
2
3
4
5
6
7
8

---
title: toc 사용하기
date: 2020-09-17 09:22:30
category: blog
tags:
  - hexo
toc: true
---

• toc: true를 추가시켜주면 헤딩 태그(h1~h6)를 파싱하여 목차를 만들어 줍니다

• 처음에 적용해 보시면 목차 깊이가 2개밖에 되지 않는다고 생각할 수 있는데

• 스크롤 해보시면 숨겨져있다가 나옵니다!

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

• 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 "커밋메시지"
• 이런식으로 써서 편하게? 관리하려고 했다