# 만들기 전

VSCode 시작하면서 눈에 익숙한 테마를 찾다가 발견한 부분입니다. VSCode는 자신만의 테마를 만들고 공유할 수 있다는 생각에 하나 나도 만들어 볼까 싶어 만들다가 하루를 그냥 이 테마만 만들었네요. 일도 하랴 이것 만들랴 참 바쁜 하루였네요.

참 입맛에 맞는 테마 찾기란 쉽지가 않은 군요.

# 만들기 시작

저는 얼마 전까지만 해도 Atom을 사용했습니다. 지금도 VSCode보다는 Atom이 익숙하게 느껴질 정도로 아직도 VSCode가 어색하군요. 그래서 VSCode를 Atom같은 테마로 만들어 사용하려고 이렇게 만들기 시작했습니다.

우선 Themes, Snippets and Colorizers에 들어가서 하나하나 해보기로 했지만, 영어의 울렁증으로 고생(?) 좀 했네요. 이렇게 고생한 김에 이 글을 적어 보기로 했습니다.’라고 이야기하지만 저는 구글 해석으로 해도 무슨 말인지 도통 모르겠고요.

제가 하는 방법으로 해 보기로 했습니다.

# 새로운 테마 추가하기 Adding a new Theme

새로운 버전이 업데이트되면서 쉽게 할 수 있는 방법이 나왔더군요. 자세한 것은 April 2017 (version 1.12)으로 읽다가 보면 vscode-theme-generator라는 말이 나옵니다. 무엇이냐 하면 새롭게 .tmtheme파일이 아닌 tmtheme.json파일로 한다는 이야기입니다. 빠른 설치를 위해 링크도 있네요. vscode-theme-generator-quick-start에 가시면 됩니다.

1. 먼저 Node.js가 설치가 되어야 한다는 군요.

• Node.js 가서 가볍게 설치를 해 줍니다.

