• 오랜만에 블로그 이미지 들을 바꿨다
• 적용시키고 나니까 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) - 웹 폰트 설정

• 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 파일이 없어짐을 감지하고 새로 생성하게 되는데,
• 그때 변경 내역이 적용된다!

1

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

• 게시하고싶은 재생목록의 id값을 알아온다
• 재생목록을 가져온경우에는 id 뒤에 'playlist'를 붙여주면 된다
• 나는 playlist라는 카테고리를 만들고 내가 듣는 노래를 이달의 재생목록처럼 업로드할려고
• hexo에서 재생목록 표현하는 방법이 없나하고 알아보았다

유튜브 재생목록 id 알아내기

https://www.youtube.com/playlist?list=PLdEiQV70x8ZGjg6ONGRZcZKIXMosQ6k-B
id : PLdEiQV70x8ZGjg6ONGRZcZKIXMosQ6k-B

• 게시하고싶은 재생목록에 들어가면 url에 list라는 파라미터가 있는데 그게 id이다

hexo tag-plugin

1
2
3
4
5

{% youtube lJIrF4YjHfQ %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

• 기본 md에서는 표현하지 못하는 것을 표현하게 해줌
• 당연히 hexo 블로그에서만 사용가능
• 맨 마지막에 false를 붙여주면 Enable privacy-enhanced mode 라고 유튜브 쿠키를 사용하지 않도록 한다

참고

• https://hexo.io/ko/docs/tag-plugins.html#Examples

• 가끔 삭제한 페이지가 검색되거나 하는데,
• db.json을 삭제하면 알아서 갱신해준다

• 깃허브 블로그는 네이버 블로그와 같이 자동으로 검색엔진을 통해 검색되지 않는다!
• 내가 쓴 글이 구글 검색에 노출되려면 설정을 해줘야한다!

따라하기

• hexo icarus theme (react) 기준입니다!
• Hexo SEO - 하루 만에 검색 엔진 최적화 시키기 | Seongho’s Dev Story를 참고하였다

SEO 설정

• seo, search engine optimization

1
2
3
4

npm i hexo-autonofollow
npm i hexo-generator-feed
npm i hexo-generator-seo-friendly-sitemap
npm i hexo-generator-robotstxt

• hexo에서 seo 관련 플러그인이 있는데 설치한다
• 참고 ; 다른 seo관련 글에서는 hexo-auto-canonical을 설치하라고 하는데 react로 되어있는 최신버전의 icarus 테마에서는 표준링크을 자동으로 생성한다. 그래서 설치하지 않아도 된다!

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

deploy:
  type: git
  repo: 'https://github.com/chinsun9/chinsun9.github.io'
  branch: master
# 새로 추가
nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com
feed:
  type: rss2
  path: rss2.xml
  limit: 20
sitemap:
  path: sitemap.xml
  tag: false
  category: false
robotstxt:
  useragent: '*'
  allow:
    - /
  sitemap: https://chinsun9.github.io/sitemap.xml

• _config.yml 최 하단에 deploy 설정 밑에 새로 추가한다
• sitemap: https://여러분의깃헙유저네임.github.io/sitemap.xml 주의!

• 나는 위 과정에서 hexo-component-inferno 패키지를 설치하라고 해서 설치했다

• 또 패키지 4개를 설치하면서 warn 경고 메시지가 자꾸 출력되는데 나는 무시했다

• 여기까지 했다면 hexo d -g명령으로 배포한다

• 참고 ; hexo d -g는 hexo deploy --generate명령과 동일하다

• 참고 ; hexo deploy --generate는 hexo generate & hexo deploy와 동일하다

• 그러면 public 디렉터리에 rss2.xml, sitemap.xml, robots.txt 이 3개의 파일이 보이면 성공이다

검색 엔진 등록하기

구글

• 구글 서치 콘솔로 이동하여 시작하기를 누른다

• URL 접두어를 선택하고, 자신의 깃헙 주소를 입력하고 계속한다

• 소유권 확인 과정이 있는데, html 파일을 다운받고,
• hexo 디렉터리에서 public 디렉터리 밑에 다운받은 파일을 위치시키고
• hexo d하려 배포한다
• 잠시 기다렸다가 확인버튼을 누른다

• 소유권이 확인되면 속성으로 이동 버튼을 누른다

• 1. sitemaps 메뉴를 클릭한다
• 2-1. 사이트맵 URL 입력에 sitemap.xml을 입력하고 제출 버튼을 누른다
• 2-2. 사이트맵 URL 입력에 rss2.xml을 입력하고 제출 버튼을 누른다
• 상태에 보면 성공이 아닐 수도 있는데 새로고침 해보면 성공으로 보일 것이다
• 하루정도? 지나면 구글에서 내 글을 검색할 수 있다!

네이버

• 네이버도 구글과 비슷하므로 간단하게 넘어간다

• 네이버 웹마스터 도구에 들어간다
• 사이트 등록에 내 깃헙 블로그 주소를 입력하면 소유권확인 과정이 나온다
• 구글과 똑같이 html파일을 다운받고 public 디렉터리에 파일을 옮기고 hexo d하여 갱신한다

• 왼쪽 메뉴를 보면 요청 > rss제출로 들어가
• 자신의 rss2.xml 주소를 입력하고 확인버튼을 누른다

• 요청 > 사이트맵 제출로 들어가
• sitemap.xml을 입력하고 확인버튼을 누른다
• 네이버 등록도 끝이 났다!

다음

• 다음은 약간 다르다
• 다음 검색등록에 들어간다
• 신규등록하기 버튼을 누른다
• 약관에 동의한다

• 폼을 작성한다. * 마크가 붙어있는 것은 필수 항목이다

• 심사가 끝나면 이메일로 알려준다고 하니 기다리자..
• 여기까지 다음 등록도 끝났다!

팁

언제부터 검색이 될까..?

• 검색 엔진에 등록하면 바로 검색 노출은 안되고, 시간이 필요하다
• 하루 정도 걸린다고 생각하자

표준링크 확인하기

• hexo-auto-canonical를 설치하지 않아도 된다고 했는데, 알아보니까 자동으로 생성해주고 있었다!
• 확인하는 방법은..

• 내 블로그에서 아무 글이나 클릭해서 들어간다
• F12로 개발자도구를 연다
• ctrl f 로 검색창을 연다음에 canonical를 검색한다. 그러면 위와같은 link 태그가 있으면 된다!

• hexo icarus theme 에서는 disqus를 기본으로 지원한다
• 우리는 disqus에서 shortname을 알아내서 적어주기만 하면 된다
• 너무 간편하다!

따라하기

• hexo icarus theme 기준입니다!
• 스샷아래 설명이 있는데
• 그냥 스샷 그대로 따라가면 됩니다

DISQUS 회원가입

• DISQUS에 회원가입하고 로그인한다

DISQUS에서 사이트 추가(Shortname만들고 확인하기)

• GET STARTED 버튼 클릭

• I want to install Disqus on my site 버튼 클릭

• 항목 작성

• 스크롤을 내려서 Basic 선택

• 스크롤을 내려서 ...with Universal Code 선택

• 뭐라뭐라 막 나오는데, 다 무시하고 스크롤을 내려서 Configure 버튼 클릭

• Website URL 항목만 채우고 Complete Setup 버튼 클릭

• 하단 Dismiss Setup 버튼을 클릭하고,

• 상단에 Edit Settings 버튼 클릭

• Shortname 항목에서 내 Shortname을 확인하고 복사한다

_config.icarus.yml에 Shortname 설정하기

1
2
3
4

comment:
  type: disqus
  # Disqus shortname
  shortname: 'chinsun9'

• 이렇게 설정해주면 끝..!
• 놀랍게도 적용이 완료되었다!

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파일도 렌더링되어 나타나게 된다

• hexo에서 포스트 하는법!
• CRUD로 비유하여 알려줍니다

C

• 새 포스트 쓰기

  hexo new "새 포스트"

• 위 명령으로 새 포스트를 만든다

• source/_posts/새-포스트.md

• 경로에 새로운 md가 만들어 진다

• 해당 md를 열어 마크다운을 활용해서 글을 쓴다

• 마크 다운 사용법은 여기 참고한다

• hexo 사용법은 여기 참고한다

R

• 포스트 읽기
  hexo server
• 위 명령으로 로컬에서 내가 쓴 포스트가 잘 나오는지 확인해본다

U

• 포스트 수정하기
• source/_posts 경로에서 수정하고 싶은 포스트를 찾아 수정한다

• 업데이트 시각은 자동 갱신되니까 걱정하지 말도록

D

• 포스트 삭제하기

• source/_posts 경로에서 삭제하고 싶은 포스트를 찾아 삭제한다
• 그냥 글을 숨기고 싶다면 source 디렉터리 바깥으로 뺀다

APPLY

• 위 과정을 통해서 포스트를 CRUD 해봤다
• 이제 깃허브 페이지에 적용시키고 싶다면 아래 명령을 사용한다
  hexo generate & hexo deploy