강인규 블로그

0%

초간단 HEXO와 hueman 테마 설치하기

작성일 Edited on In , Disqus:

# 준비에서 실행까지 단 몇 분 만에 끝

바쁜신 분들을 위해 준비 했습니다. 간단 블로그 만들기

0. Git, Node.js를 설치 한다.

1. 폴더 만들고 Hexo 설치하기

1
2
3
4
5
6
$ npm install -g hexo-cli
$ hexo init Blog
$ cd Blog
$ npm install
$ npm install hexo-server --save # server 명령문이 실행 되지 않을
$ npm install hexo-deployer-git --save # Git 서버 배포 플러그인

Blog폴더의 _config.yml을 연다.

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Site
title: innks # 타이틀
subtitle: Sixth Challenge # 서브 타이틀
description: theK의 여섯번째 도전 블로그  # 블로그 설명
author: theK # 저자 이름
language: en
timezone: Asia/Seoul

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://innks.github.io # 앞에서 만든 github page 주소
root: / # 기본은 / 이고 만약 서브디렉토리 구조를 가진다면 루트를 지정하는 부분.
permalink: :year/:month/:day/:title/ # 기본 permalink (고정 url). 새글 생성 시 자동으로 지정된 형식의 URL이 할당된다.
permalink_defaults:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/innks/innks.github.io.git
  branch: master

위의 부분을 수정합니다. 참고 예는 저의 설정 파일 입니다. 뜩같이 적지 말고 자신의 사이트에 맞게 수정합니다.

2. GitHub Pages 만들기

  1. https://github.com/ 사이트에 가입.
  2. 로그인
  3. new repository : https://github.com/new 에 자인의 이름과 같이 http://{자신의계정}.github.io를 만든다.
    - 예) 계정이 innks이면, innks/innks.github.io

자신의계정을 기입하고 만들기를 눌러 만들고 화면상에 있는 HTTPS란에 있는 https://github.com/innks/innk.github.io.git을 Hexo의 _config.yml파일에 넣으시면 됩니다.

_config.yml - Deployment 부분
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/innks/innks.github.io.git # 이부분을 수정 (중요)
  branch: master

3. 테마 적용하기

root 폴더의 _config.yml 파일을 열어 테마부분을 수정합니다. (이때 _config.yml파일은 테마폴더는 아닙니다.)

_config.yml
1
2
# Extensions
theme: hueman

콘솔창을 열어 테마를 설치 합니다.

1
2
$ git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
$ npm install -S hexo-generator-json-content # hueman 테마 검색을 위해서

이제 블로그의 _config.yml말고 테마 폴더 안에 있는 _config.yml.example의 이름을 _config.yml로 수정합니다.

1
2
$ cd themes/hueman
$ ren _config.yml.example _config.yml

4. 커스터마이징 customizing

테마 폴더안의 _config.yml을 수정하여 자기의 블로그에 맞게 수정하겠습니다.

자세히 보실분은 이쪽으로 이동 -> Hexo 기본설정

_config.yml
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
# Menus
menu:
    Home: /
    # Delete this row if you don't want categories in your header nav bar
    Categories:
    About:  # <--- 삭제

# Customize
    customize:
        logo:
            width: 165
            height: 60
            url:  # <--- url부분만 삭제
            ...
            github: https://github.com/innks/innks.github.io # <---  나의 Git주소 나머진 삭제
# Widgets
    widgets:
        - recent_posts
        - category
        - archive
        - links # <--- 필요 없으면 이것도 삭제 (나머진 삭제)

# Miscellaneous
    miscellaneous:
        links:
            Hexo: http://hexo.io   # <--- 위의 링크 때문에 있음

5. logo 이미지 없이 사용하기

hrader.ejs 수정

/themes/hueman/common/hrader.ejs파일을 열어 밑에처럼 수정합니다.