2. 설치가 끝나면 Ctrl , `를 눌러

1

npm install

을 해 줍니다. (일단 합니다.)

3. 위의 vscode-theme-generator-quick-start에 가셔서 다운로드 하고 압축을 풉니다.

4. 압축을 풀면 vscode-theme-generator-quick-start-master로 되어 있을 것입니다. 여기서 -master을 지워 줍니다.

아예 다른 이름으로 변경해도 됩니다.

5. 전 아예 VSCode-theme-OneDark-plus-S라고 이름 지었습니다.

6. theme.json을 innks-aodp-theme.json로 변경 했습니다.

7. edit를 열어 이제 하나하나 바꿔가며 색을 비교하고 저장하고 반복 합니다.

물론 매번 다시시작을 반복해야 합니다.

8. 다 끝이 나면 기타 파일 부분 적용하기

• README.md : 클릭시 처음 화면 입니다.
• package.json : 기타 버전과 변수 값입니다.
• CHANGELOG.md : 업데이트 내역입니다.

# 적용하기 Install an extension

# 제가 만든것 다운로드 하기

VSCode-theme-OneDark-plus-S v0.0.3 다운로드하러 가기

1. 다운된 Zip파일을 압축을 적당한 곳에 풀어 줍니다. 그후 폴더 뒤에 -master을 지워 줍니다.

2. 압축을 푼 VSCode-theme-OneDark-plus-S폴더를 VScode Extensions 폴더 에 넣고 VSCode를 다시 시작 하시고 색테마를 변경 하면 됩니다.

• VScode Extensions 폴더 : %USERPROFILE%.vscode\extensions
  • 예) C:\Users\유저명\.vscode\extensions
• 색 테마 변경 : 파일(F) > 기본 설정(P) > 색 테마(C) 에서 만든 Atom-OneDark + S를 선택 하시면 됩니다.

# View Test

하루 종일 했는데 결실이 별로 나질 않는군요. :(

# 시스템 예약 파티션(system reserved partition) 의 용도는 무엇입니까?

시스템 예약 파티션은 BitLocker 암호화 지원 외에도, Windows 복구 환경(WinRE) 지원과 부팅에 관한 정보(BCD)를 저장하는 용도로 생성되는 영역입니다. 이 WinRE로 인하여 설치 미디어 없이도 부팅이 불가능한 OS의 시동 복구 기능을 사용할 수 있습니다.
또한 시스템 복원 예약 시점, 백업 정보, Volume Shadow Copy 등 에 관련된 시스템 파일이 저장이 저장되어, OS가 부팅이 불가능한 상태에서도 네트워크 위치에 저장된 백업을 복원을 가능하게 하는 등의 중요한 역할을 합니다.
이처럼 중요한 기능을 포함하고 있으며, 이 파티션을 삭제할 경우 위에 언급한 몇몇 기능은 사용할 수 없게 됩니다. 따라서 시스템 예약 파티션을 삭제하는 것은 사용자의 자유이나, 마이크로소프트는 이를 절대 권장하지 않음을 알려드립니다.

# 시스템 예약 파티션 숨기기

윈도우를 설치하다 보면 또는 다른 원도우 작업을 하다 보면 가끔 시스템 예약 파티션을 삭제하지 않은 이상 숨겨져 있어야 할 것이 드라이브 문자(F:\)가 붙여져 공개되어 있는 경우가 있습니다. 위의 설명을 보면 중요한 부분이고 숨겨져야 할 공간으로 그냥 둬도 되지만 눈에 좀 거치적거리긴 합니다.

이 드라이브를 숨겨 보도록 하겠습니다.

1) Ctrl+Alt 사이에 Windows 로고키 + R 키를 눌러 실행창에 diskmgmt.msc 명령어를 입력 후 확인 버튼을 누릅니다.

2) 디스크 관리 창이 뜹니다. 여기서 시스템 예약 파티션을 마우스 오른쪽 버튼을 눌러 드라이브 문자 및 경로 변경(C) 메뉴를 선택합니다.

3) 그럼 E 드라이브로 잡혀 있는 문자를 제거 버튼을 누릅니다.

4) 드라이브 문자를 제거하면 프로그램을 더 이상이 실행 못한다 는 메시지가 뜨는데 별 문제 되지 않으므로 예(Y) 버튼을 누릅니다.

5) 볼륨이 현재 사용중 이라고 뜹니다. 예(Y) 버튼을 눌러 마칩니다.

6) 그럼 탐색기를 열어 시스템 예약 파티션 F 드라이브로 있던 것이 지금은 안보여지는 것을 확인 할 수 있습니다. :)

지금까지 시스탬 파티션 숨기기 였습니다. 사실 안해도 되지만 그래도 안보이는게 더 나은 거 같습니다.

# 원키고스트 OneKeyGhost

이제 고스트가 일반유 저들에게도 많이 알려져서 사용법은 웬만큼 아실 것이지만, 그런데도 어려움을 많이 격고 있어 새로이 포맷하고 윈도우 새로 설치하시는 분들이 가끔 있으신 것 같습니다.
속이 시원하게 알려드립니다. 원키고스트가 훨씬 사용하기 쉬우니 한 번씩 사용해 보시면 될 것입니다.

# 설치전 준비 사항

주의사항 : 미리 (파티션 2개)로 있어야 합니다.

1. C:로컬 디스크, D:로컬 디스크 같이 있어야 합니다. 또는 더많은 디스크.
2. C:(SSD) D:(HDD) 상태라도 제대로 작동 안 됩니다.

제가 올린 첨부파일 OneKey_V14.5.8.215fix_Kor.zip 파일 받으시던가 공식 사이트, 한글화 성진님의 블로그 에서 받고(OneKeyGhost_7.3.2_KO, OneKey_7.3ko 추가 파일입니다. 7.3.2는 테스트 못했습니다.)

# 시작 밑의 파일은 OneKey_V14.5.8.215fix_Ko 파일을 했습니다.

D: 드라이브에 압축을 풀어줍니다.

• 혹시라도 바이러스나, 트로이목마 잡히면 안심하셔도 됩니다. 백신에서 제외해주세요.

# 당부 말씀

회사에서는 원도우 7을 사용하고 집에서는 원도우10을 사용해서 해본 결과 잘되더군요.
일단 저는 원도우 포맷 후 1번 백업, 모든 유틸 설치하고 1번 백업 한답니다.
그러면 여러 가지 부분에서 유용하더군요.

기본적으로 C드라이브 용량을 최대한 줄여서 바이러스나 최적화를 하고 난 후 백업을 합니다. 혹시 모를 부분에 대하여 서류나 기타 중요한 부분은 따로 백업하시길 바랍니다.
또한, 백업전 Windows defender 와 기타 백신 프로그램은 꺼두세요. 그리고 각기 다른 컴퓨터에 각기 다른 모양이 되기도 한답니다. 어떤 컴퓨터는 백업하고 부팅시 계속 고스트에 들어가기도 하고 재부팅시 멀티 부팅되기도 한답니다. 하지만 보통은 잘 됩니다.

# 백업하기

우선 원키고스트를 압축 푼 사항에서 실행 파일을 실행하고 밑의 그림대로 합니다.

위는 원키고스트 실행화면입니다. 순서대로 ①-백업(B), ②-드라이브:\파일이름, ③-실행 하시면 됩니다.

• 기본이 C:로 되어 있으므로 따로 안 하셔도 되지만 안 되어 있다면 C:를 선택하시기 바랍니다.
• 백업이되는 드라이브와 동일한 드라이브에는 백업이 되지 않습니다. 다른 파티션을 잡아주셔야하고,외장 메모리에도 불가능하다고 합니다.
• C (SSD) D(HDD) 라면 이미지는 만들어집니다. 하지만 자동 복구는 되지 않고 수동으로 고스트 진입해서 복구 해줘야 합니다.

한글로 이름을 수정하면 나중에 복원시 에러가 날수 있습니다.

모두 완료 후 실행을 클릭하면,

이창이 뜨면 예(Y) 하시면 재부팅 되면 백업이 실행 됩니다.

그냥 아무것도 하실 필요 없습니다. 알아서 재부팅이 됩니다.

# 복원하기

얼마간 어느샌가 컴퓨터가 느려지거나, 사용하는 데 문제가 생기는 경우! 누구나 컴퓨터 사용자라면 한 번씩은 겪어보셨을 것입니다. 이때 복원을 해야겠다는 생각이 들기도 합니다. 이때를 위해 복원을 하는 방법을 설명하겠습니다.

위의 설명은 순서대로 ①-복원(R), ②-드라이브:\파일이름, ③-실행 하시면 됩니다.
또한 굳이 C:를 선택 하지 않아도 기본이 C:로 되어 있습니다.

모두 완료 후 실행을 클릭하면,

이창이 뜨면 예(Y) 하시면 재부팅 되면 백업이 실행 됩니다.

이상 더이상은 저도 잘 모르겠네요. :)
원체 오래된 프로그램이고 좋은 프로그램이기는 하지만 백업/복원하는 프로그램이라 각각의 시스템에서 완벽하다고 생각이 되지 않습니다. 제가 아는 한도까지는 적었는데 더 많은 부분은 저도 잘 모른다는 점 이해하시길 바랍니다.

# 비즈니스 애널리틱스 analytics

비즈니스 애널리틱스(Business analytics, BA)는 웹사이트의 실적을 높이고 온라인 비즈니스의 성공을 돕는 효율적인 웹사이트 분석 도구의 솔루션이다.

# 구글 애널리틱스 계정 삭제하기

구글 애널리틱스는 설치 및 이용에 대해서는 많은 인터넷 유저가 설명하고 있습니다. 하지만 저의 경우에는 계정 삭제를 하려고 했는데 그것이 여간 찾기가 쉽지가 않더군요. 물론 쉽게 했습니다. 이 방법을 알려 주려고 합니다.
https://analytics.google.com

기본적으로 위 사이트에 가입되어 있고 운영 중이지 않는 계정이 있다고 보고 설명하겠습니다.


위의 이미지처럼 안타깝게도 삭제된 블로그로 고객이 없네요. 당연한가요. :)

# 계정을 삭제 하겠습니다.

# 속성을 삭제 하겠습니다.

이번에는 계정이 아닌 속성 부분을 삭제 하려고 합니다. 1계장에 여러 속성을 만들 수 있습니다. 저는 다음의 티스토리에서 1개의 계정에 2개의 블로그를 만들고 테스트했습니다.

# 계정선택

계정 선택은 2가지가 있습니다. 화면 왼쪽 위의 전체 웹사이트 데이터를 클릭하시거나 관리의 첫 번째 항목인 계정에 사이트 펼침 메뉴를 사용하셔도 됩니다.

위에서 말씀은 했듯이 계정에는 3개의 부분이 있습니다.
계정>속성>보기 이 부분에서 속성을 분기로 해서 가시면 됩니다.

# 이제 속성을 삭제하겠습니다.

위의 계정과 비슷하게 속성 설정에 들어갑니다.

속세 설정에 들어가시면 좌측 상단에 휴지통으로 이동 버튼을 클릭합니다.

그 후 나오는 페이지에서 속성 삭제를 하시면 됩니다.

삭제하고 휴지통에 가시면 삭제된 속성을 보실 수 있습니다.

# 복원

계정이나 속성 등 휴지통으로 이동하시면 약 6주 정도 휴지통에 보관이 됩니다. 복원을 원하시면 이때 복원하시면 됩니다.

복원하기는 [계정을 선택]하시고 휴지통을 봅니다. 복원하실 부분을 체크박스에 체크 하고 복원 버튼을 클릭하시면 됩니다.

이상 애널리틱스 계정삭제 및 속성 삭제를 알아보았습니다. 솔직히 도움말 보시면 되는데 글만 적혀 있어서 그림과 함께 적어 보았습니다.

# 부제목 or 부제 SubTitle

부제(副題). 제목에 덧붙여 그 작품의 내용을 설명하고 본 제목을 보충하는 타이틀. 모든 작품에 반드시 붙지는 않는다. 영어로는 subtitle이라고 하지만 이 단어는 자막이라는 뜻으로 쓰일 때가 더 많다.

# 우선 이야기하기

필자는 ‘마크다운‘이라는 언어를 최근에 알게 되고 다른 언어적 지식이 없는 관계로 무식하고 단순한 방법으로 하다보니 발견하게 된 것으로 이 더이상 지식은 없습니다. 이것에 대하여 물어 보시거나 혹은 더 좋은 방법이 있으신 분들은 기탄없이 저에게 연락 주시길 바랍니다.

# 1. YAML Front Matter 추가하기 (YAML 헤더)

제목은 이렇게 적었지만 실제로는 title 밑에 글한줄 더 적은것 뿐입니다.

1
2
3
4
5
6
7
8
9
10

---
title: 타이틀
subposttitle: 부제목 타이틀
date: 날짜
categories:
- 카테고리
- 서브카테고리
tags: [테그1, 테그2, ...]
thumbnail: 썸네일 주소
---

위에 보여지는 것처럼 subposttitle이 이포스트에서 다룰 YAML 헤더의 메타데이터(?)입니다. 특별이 명칭을 몰라 메타데이터라고 했습니다. 양해를 :)

이제 이 subposttitle이 메타데이터를 가지고 2군데를 추가 하시면 됩니다.
먼저 list부분 과 post 에 들어가는 title.ejs 파일입니다.
title.ejs파일은 각각 2군데 모두 호출되어 제목과 썸네일등을 보여주는 파일입니다. 그리고 css파일을 한개 만들어 추가하고 head.ejs파일에 불러오면 됩니다.

list부분 입니다. 붉은 부분이 부제목입니다

Post부분 입니다. 붉은 부분이 부제목입니다.

# 2. 테마 수정하기 title.ejs

위치는 테마 폴더 안에… theman/hueman/layout/common/post/title.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<% if (post.link) { %>
    <h1 itemprop="name">
        <a class="<%= class_name %>" href="<%- url_for(post.link) %>" target="_blank" itemprop="url"><%= post.title %></a>
    </h1>
<% } else if (post.title) { %>
    <% if (typeof(linkable) !== 'undefined' && linkable) { %>
        <h1 class="<%= class_name %>" itemprop="name">
        <a href="<%- url_for(post.path) %>"><%= post.title %></a>
        </h1>
        <!-- 여기에 들어갈 자리 -->
    <% } else { %>
        <h1 class="<%= class_name %>" itemprop="name">
        <%= post.title %>
        </h1>
        <!-- 여기에 들어갈 자리 -->
    <% } %>
<% } %>

1

<% if(post.subposttitle) { %> <div class="article-subposttitle"> &nbsp# <%-post.subposttitle %> </div> <% } %>

위에 보이는 것과 같이 title.ejs을 열어 <!-- 여기 들어갈 자리 -->부분에 밑의 한 줄을 복사해서 넣습니다. 이때 저는 css > class_name 을 article-subposttitle으로 했습니다. 다른이름 으로 해도 무방합니다.

# 3. 스타일시트 추가하기 etc.css

이제 CSS 파일을 하나 만듭니다. blog의 루트폴더에 source폴더안에 css폴더를 만들고 그 안에 etc.css파일을 만듭니다. 벌써 만들었다면 그 안에 추가 하셔도 됩니다. 즉 어느 파일이나 css파일이면 그 안에 넣으시면 됩니다.

1
2
3
4
5
6
7
8
9
10

/* 부제목 색변경 */
.article-subposttitle {font-size: 12px;
    text-decoration: none;
    line-height: 14px;
    color: #3e3f43;
    background-color: #e7e8ec;
    margin-bottom: 5px;
    padding: 5px 10px;
    border-radius: 4px;
  }

위에 것을 추가하고 저장을 합니다.

# 4. 적용하기 head.ejs

그리고 head파일을 열어 위에 만들어 놓은 css파일을 추가합니다.

1
2
3

...
<!-- 여기에 넣습니다. -->
</head>

head.ejs파일에 마지막 부분인 </head>위에 밑의 css추가를 합니다.

1

<%- css('css/etc') %>

지금까지 hueman 테마에 적용하는 부제목 추가하기였습니다. 모바일이나 PC에도 잘 보이고 제목에서 쓰지 못한 기타사항을 쓸려고 했다가 이렇게 부제목까지 만들었네요. 나름 힘들게 삽질하면서 만들었습니다. 저는 좋게 잘 쓰고 있지만, 이것보다 내가 더 잘하시는 분은 주저 말고 지적해 주시길 바랍니다.

# 관련 문서 바로가기

• 초간단 HEXO와 hueman 테마 설치하기
• Hexo로 정적 블로그 시작하기
• GitHub Pages 만들기(Hexo용)
• Hexo 기본설정
• Hexo 포스팅하기
• hexo 로컬 서버 테스트와 배포(GitHub)
• Hexo 테마 Hueman 적용하기
• Hueman테마에 메뉴 변경하기
• Hueman 테마에 부제목 추가하기
• hexo을 포멧/다른 컴퓨터에 환경을 구축하기

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

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

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

• Git 설치하러 가기
• NodeJs 설치하러가기

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을 연다.

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파일에 넣으시면 됩니다.

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파일은 테마폴더는 아닙니다.)

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 기본설정

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파일을 열어 밑에처럼 수정합니다.

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>

을

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파일을 열어 밑에처럼 수정합니다.

1
2
3
4

<div class="credit">
    <h1 class="logo-wrap">
        <a href="<%- url_for() %>" class="logo"></a>
    </h1>

를

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>

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) %> 라고 있는데 그 바로 아래 붙여넣으시면 됩니다.

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

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로 제어합니다. 자세히 알아보기

# 관련 문서 바로가기

• 초간단 HEXO와 hueman 테마 설치하기
• Hexo로 정적 블로그 시작하기
• GitHub Pages 만들기(Hexo용)
• Hexo 기본설정
• Hexo 포스팅하기
• hexo 로컬 서버 테스트와 배포(GitHub)
• Hexo 테마 Hueman 적용하기
• Hueman테마에 메뉴 변경하기
• Hueman 테마에 부제목 추가하기
• hexo을 포멧/다른 컴퓨터에 환경을 구축하기

# 상단 메뉴 변경

hueman테마를 사용중에 home부분을 변경할려고 하니 index.이라는 부분이 붙여서 나오는 것을 보고 변경할려고 생각한 방법입니다.

# 참고

더 쉬운 방법을 찾았네요 Nayoung Kim 감사 ^^
https://github.com/ppoffice/hexo-theme-hueman/issues/139 가시면 답이 있습니다.

# 시작

먼저 _config.yml을 찾아 편집기로 엽니다. (테마의 파일이 아니라 hexo의 설정 파일 입니다.)

1
2
3
4
5
6
7

# Site_
title: innks
subtitle: Sixth Challenge
description: theK의 여섯번째 도전 블로그
author: theK
language: en
timezone: Asia/Seoul

위의 설정 중에 language라는 값이 en인걸 확인후 테마란에 가시면 languages라는 폴더가 있습니다. 그중 조금전 확인한 en.yml파일을 열어 index: 밑에 자기가 원하는 메뉴를 추가 합니다.(굳이 en파일이 아니라도 다른 파일이라도 주가 하면 되더군요. 2017-11-19)

1
2
3
4
5
6
7
8
9

index:
    home: 'Home'
    about: 'About'
    search: 'Search'
    archive: 'Archive'
    category: 'Category'
    uncategorized: 'uncategorized'
    tag: 'Tag'
    innksv6: 'innks v6'  <-- 이것을 추가 합니다.

이제 테마의 _config.yml파일을 열어 위의 `innksv6’를 추가 하니 되네요.

