2019-09-01 게시 됨2022-04-24 업데이트 됨diy29분안에 읽기 (약 4303 단어)

hexo icarus 테마로 Github 블로그 만들기

필수 요소

Hexo를 이용하여 블로그를 만들기에 앞서 아래 요소를 먼저 설치

git
github.com에 repository 2개 생성하기
- 사용자ID-archives
- 사용자ID.github.io
node.js
npm

hexo.io 사이트에는 이를 위한 설치 방법이 간단하게 요약이 되어 있지만, 이것만으로 자신이 원하는 형태의 블로그를 운영하기는 쉽지 않다. 이 글은 아무것도 설치 되어있지 않은 상태의 윈도우 사용 컴퓨터 사용자를 기준으로, d드라이브에 hexo 블로그를 생성하고 운영하는 방법을 차례대로 따라할 수 있도록 정리한 것이다.

Git 설치

https://git-scm.com/download/win 에서 64-bit Git for Windows Setup 다운로드
설치 (설치 경로는 바꾸지 않음)
exe 파일은 삭제

nodejs 설치

https://nodejs.org/en/download/ 에서 Windows Installer (.msi) 64-bit 다운로드
설치 (설치 경로는 바꾸지 않음)
(선택사항) 설치 중 Tools for Native Modules 에서 Automatically install the necessary tools에 체크
- chocolately, python, visualstudio 등 여러가지 패키지가 설치됨
- 설치 후, 리부팅 필요
환경 변수 구성: 제어판> 고급 시스템 설정 보기> 고급> 환경 변수를 열고, 사용자 변수와 시스템 변수에 다음을 새로만들기 혹은 추가
- PATH 변수에 아래의 변수값 지정되어 있는지 확인 (없으면 새로 만들기)
  - 변수값: C:\Program Files\nodejs

git-bash 실행 후, hexo 및 icarus 테마 설치

1 2	cd d:/dev npm install -g hexo-cli

mkdir myblog
hexo init myblog               // myblog 폴더가 비어 있어야 함.
cd myblog
git clone --depth 1 https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
hexo config theme icarus

아래와 같은 error 메세지가 나오면,

ERROR Package bulma-stylus is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Package hexo-component-inferno is not installed.
ERROR Package inferno is not installed.
ERROR Package inferno-create-element 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 hexo-component-inferno@^0.13.0 inferno@^7.3.3 inferno-create-element@^7.3.3
ERROR or:
ERROR yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3 hexo-component-inferno@^0.13.0 inferno@^7.3.3 inferno-create-element@^7.3.3

패키지를 추가 설치한 후

1	npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3 hexo-component-inferno@^0.13.0 inferno@^7.3.3 inferno-create-element@^7.3.3

다시 실행

1	hexo config theme icarus

이후에 아래와 같은 메세지가 나오면 _config.icarus.yml이 생성되면서 완료된다.

INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
WARN  None of the following configuration files is found:
WARN  - D:\dev\stemwith\_config.icarus.yml
WARN  - D:\dev\stemwith\themes\icarus\_config.yml
INFO  Generating theme configuration file...
INFO  D:\dev\stemwith\_config.icarus.yml created successfully.
INFO  To skip configuration generation, use "--icarus-dont-generate-config".
INFO  === Registering Hexo extensions ===

이제 블로그 저장소 주소를 설정 파일(_config.yml)에 적어준다.

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

로컬에서 확인

1	hexo server --debug

이후, 브라우저에서

1	http://localhost:4000

배포를 위한 hexo-deployer-git 설치

1	npm i hexo-deployer-git --save

이제 hexo generate와 hexo deploy를 사용할 수 있다.

icarus 테마 설정

d:/dev/myblog/node-modules/hexo-generator-category/lib/generator.js 수정