hrader.ejs
1
2
3
4
5
6
7
8
9
10
<div id="header-title">
    <h1 class="logo-wrap">
        <a href="<%- url_for() %>" class="logo"></a>
    </h1>
    <% if (theme.subtitle) { %>
        <h2 class="subtitle-wrap">
            <p class="subtitle"><%= theme.subtitle %></p>
        </h2>
    <% } %>
</div>

을

hrader.ejs
1
2
3
4
5
<div id="header-title">
    <h1>
        <a href="<%- url_for() %>" style="font-size:100px;color:#fff; text-decoration: none;">innks</a>
    </h1>
</div>

footerejs 수정

로 변경 후, /themes/hueman/common/footerejs파일을 열어 밑에처럼 수정합니다.

footer.ejs
1
2
3
4
<div class="credit">
    <h1 class="logo-wrap">
        <a href="<%- url_for() %>" class="logo"></a>
    </h1>

를

footer.ejs
1
2
3
4
<div class="credit">
    <h1>
      <a href="<%- url_for() %>" style="font-size:40px;color:#fff; text-decoration: none;">innks</a>
    </h1>

로 변경하시면 로고가 생깁니다.

6. 포스트 쓰기

1
$ hexo new [layout] <title>
_post/title.md
1
2
3
4
5
---
title: Hello World  # 제목
date: 2017/5/13 20:46:25 # 날짜
---
<!-- 이부분에 쓰면 됩 -->

7. 테스트 배포

1
$ hexo s

로컬 서버로 테스트 http://127.0.0.1:4000 해보고 이상 없으면,

1
$ hexo g -d

배포 합니다.

8. 추가부분

ㄱ. 대표 URL 설정하기

1
$ npm install --save hexo-auto-canonical

플로그임 추가하고 테마 폴더의 head.ejs파일에 <%- meta(page) %> 라고 있는데 그 바로 아래 붙여넣으시면 됩니다.

theme/hueman/layout/common/post/head.ejs
1
<%- autoCanonical(config, page) %>

ㄴ. 사이트맵 만들기 (XML, RSS)

일단 사이트맵을 등록하려면 사이트맵 파일을 만들어야 합니다. ML 과 RSS 방식 모두 사용하는 것이 좋다고 합니다.

a. 사이트맵 자동 생성 플러그인

XML 은 전체 페이지에 대한 내용을 가지고 있습니다.

1
$ npm install hexo-generator-seo-friendly-sitemap --save

_config.yml파일에 다음과 같이 추가합니다.

1
2
3
# sitemap auto generator
sitemap:
    path: sitemap.xml

b. RSS feed 자동 생성 플러그인

RSS 는 최근 포스트에 대한 정보를 가지고 있습니다.

1
$ npm install hexo-generator-feed --save

_config.yml파일에 다음과 같이 추가합니다.

1
2
3
4
5
feed:
  type: atom
  path: feed.xml
  limit: 20
  hub:

이제 생성해서 배포해봅시다.

1
$ hexo g -d

그러면 root 에 sitemap.xml 과 feed.xml 이 생긴 것을 확인하실 수 있습니다.

9. Google Search Console에서 사이트맵 제출

Google Serach Console 의 크롤링 > Sitemaps 에 들어가시면 SITEMAP 추가/ 테스트 가 있습니다. 만들었던 파일을 제출 하면 됩니다.

첨언 Fetch As Google 와 robot.txt

Fetch As Google 은 구글의 크롤링 담당하는 Googlebot 이라는 놈으로 주소를 넣고 가져오기 및 렌더링 을 눌러봅시다. 그러면 잠깐의 시간이 흐르고 완료되었다고 나오면, URL 색인을 제출합니다. 자세히 알아보기

robot.txt 라는 파일이 있는데 이 파일은 Googlebot 의 접근을 조절하는 파일입니다. 한마디로 검색에 노출이 필요하지 않은 부분으 robots.txt로 제어합니다. 자세히 알아보기

# 관련 문서 바로가기