1
2
3
4
5

menu:
    innksv6: /
    # Delete this row if you don't want categories in your header nav bar
    Categories:
    About: /about/index.html

밑의 것은 하지 마시길 바랍니다.

# 변경하기 하지 마시길 바랍니다.

이제 Hueman데마의 폴더에서 header.ejs를 변경하겠습니다. 위치는 themes/hueman/layout/common/header.ejs 입니다.

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

<header id="header">
    <div id="header-outer" class="outer">
        <div class="container">
            <div class="container-inner">
                <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>
                <div id="header-inner" class="nav-container">
                    <a id="main-nav-toggle" class="nav-icon fa fa-bars"></a>
                    <div class="nav-container-inner">
                        <ul id="main-nav">
                            <% for (var i in theme.menu) {
                                    if (i == 'Categories') { %>
                                        <%- list_categories({
                                            depth: 2,
                                            style: 'list',
                                            class: 'main-nav',
                                            show_count: false,
                                        }) %>
                                    <% } else { %>
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="<%- url_for(theme.menu[i]) %>"><%= __('index.' + i.toLowerCase()) %></a>
                                </li>
                            <% }} %>
                        </ul>
                        <nav id="sub-nav">
                            <%- partial('search/index') %>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

위의 내용중에 29번째 줄의 내용의 일 부분을 변경 합니다.