module.exports = function(locals) {
  const config = this.config;
  const perPage = config.category_generator.per_page;
  const paginationDir = config.pagination_dir || 'page';
  const orderBy = config.category_generator.order_by || '+date';

orderBy 부분
- -date : 최근 글 순 (default)
- +date : 오래된 글 순

기본 설정

Site Configuration: _config.yml 수정

# Site
title: myblog
subtitle: 'my first blog'
description: 'life diary'
keywords:
author: anonymous
language: ko
timezone: Asia/Seoul

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://[githubID].github.io

Localization re-testing

1	hexo clean && hexo s

Alternative Configuration

_config.yml 에서는 가장 기본적인 셋팅과 테마 설정만 하고. 나머지 설정은 _config.[테마명].yml 에서 수행한다.

사용 예시

동일한 설정항목에 대하여 두가지 이상의 설정파일에서 동시에 정의하는 경우, 우선순위에 의해 설정값이 결정된다. 만약 _config.yml, _config.[테마명].yml, themes/[테마명]/ _config.yml 세가지 설정파일이 동시에 존재하는 경우, 각 파일을 아래와 같이 설정했다면,

1 2	# _config.yml theme: "my-theme"

# _config.icarus.yml
bio: "My awesome bio"
foo:
  bar: 'a'

# themes/icarus/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

최종적으로 설정되는 값은 각각 다음과 같다.

bio: "My awesome bio",
logo: "a-cool-image.png",
foo: {
  bar: "a",
  baz: "b"

icarus 테마 셋팅

출처: 친성의 블로그 github hexo blog web font 적용하기, hexo icarus 테마에 커스텀 레이아웃, 스타일(css) 적용하기

폰트 수정

// 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"),
};

1
2
3

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

1
2

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

1	$article-font-size ?= 1.2rem

Google Fonts에서 사용가능한 몇가지 폰트들을 검색해볼 수 있다.

이 사이트는 Google Fonts에서 지원하는 Gowun Dodum 폰트를 사용하도록 설정하였다. 이 경우 새로운 폰트 cdn을 import할 필요는 없으나, 특별한 폰트를 원하는 경우에는 아래와 같은 방법으로 새로운 cdn을 import하여야 한다.
1
@import url(https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css)

가독성 향상

icarus 테마의 포스트 글자 크기나 기본 줄간격이 좋지 않아 가독성이 떨어지는 경향이 있어 아래와 같이 수정한다.

포스트 제목 폰트 변경: &.article 을 검색한 후, .title 추가

&.article
    .title
        font-size: 2.0em
        font-weight: 700
        letter-spacing: -1.4px;

포스트 컨텐트 폰트 변경: .content를 검색한 후, 수정

.content
    font-size: $article-font-size
    line-height: 1.75em;
    letter-spacing: -0.3px;
    color: #5d686f;
    margin-top: 20px;

heading 폰트 변경: h1과 h2만 수정

h1
        font-size: 1.95em
        font-weight: 600
        margin-top: 50px;
   
h2
        font-size: 1.5em
        margin-top: 35px;

컬럼 비율 조정하기

layout/common/widgets.jsx 로 가보면 getColumnSizeClass라는 함수가 있다

여기에 자신의 columnCount 에 맞게 수정한다

columnCount* 의 기본값은 2라서 case 2인 경우를 is-3으로 수정

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/layout.jsx 아래쪽에서 is-9로 수정해주었다
- 전체 12에서 기본값은 프로필이 들어있는 영역이 4, 게시글 영역이 8이였다
- 위처럼 수정하게되면 우선 그 비율을 3, 9로 변경해준 것이다
- 프로필 영역을 좁게, 게시글 영역은 크게 바뀐 것이다
- 이 12라는 것은 칼럼들의 상위에 있는 container의 크기를 기준으로 12등분한 것이다.

<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>

container 크기 늘리기

include/style/base.styl 로 가서 23라인 정도에 보이는 아래 코드 중에서 $widescreen, $fullhd의 값을 각각 200px 씩 늘려준다.

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

커스텀 css 적용

이미지 margin 변경

&.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    // 여기 추가

변경된 css의 배포 및 적용

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

link, hover 컬러 변경

link, link-visited 컬러가 blue와 purple로 지정되어 있는 것이 어울리는것 같지 않아 grey-darker와 grey-light로 변경

// Link colors

$link ?= $grey-darker
$link-invert ?= findColorInvert($link)
$link-light ?= findLightColor($link)
$link-dark ?= findDarkColor($link)
$link-visited ?= $grey-dark

$link-hover ?= $grey-darker
$link-hover-border ?= $grey-light

$link-focus ?= $grey-darker
$link-focus-border ?= $blue

$link-active ?= $grey-darker
$link-active-border ?= $grey-dark

Troubleshooting

경로의 대소문자 구분 설정

경로에서 사용하는 폴더나 파일이름의 대소문자 구분 문제로 인해, 파일 인식이 안되는 경우가 발생한다. 특히, generate 시에 아래와 같은 메세지가 여러개 나오면, 대부분 파일이름의 대소문자 구분 문제라고 생각하면 된다.

1	Markdown Image Path does not exists!

이런 경우, 다음과 같은 방법으로 문제를 해결해야 한다.

_config.yml의 filename_case 수정
1
2
# Writing
filename_case: 1
- 0: 대소문자 구분
- 1: 경로를 이루는 문자를 모두 소문자로 변경하여 관리
- 2: 경로를 이루는 문자를 모두 대문자로 변경하여 관리
github.com에 로그인하여 repository의 categories 폴더 삭제
d:\dev\myblog\ 폴더의 .deploy_git 폴더 삭제
hexo clean 후 재배포
재배포시에 다음과 같은 에러가 생길 수 있다.
1
fatal: not a git repository (or any of the parent directories): .git
.deploy_git 폴더의 삭제에 따라, git에 대한 정보를 담은 파일이 없기 때문에 발생하는 에러이며, d:\dev\myblog 폴더에서 다음을 실행한 후,
1
2
git init
git remote add

이렇게 해도 경로가 인식이 안되는 경우는, Git에서 대소문자를 구분하게 설정하고, 폴더명 및 파일이름의 대소문자를 하나하나 맞춰주어서 해결할 수도 있다.

1	git config --global core.ignorecase=false

기존 블로그를 복구하는 경우

기존에 사용하던 블로그 디렉토리가 d:\dev\myblog 인 경우, d:\dev 폴더 전체를 다른 폴더에 복사하여 백업해두고 아래의 과정을 진행한다.
백업 완료 후, 기존에 사용하던 d:\dev\ 폴더 자체를 삭제한 후, 아래의 과정을 수행하여 모든 설치를 마친 뒤, 백업해둔 myblog 폴더에서 필요한 부분을 복구함.

favicon이 안나오는 경우

로컬 테스트시 favicon이 출력되지만, github 배포시 출력되지 않는다면

head:
  # URL or path to the website's icon
  favicon: /img/favicon.png?
  # Open Graph metadata

_config.icarus.yml 에서 상단에 favicon을 설정하는 부분에서 favicon.png 끝에 ?를 추가한 후, 재배포 한다.

generate할 때 에러가 뜨는 경우

$ hexo g
INFO  Validating config
Inferno is in development mode.
ERROR {
  err: TypeError: Cannot read properties of undefined (reading 'split')

해결방법

cd d:\dev\myblog
npm install hexo-html-syncer --save
npm audit fix --force
npm fund

이후에 다시 generate 한다.

블로그 포스트 생성

test.md 파일을 만든 뒤, d:/dev/stemwith/source/_post/ 폴더에 복사

test.md 파일의 가장 앞부분에 들어가는 post front-matter는 다음과 같이 구성한다.
1
2
3
4
5
6
7
8
9
10
11
12
---
title: test 블로그 페이지
date: 2019-09-17 01:32:35
updated:
category:
- blog
tags:
- hexo
- blog
toc: true
thumbnail: /images/preview.jpg
---
- toc: true를 추가하면 헤딩 태그(h1~h6)를 통해 목차를 만들어 준다. (icarus 테마의 경우)
로컬에서 페이지 확인
1
2
hexo serve
http://localhost:4000
로컬 작업 내용을 github 도메인으로 배포 (push)
1
2
hexo generate
hexo deploy
or
1
hexo g -d
deploy 후에도 오랜시간 업데이트가 안된다면, 페이지 clean 후 재배포
1
2
hexo clean
hexo deploy --generate

Code fence

1 2	``` [language] [title] [url] [link text] [additional options] code snippet

[title] [lang:language] [url] [link text] [additional options]

1	code snippet

[title] [lang:language] [url] [link text] [additional options]

1	code snippet

* 첫번째 라인에

```[markdown]
``` [C++] 파일이름

과 같이 적어주면 코드박스 상단에 파일이름이 표시된다.

파일이름은 [ ]로 감싸게 되면, [ ]까지 출력된다.
typora에서는 `````를 먼저 입력한 뒤, 코드박스가 나타나면, 코드박스 하단의 language 입력란에 입력한다.

about 페이지 만들기

아래 명령을 통해 source/about/index.md을 생성한 후, 파일을 수정하여 사용한다.

1	hexo new page "about"

사진 첨부 방법

첨부할 사진 파일 위치 : 사진 파일을 d:/dev/stemwith/source/image/ 폴더에 복사
마크다운 파일에서 파일 위치를 다음과 같이 지정함 지정함
1
![사진첨부파일설명](/image/~~~.jpg)
사진 출력시 사이즈 조정
- icarus, next 테마 사용시에는 사진 사이즈 조정이 필요한 경우, img 태그를 사용하여 zoom 수치로 조정하여야 함
1
<img src="/image/test.png" style="zoom:80%;" />
- book 테마 사용시에는 아래와 같이 하면 화면에 출력되는 크기를 조정할 수 있다. (단, icarus, Next 테마와 같은 방법을 사용해도 된다.)
1
![사진첨부파일설명](/image/~~~.png =432x768)
주의 사항
- 필요한 경우, hexo-image-link-with-display-size 설치
1
npm i hexo-image-link-with-display-size
- 사진이 위치한 폴더를 지정할 때, /image/ 폴더 앞에 점(.) 같은 것을 추가하면 안됨
- 파일이름에 언더바(_)가 포함되면 안됨. 대시(-)는 가능

Github 블로그 구글 검색 노출

※ 출처: 내 github blog 글이 구글 검색에 나오는 법(친성의 블로그)

blog 설정

SEO (search engine optimization) 설정

블로그 설치 폴더가 d:\dev\myblog 인 경우, d:\dev\myblog 폴더에서

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

필요한 경우 hexo-auto-canonical과 hexo-component-inferno을 추가로 설치한다.

1 2	npm i hexo-auto-canonical npm i hexo-component-inferno

설치 후

1	npm audit fix

※ 표준링크 확인 방법

본인 블로그로 접속
F12로 개발자도구를 열고
개발자도구 상단의 요소를 클릭한 뒤,
Ctrl-F를 눌러 canonical를 검색했을 때, 아래 형태의 링크 태그가 검색이 되면, 이미 표준링크가 생성되고 있는 것임. 이런 경우에는 hexo-auto-canonical은 설치하지 않아도 됨!
1
<link rel="canonical" href="http://블로그 글 주소/"
NEXT 테마의 경우, (이미 표준링크를 생성하고 있으므로) hexo-auto-canonical은 설치하지 않아도 됨

_config.yml 설정

_config.yml 최하단 deploy 설정 아래에 다음을 추가

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://깃허브유저네임.github.io/sitemap.xml

배포

hexo g -d

생성된 파일 확인하기

d:\dev\myblog\public\ 디렉터리 하단에 rss2.xml, sitemap.xml, robots.txt 이 3개의 파일이 보이는지 확인한다.

검색 노출

구글 검색 엔진 등록

Google Search Console 에 접속후 시작하기 클릭
URL 접두어를 선택하고, 자신의 깃헙 주소 (예, https://testblog.github.io)를 입력한 뒤 계속 클릭
소유권 확인
1. html 파일 다운로드
2. (_config.yml 이 위치한) d:\dev\myblog\public\ 디렉토리에 다운 받은 파일을 넣고
3. hexo d 로 배포
4. 잠시 대기 후, 소유권 확인 과정 창의 확인 클릭 (확인이 안된다고 나오는 경우에는 잠시 후에 다시 시도 해야 함)
5. 소유권이 확인되면, 속성으로 이동 클릭
Google Search Console에서
1. 왼쪽 메뉴의 sitemaps 클릭
2. 새 사이트맵 추가에서 sitemap.xml 입력 후 제출 클릭
3. 새 사이트맵 추가에서 rss2.xml 입력 후 제출 클릭
4. 두 파일의 제출 상태가 성공으로 표시되어야 함 (가져올 수 없음 이라고 나오면 잠시 후에 페이지 새로고침을 해보고, 성공으로 표시되는지 확인이 필요함)
실제 검색은 하루 정도 지나면 가능

Naver 검색 노출

구글과 유사하며, 네이버 웹마스터 도구 (Naver Search Advisor)를 사용하여 등록함
RSS 제출 메뉴와 사이트맵 제출 메뉴가 분리되어 있으므로, sitemap.xml 및 rss2.xml 등록시 유의

Daum 검색 노출

Daum 검색등록으로 들어가서
신규 등록에 블로그 URL을 등록한 뒤 확인을 클릭하여 제출하면, 심사 후 이메일로 등록 결과를 알려줌

Mathjax & KaTeX 설정

_config.[테마].yml 설정

math:
    enable: false
  ...
  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: true

math: enable: false 상태에서는 필요한 렌더링이 필요한 페이지의 front matter에 mathjax: true를 넣어주어야 한다.

---
title: Will Render Math
mathjax: true
---

Google Analytics 설정

# Google Analytics
# See: https://analytics.google.com
google_analytics:
  tracking_id: UA-*********-1          // google analytics 계정 s○○○○○○○@○○○○○○○.com

hexo icarus 테마로 Github 블로그 만들기

http://stemwith.github.io/2019/09/01/hexo-블로그-만들기/

Author

chemidot

Posted on

2019-09-01

Updated on

2022-04-24

hexo icarus 테마로 Github 블로그 만들기

필수 요소

Git 설치

nodejs 설치

git-bash 실행 후, hexo 및 icarus 테마 설치

icarus 테마 설정

Category list order 설정 (선택사항)

기본 설정

Alternative Configuration

사용 예시

icarus 테마 셋팅

폰트 수정

가독성 향상

컬럼 비율 조정하기

커스텀 css 적용

이미지 margin 변경

변경된 css의 배포 및 적용

link, hover 컬러 변경

Troubleshooting

경로의 대소문자 구분 설정

기존 블로그를 복구하는 경우

favicon이 안나오는 경우

generate할 때 에러가 뜨는 경우

블로그 포스트 생성

Code fence

about 페이지 만들기

사진 첨부 방법

Github 블로그 구글 검색 노출

blog 설정

SEO (search engine optimization) 설정

_config.yml 설정

배포

생성된 파일 확인하기

검색 노출

구글 검색 엔진 등록

Naver 검색 노출

Daum 검색 노출

Mathjax & KaTeX 설정

Google Analytics 설정

Author

Posted on

Updated on

Licensed under

댓글

카탈로그

카테고리

최근 글

아카이브

태그