TechHexo

Hexo로 github.io에 블로그 만들기

hexo, hueman, blog, web, stylus, github, git

Note

github.io 에 hexo를 이용해 블로그를 만드는 방법을 소개합니다.

목차

github.io 계정 만들기

github 에서 블로깅용 repository를 생성한다.

  • 자기 계정이 github.com/cloudeyes라면 cloudeyes.github.io라는 레포지터리를 만든다.

hexo를 설치한다.

1
npm install hexo-cli -g

hexo 블로그 레포지터리를 생성한다.

우리가 만든 github 레포지터리에는 렌더링된 정적 파일(html, js, css 등)만 남기 때문에
블로그 원본 보존이 필요하다.
사적인 파일이므로 로컬에 보관하거나, github에 돈을 내고 private repository를 추가
할 수 있도록 계정 업그레이드를 해야 할 것이다.

1
2
3
4
$ hexo init blog
$ git init
$ git add .gitignore _config.yml package.json source scaffolds
$ git commit -m "initial import"

hexo 추가 설정

github.io에 자동 deploy 설정

git deploy 플러그인 설치

1
$ npm install hexo-deployer-git --save

_config.yml에 설정 추가.

1
2
3
4
deploy:
  type: git
  repo: http://github.com/cloudeyes/cloudeyes.github.io
  message: "updated: {{ now('YYYY-MM-DD HH:mm:ss') }})"

Disquss 코멘트 달기

disquss.com 사이트 가입 후 개인 계정 설정

  • settings 에서 shortname을 기억해둔다.

_config.yml에 다음 항목 추가

1
disqus_shortname: cloudeyes-github-io

블로깅 시작하기

  1. 새 포스트를 생성한다.
    1
    $ hexo new "My New Post"
  1. 서버를 실행한다.
    1
    $ hexo server

매번 `hexo generate`를 실행해야 할까?

hexo 서버는 md 파일 변경을 자동으로 감지한다. 블로그 내용을 수정했다면
브라우저 새로고침을 해서 변경 내용을 바로 확인할 수 있다.

  1. 정적 파일을 만든다.

    generate가 반드시 필요한가?

    generate -> deploy 과정이 번거롭다면 deploy만 해도 변경 내용에 대해서
    자동으로 generate 되는 듯 하다.

    1
    $ hexo generate

  2. 원격 서버에 deploy 한다.

    1
    $ hexo deploy

기타 삽질

강조 상자(note, warning 등을 나타내는 admonition 섹션) 추가하기

  • 플러그인을 설치합니다 (이곳을 참조)

    1
    npm install --save hexo-tag-admonition

  • themes/admon.styl파일을 만듭니다 (readthedoc.io의 스타일 시트를 Stylus로 직접 옮긴 것입니다.)

    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    admon-title($color)
      color: #fff
      font-weight: bold
      background-color: $color
      line-height: 16px !important
      margin-top: -12px !important
      margin-right: -12px !important
      margin-bottom: 12px !important
      margin-left: -12px !important
      padding-top: 6px !important
      padding-right: 12px !important
      padding-bottom: 6px !important
      padding-left: 12px !important
    .admonition
      margin-bottom: 24px
      padding-top: 6px !important
      padding-right: 12px
      padding-bottom: 6px !important
      padding-left: 12px
      color: 404040
      text-align: left
      &-title:before
        content: " "
        font-family: FontAwesome
      &.note, &.info
        background-color: #e7f2fa
        & ^[-1]-title
          admon-title(#6ab0de)
      &.tip
        background-color: #dbfaf4 
        & ^[-1]-title
          admon-title(#1abc9c)
      &.warning, &.warn, &.important
        background-color: #ffedcc
        & ^[-1]-title
          admon-title(#f0b37e)
      &.danger, &.critical
        background-color: #f29f97
        & ^[-1]-title
          admon-title(#df3f2)

  • themes/<테마명>/source/css/style.styl파일에 다음 import문을 추가합니다.

    1
    @import "../../../admon"

  • 태그를 이용해 강조 상자를 표시할 수 있습니다.

    1
    2
    3
    {% admonition tip TIP: hexo-tag-admonition 플러그인 기능 %}
    `note` `tip` `warn` `danger` 같은 강조(admonition)가 가능하다.
    {% endadmonition %}

위 코드는 다음과 같이 변환됩니다.

{% admonition tip TIP: hexo-tag-admonition 플러그인 기능 %}
    `note` `tip` `warn` `danger` 같은 강조(admonition)가 가능하다.
    {% endadmonition %}

  • warn, tip, danger같은 강조 상자도 표시 가능합니다.

    주의사항

    styles.styl 파일을 수정해야 스타일이 반영된다.

    참고

    스타일시트는 readthedocs.io 의 기본 테마를 옮긴 것이다.

    위험

    이 삽질은 굉장한 노오력을 필요로 합니다.

Share