1

<%= __('index.' + i.toLowerCase()) %>

위의 내용중에 'index.' +를 빼줍니다.

1

<%= __(i.toLowerCase()) %>

그러면 위의 보듯이 이렇게 나옵니다. 그러면 메뉴 부분에 index.부분이 사라진 것을 알수 있습니다.

아무것도 아닌것이 계속 신경이 쓰였는데 이렇게 빼고나니 속도 시원한 것같습니다

# 관련 문서 바로가기

• 초간단 HEXO와 hueman 테마 설치하기
• Hexo로 정적 블로그 시작하기
• GitHub Pages 만들기(Hexo용)
• Hexo 기본설정
• Hexo 포스팅하기
• hexo 로컬 서버 테스트와 배포(GitHub)
• Hexo 테마 Hueman 적용하기
• Hueman테마에 메뉴 변경하기
• Hueman 테마에 부제목 추가하기
• hexo을 포멧/다른 컴퓨터에 환경을 구축하기

# Hueman Themes 테마

# 설치 Installation

터미널을 열어 hexo init했던 폴더(이하 저는 innk 폴더로 했습니다.)에 들어갑니다. Heuman 테마를 themes/hueman 폴더에 clone합니다.
즉, 블로그 루트 폴더에서 명령어로 테마를 받습니다.

1
2

$ cd innk # 루트 폴더
$ git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

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

1
2

# Extensions
theme: hueman

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

테마에서 제공하는 검색 기능 (Insight Search)를 이용하기 위해서는 hexo-generator-json-content를 설치해야 합니다. npm 을 이용해서 설치합니다.

• 앞의 Hexo로 정적 블로그 시작하기 부분을 읽고 적용했다면 하지 않으셔도 됩니다.

1

$ npm install -S hexo-generator-json-content # 검색을 위해서

여기까지는 기본으로 변경이고 기호에 맞게 고쳐 보기로 하겠습니다.

# 커스터마이징 customizing

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

# 메뉴 menu

1
2
3
4
5
6

# Menus
menu:
    innks v6: / #기본루트
    # Delete this row if you don't want categories in your header nav bar
    Categories: # 카테고리부분
    About: /about/index.html #상대경로

블로그 상단의 주 logo 말고 밑의 메뉴들입니다.

상단의 home가 아니면 index.메뉴가 되더군요.
이 부분을 수정할려면 Hueman테마에 메뉴 변경하기를 보시면 됩니다.

위에 처럼 상단의 메뉴를 추가및 삭제 변경을 할수 있습니다. 저는 블로그루트 폴더에 'source'폴더안에 'about'폴더를 만들어 그 안에 'index.md'를 따로 만들어서 상대경로를 통해 그 페이지에 들어가게 하였습니다.
쉽게 말해서 'innks/source/about/index.md'를 따로 만들었습니다.

• 응용을 하면 웹페이지가 없거나 error일시 보여지는 404파일을 만들수도 있습니다. 'innks/source/404/index.md'

# 로고 logo

1
2
3
4

logo:
    width: 165
    height: 60
    url: images/logo-header.png

해당 폴더의 위치와 사이즈 입니다. 역시 'source'폴더에 'images'를 만들어서 이미지를 넣고 경로를 적어 주시면 됩니다.

# 테마 색 지정 theme color

1

theme_color: '#ff5252' # '#006bde'

위의 옆 네임카드부분의 색이 변경됩니다. 작은 부분이지만 변경가능한것 같네요.

# 하이라이트 highlight

하이라이트부분을 변경이 가능한데 'theman\source\css\_highlight'의 폴더안에 리스트중에 한개를 적으시면 됩니다. 기본을 사용하셔도 무방합니다.

1

highlight: androidstudio

# 사이드바 sidebar

사이드바의 위치를 지정합니다.

1

sidebar: left # options: left, right

# 썸네일 thumbnail

포스트의 썸네일을 표시를 끄고 켤 수 있습니다.

1

thumbnail: true

이 썸네일은 포스트 앞에 자동으로 삽입되는 front-matter 부분에 경로를 추가하면 됩니다.

1
2
3

title: Hello World
date: 2016/12/13 09:26:25
thumbnail: https://example.com/image.jpg

썸네일을 표시하고 이미지의 경로를 지정하지 않은 포스트는 첫번째 이미지가 썸네일에 표시됩니다.

# 파비콘 Favicon

파비콘은 URL앞에 붙는 작은 아이콘을 말합니다. 파비콘의 위치를 설정할수 있습니다.저의 경우에는 ico보다는 png로 설정했습니다.

1

favicon: http://innks.github.io/images/favicon.png # path to favicon

# 소셜링크 Social Link

자신이 사용하는 sns를 추가할수 있습니다. 아이콘은 FontAwesome에서 골라서 이름을 적고 링크될 url을 적으면 됩니다.

1
2
3
4
5

social_links: # for more icons, please see http://fontawesome.io/icons/#brand
    twitter: https://twitter.com/
    google-plus: https://plus.google.com/
    facebook: https://www.facebook.com/
    github: https://github.com/ppoffice/hexo-theme-hueman

# 위젯 widget

사이드바에 위치할 위젯을 추가 삭제 할수 있는 부분입니다. 이름의 위치가 표시될 위치입니다. 저의 경우 tag는 뺏습니다.

1
2
3
4
5
6
7

# Widgets
widgets:
    - category # 카테고리
    - recent_posts # 최근 포스트
    - archive # 어카이브
    - tagcloud # 태그클라우드. 사용된 태그들을 빈도수에 따라 구름처럼 표시
    - links # 링크

# 링크 links

파일 하단으로 가면 링크부분이 있습니다. 추가를 할수 있습니다.

1 2	links: Hexo: http://hexo.io

---

# 검색 search

1 2 3 4 5

# Search search: insight: true # you need to install `hexo-generator-json-content` before using Insight Search swiftype: # enter swiftype install key here baidu: false # you need to disable other search engines to use Baidu search, options: true, false

저의 경우 이 테마를 사용하기 시작한 것이 이 검색 부분입니다. 검색은 사이트내에 검색을 하는 것입니다. Insight Search를 사용하시면 위의 글처럼 hexo-generator-json-content 를 인스톨 하셔야 합니다. 인스톨 부분 다시가기

---

# 댓글 comment

hexo는 댓글을 자채지원하지 않습니다. 하지만 디스커스(disqus)를 많이들 사용하더군요. 이 테마 역시 기본적으로 디스커스를 사용하도록 권장합니다.
디스커스에 먼저 가입 하고 다음과 같이 아이디를 확인 하고 _config.yml에 입력합니다.

1 2 3 4 5 6

# Comment comment: disqus: innks # enter disqus shortname here duoshuo: # enter duoshuo shortname here youyan: # enter youyan uid here facebook: # enter true to enable

---

# 공유 Share

해당 포스트를 공유하기 위한 기능도 제공합니다.

1 2	# Share share: default # options: jiathis, bdshare, addtoany, default

jiathis, bdshare, addtoany, default 의 몇가지 옵션이 있습니다. 이미지를 보시고 원하시는 스타일을 사용하시면 됩니다.

공유 종류	이미지
jiathis(중국)
bdshare(중국)
addtoany
default

---

# 플러그인 Plugins

1 2 3 4 5

# Plugins plugins: lightgallery: true # options: true, false google_analytics: UA-60000000-0 # enter the tracking ID for your Google Analytics baidu_analytics: # enter Baidu Analytics hash key

플로그인으로 그중 2가지는 이렇습니다.

• lightgallery : 이미지 클릭시 lightgallery기능을 사용 여부.
• google_analytics : 구글 웹로그 분석의 추적 ID 적습니다.

---

# 관련 문서 바로가기

• 초간단 HEXO와 hueman 테마 설치하기
• Hexo로 정적 블로그 시작하기
• GitHub Pages 만들기(Hexo용)
• Hexo 기본설정
• Hexo 포스팅하기
• hexo 로컬 서버 테스트와 배포(GitHub)
• Hexo 테마 Hueman 적용하기
• Hueman테마에 메뉴 변경하기
• Hueman 테마에 부제목 추가하기
• hexo을 포멧/다른 컴퓨터에 환경을 구축하기

---