mdtistory 사용 매뉴얼

• 1. 프로그램 소개
• 2. 사용환경
• 3. 설치하기
  • 3.1. python module install
  • 3.2. pandoc install
• 4. tistory api 등록하기
• 5. 마크다운
  • 5.1. asset folder 지정
  • 5.2. markdown meta 정보 (yaml)
• 6. cli 사용
  • 6.1. config 파일
  • 6.2. 블로그 정보 획득 (카테고리정보획득)
  • 6.3. 블로그 게시글 백업
  • 6.4. 블로그 게시글 업로드(스캔)
• 7. meta file
  • 7.1. post meta
  • 7.2. folder meta
  • 7.3. attach meta
• 8. 개선예정사항

1. 프로그램 소개

마크다운을 이용하여 작성된 문서를 티스토리로 배포한다.

• 코드저장소 : https://github.com/kksworks/mdtistory

2. 사용환경

• OS
  • 현재 linux 에서의 환경에서만 테스트되었습니다.
  • windows 환경에서의 동작은 보장하지 못합니다.
• python version
  • python3 에서만 테스트되었습니다.
  • python2 환경에서의 동작은 보장하지 못합니다.

3. 설치하기

아직 setup.py 를 설정하지 않았습니다. 수동으로 설치 바랍니다.

3.1. python module install

각종 파이썬 모듈을 설치합니다.

1
2
3
4

sudo pip3 install pytistory
sudo pip3 install markdown
sudo pip3 install markdown-captions
sudo pip3 install click

3.2. pandoc install

티스토리의 웹페이지를 저장할때 pandoc 을 이용합니다.

1

sudo apt-get install pandoc

4. tistory api 등록하기

작성중…

5. 마크다운

5.1. asset folder 지정

작성중…

5.2. markdown meta 정보 (yaml)

작성중…

6. cli 사용

기본적으로 cli 를 이용하여 동작을 시킵니다.

6.1. config 파일

cli 명령어를 사용하기위해서는 config 파일이 필요합니다. (기본정보 포함)

• 예제 : https://github.com/kksworks/mdtistory/blob/master/example/conf/setting.ini

1
2
3
4

[tistory]
apikey=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
blog_name=blog_name
base_folder=target_folder

• apikey : tistory api key
• blog_name : 블로그의 이름 (글을 작성할 블로그이름)
• base_folder : 동작기준이되는 local folder path

6.2. 블로그 정보 획득 (카테고리정보획득)

6.3. 블로그 게시글 백업

6.4. 블로그 게시글 업로드(스캔)

7. meta file

각 [파일명].assets 폴더 혹은 각 폴더의 최상단에 json 형식의 meta file 이 있습니다. 각각의 메타파일은 파일의 정보 혹은 폴더 정보들이 작성되며 프로그램동작시 자동으로 생성, 삭제, 업데이트 됩니다.

메타파일을 확인하여 해당 파일들의 업데이트 상태나, 웹경로 등등 정보를 확인할 수있습니다.

7.1. post meta

작성중…

7.2. folder meta

작성중…

7.3. attach meta

작성중…

8. 개선예정사항

티스토리 자동 포스팅 만들어보도록 한다.

티스토리 자동포스팅?

개인적으로 티스토리를 사용할때 가장큰 불만은…

• 마크다운 을 지원하지 않는 것
• 블로그의 데이터들이 온전히 나의것이 아닌것 같다.

위의 두가지의 단점을 모두 해결해준것은 hexo 였다.

하지만. 블로그 유입 및 애드센스 수익이 조금이나마 나고 있는 기존의 티스토리를 버릴수가 없었다. 그래서 아예 hexo 와 같은 기능(?)을 간단하게 구현해보도록 한다.

github 쪽에 몇 가지 프로젝트들을 찾아보고 간단하게나마 테스트해보니 생각보다 간단하게 구현가능한것을 확인하였다.

필요한것은 만들어서쓰자.

사용언어 및 개발툴

가장 핫하다는 python으로 개발하도록 한다. (python 은 개인적으로 취미코딩, 생활코딩하기에 딱 적당한 난이도인것 같다.)

그래서.. 프로그램 제작에 앞서 최초 몇가지 테스트를 진행하였다.

pytistory library

https://github.com/jeongukjae/pytistory

• 기능 : tistory api 를 간단하게 사용할 수 있도록 wrap api 를 제공한다.

문서매뉴얼도 잘되어있으며, 개발자분도 나름 유지보수를 계속 해주시는것 같다. 또한 github 쪽에 커밋된 소스들을 보면 주석도 한글로 잘되어있어서 코드 분석 및 내용 파악도 쉬운편.

추후, 문제가 생기거나 신규기능등은 직접 수정 및 pull request 가 가능하지 않을까?

물론, 직접 webapi 호출해서 써도되겄지만.. 이래저래 개발의 속도를 위해서 해당 라이브러를 쓰자!

markdown tool

https://github.com/Python-Markdown/markdown

• 기능 : md 파일을 html 로 변환

일종의 마크다운 변환 엔진이라고 보면된다. 어차피 티스토리의 본문에는 생짜 html 코드로 올리게 될것이다. 각종 스타일일등은 테마의 css 쪽에서 처리를 하게될것이다.

해당 라이브러는 역사외 전통의 라이브러로 안정성 및 예제, 플러그인등이 충분하게 있으니 안심. 몇가지 다른 라이브러리들을 테스트해봤으니 본 라이브러리 만한 것을 못봤다.

계속적으로 업데이트도 되고있으니, 안쓸이유가 없다.

간단한 프로그램 구현 계획

markdown tool 로 html 로 변환 후에 pytistory 로 올리는 기능을 구현하도록한다. 각 라이브러리의 예제 코드로 테스트해보니 코딩량은 생각보다 많지 않을것으로 예상된다.

간단 동작루틴

메인동작은 linux server 에서 동작시키도록 한다. 즉, 다음의 동작들은 주기적으로 실행하게될것이다.

1. md 문서에 대한 티스토리와의 연동데이터등을 관리 (발행정보)
2. md 문서의 첨부파일(그림)등을 티스토리 에 upload 후 관리
3. md 문서의 내용중 첨부파일(그림)링크를 티스토리 upload url 로 변경
4. md 문서를 html 문서로 변환
5. html 문서로 변환된것을 티스토리에 발행
6. 해당 md 파일에 대한 발행정보를 관리

대략 이런정도면 될것 같다.

각 md 파일에 대한 발행정보등을 관리하는 이유는 해당 md파일이 티스토리에 정상적으로 올라갔을때 고유id 를 갖게되는데 해당 고유id를 이용하면 글에 대한 수정도 가능하다. 로컬에서 md 파일을 수정하게되면 수정된 파일의 고유id를 통해서 티스토리에 수정하여 재 업로드할 예정.

주기적으로 실행건과 관련하여 하나의 아이디어는 git hook 을 이용하는 것이다. 즉, md 파일이 추가, 수정, 삭제 기능등을 git hook 쪽에 걸어두면.. 매번 파일시스템을 모니터링 하지 않아도 될듯 하다.

…

모든기능은 메모하면서 구현해보도록하자.

시작.

티스토리가 왠일?

이런저런 이야기나, 개발하면서 간단한 내용들을 이곳에 정리하려고 했다. 마크다운이 편하기도했고, github page 를 사용하면 호스팅을 받을 필요도 없으니 간편하고 좋은 글쓰기 플랫폼이라고 생각했다.

기존 티스토리를 사용할때 에디터가 정말 이상(이상하다기보다는 좀 너무 옛날방식)해서 뭔가 불편하고 사용하기 싫었다.

하지만 얼마전 들어가보고 깜짝놀랐다. 마크다운이 지원되며, 에디터의 ui 및 기능이 진짜 깔끔하게 변경된것이 아닌가!!

hexo 블로그의 검색노출 및 통계 부실

hexo 블로그를 만들면서, 구글이나 네이버에 검색등록도 하고 이런저런 SEO 등을 했지만.. 기존 티스토리 블로그보다 검색노출이 너무 않되었다.

대체 왜안되는지 모르겠다; 아무래도 신생? 블로그다 보니 그런것일지도..

반면 나름 티스토리는 나름 방문객도 꾸준하고, 노출도 생각보다 잘되는것 같다; (볼것 없는 블로그에 계속 유입되는것을 보면.. 내가봐도 신기하다;;)

게다가 티스토리를 할경우 유입경로나 방문객 통계 키워드 등에 대해서 통계등을 제공했지만… hexo 의 경우 정보확인불가능.

그래서…

일단, 기존의 티스토리 블로그는 그냥 운영하기로했다. 다시한번 블로그에 열을 올려보자.

사실.. 용돈이 궁하다. 애드센스 수익을 원한다.ㅠㅠ

hexo 블로그 자동 발행 시스템의 경우 너무 편하고 좋다. 그래서… 나중에 다시 활용도를 생각해보기로 하자.

• 추후에… 뭔가 자동적, 주기적으로 글을 publish 할 일이 있다면, 현재 시스템을 운영하는것이 가장 편리할듯.

블로그를 작성하여, 글을 올려보면 몇가지 불편한점이 있었다.

그 불편한점들을 직접 시스템? 을 꾸며서 편하게 작성하고자 했던 이력을 정리한다.

이전포스팅 블로그를 마크다운으로 다시 시작 에도 작성 했지만 블로그를 하다보면 가장 귀찮은게 웹에서 작성하고 게시 버튼는 누르는 행위였다.

“그럼 귀찮은걸 고쳐보자” 라고 마음먹고 작업? 삽질했다.

• Step1. hexo 선택
• Step2. hexo 폴더중 post 폴더를 분리
  • git repo 분리
• Step3. hexo Publish 서버 구성
• Step4. 글쓰기 환경꾸미기
  • hexo 의 플러그인 설치
  • hexo 글 작성후 환경꾸미기
• 결론..

Step1. hexo 선택

hexo 를 선택한이유야 여러개 있었지만, 그냥 간단해서 선택했다. (선택이유 hexo 시작하며)

일단, 할일은 hexo 에 대해서 한번 써보는것이다. 폴더구조가 어떻고, 플러그인은? 테마수정방법은? 등등.. 구글에 널려있기 때문에 굳이 작성하지 않는다.

Step2. hexo 폴더중 post 폴더를 분리

hexo 폴더중에 source/_posts 폴더는 마크다운으로 작성된 글이 있는 폴더이다. 해당 폴더를 다른 클라우드 혹은 싱크 서비스로 분리한다.

난 그냥 공부도 할겸.. 공짜기도해서.. git 의 submodule 로 분리했다.

git repo 분리

일단 hexo 엔진에 필요한 기본 코드는 모두 hexo repo 를 따로 만들어서 관리한다. 그중, _posts 부분만 subtree 로 분리하여 하나의 repo 로 만든다.

• hexo repo 는 post subtree repo 의 글을 주기적으로 pull 하여 publish 하는 역할을 한다.

즉, 이제부터는 글쓸때는 hexo 시스템에 대해서 신경쓰지 않고, 오로지 post repo 에 작성하고 commit / push 한다.

Step3. hexo Publish 서버 구성

뭐 사실, 서버구성이랄것도 없다. 그냥 주기적으로 (crontab 사용) hexo 의 post 쪽 폴더(subtree)를 pull 하고 generate / publish 하는 역할이다.

난 누군가가 오프라인으로 작성한글을 긁어다가, hexo 페이지로 만들고 publish 를 대신하게 해주고싶었다. 그 역할을 그냥 간단하게 따로 서버에서 동작하게 한것이다.

현재 해당 서버는 odroid C2 로 구성되었다. 추후, 다시 설명할 기회가 있겠지만.. 집에서 쓰는 저전력서버로는 안성맞춤;;

Step4. 글쓰기 환경꾸미기

hexo 의 플러그인 설치

hexo 로 글을 작성하다보면 가장 불편한점중 하나가.. 앞에 hexo 의 형식대로 타이틀 이나, 날짜등을 적는것인데 그것을 편하게 동작하도록 해주는 플러그인이 있다.

• hexo-enhancer : https://github.com/sisyphsu/hexo-enhancer

해당 플러그인을 설치하면 그냥, 작성하는글이 hexo용 마크다운인지 뭔지 신경쓰지 않고 바로바로 글을 작성할 수 있다.

해당 플러그인에 카테고리 관련 정렬버그가 있어 github 쪽으로 피드백했더니 고쳐주었다. 역시 능력자들이 마음도 착하다~!

hexo 글 작성후 환경꾸미기

vs code 든 어떤 에디터이건 markdown 으로 글을 작성하고, post repo 에 글을 push 만 하면 된다.

적절한 에디터의 플러그인들을 활용하면, git 에 push 하는 행위조차 자동으로 하게 할수있다.
현재 vscode 의 task 기능을 이용하여 주기적으로 글을 작성하면, commit / push 를 하도록 하고있다.
관련 기능은 추후 소개예정..

1. 컴퓨터에서 마크다운으로 글을 작성 -> post repo 에 push
2. 개인서버에서 post repo 의 글을 가져와서 hexo web page 만듬
3. 개인서버에서 웹호스팅 서비스로 데이터 전송

결론적으로 보면… 에디터에서 글을 일반 마크다운형식으로 작성하고 git repo 에 push 를 하면 끝.
추후에 hexo publish 서버쪽에서 내가 작성한 글을 pull 하여 글을 웹상에 올릴것이다.

결론..

뭐 대단한 시스템은 아니다. 하지만, 그냥 글을 편하게 에디터에서 글을 작성하면 git 으로 자동적으로 push 되고, 또한 다른 서버에서 자동적으로 웹으로 배포까지 해주니.. 블로그에 글을 올리는것은 참 쉬워졌다.

그냥 git subtree 도 써보고, 이런저런 플러그인도 사용해보고… 그냥 저냥 혼자 컴퓨터 갖고놀기는 좋은 주제다.;

사실 hexo publish server 를 gitlab ci 를 이용하여 꾸며도 된다. 하지만 몇가지 publish 하기전에 몇가지 쉘스크립트를 더 돌리고(이미지관련 path 지정) 테스트용 publish 하기전 테스트용 서버를 돌리기위해서 따로 구축하였다. 집에 원래 서버가있기도했고..^^;;

그냥 저냥 뻘짓;;;

hexo의 Next 테마에서 카테고리 화면이 이쁘지 않아서 수정한 내용을 정리한다.

Next 테마의 카테고리 화면의 불만

카테고리 화면이 다음과같이 일반 리스트로 나오는것이 불만이었다.

일반리스트로 나오다보니 뭔가 좀 허전 ㅠㅠ

next 테마의 카테고리 관련 파일들

next 테마에서 category 페이지에 관련한 파일은 다음과같다.

1
2

\themes\next\layout\page.swig
\themes\next\source\css\_common\components\pages\categories.styl

• page.swig : 페이지의 layout, css class 들에 대한 정의
• categories.styl : category 페이지의 css style

Next 테마에서 category page 수정하기

css 만으로 카테고리의 계층 표현하기

JS 니 뭐니 덕지덕지 붙는게 싫기도 하고, 그냥 간단하게 표현하고싶었다. 그래서 CSS만으로 카테고리 계층을 표현한 예제파일들중에 가장 간단한것을 소개한다. (직접작성 할 능력은 안되니 그냥 검색후 붙이는것으로 한다 .. ;;)

예제프로젝트

• https://jsfiddle.net/1fynun7a/1/
  • 해당 소스의 백업 : 링크

CSS 으로만 카테고리 계층도 표현가능하다.

Next theme 수정

\themes\next\layout\page.swig 의 내용을 다음과같이 수정한다.

• list_categories() 부분을 다음과 같이 수정

1
2
3
4
5
6
7
8
9
10
11
12

# \themes\next\layout\page.swig

## 생략

<div class="category-all">
    <ul class="tree">
        Cateogry
        {{ list_categories() }}
    </ul>
</div>

## 생략..

\themes\next\source\css\_common\components\pages\categories.styl 의 내용을 다음과같이 수정한다.

• 스타일 수정

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

.category-all-page {
  .category-all-title { text-align: center; }

  .category-all { margin-top: 20px; }

  .category-list {
    margin: 0;
    padding-left: 80px;
    list-style: none;
  }

  .category-list a {
    color: #0046af;
    font-weight: normal;
    border-bottom:none;
  }

  .category-list-item { margin: 5px 10px; list-style: none;}

  .category-list-count {
    color: $grey;
    &:before {
      display: inline;
      content: " ("
    }
    &:after {
      display: inline;
      content: ") "
    }
  }

  .category-list-child { padding-left: 10px; }

  .category-list ul  li{ 
    list-style: none;
    margin-left: 10px;
  }

  .category-list-item ul li {
    list-style: none;
    margin-left: 10px;
  }

   ul.tree, ul.tree ul {
     list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
     list-style: none;
   }
   ul.tree li {
     margin: 0;
     padding-left: 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid rgb(100,100,100);
     list-style: none;
     padding-top : 10px;
   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);
   }
}

Next 테마에서 category page 수정완료

수정후

• 수정후

간단하게 몇줄 추가하여 깔끔하게 수정완료.

• 그냥 웹 프로그래머는 아니라 프로그램 초보가 내용을 정리한다.
• 설치방법이나 관리방법은 그냥 개인적으로 편하게 생각한 방법대로 진행한 결과를 정리한다.
• git repo 등에 대한 내용포함하여 약간 복잡할수있다.
  • 편하게 따라하려면 다음의 게시물을 참고 : https://hyunseob.github.io/2016/02/23/start-hexo/

hexo 설치하기

다음의 순서대로 설치한다.

node 설치

• 윈도우즈의 경우 그냥 최신버젼을 설치하면될듯 하다.
• 리눅스의 경우 간혹 기본 배포본에 릴리즈된 node 버젼은 옛날버젼인경우가 많다. 때문에 nvm 을 이용하여 v8 이상버젼을 설치하도록한다.
  • 테스트해보니 과거버젼의 경우 간혹 hexo generate 할때 오류가 발생한다.
  • 다음의 게시물을 이용하여 nvm 설치
    • http://html5around.com/wordpress/tutorials/ubuntu-nodejs-nvm-install/
    • http://blog.jeonghwan.net/2016/08/10/nvm.html

hexo-cli 를 설치

• hexo-cli 는 hexo 를 만들고 관리할때 쓰는 명령어 프로그램이다.
• 명령어들 중에 hexo xxx 라고 나오게 되는데 해당 명령어는 모두 hexo-cli 프로그램을 이용한것이다.

  1	npm install -g hexo-cli

자세한내용은 다음의 url 을 참고하면된다.

• https://hyunseob.github.io/2016/02/23/start-hexo/

hexo 설치완료화면

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

# hexo help
Usage: hexo <command>

Commands:
  help     Get help on a command.
  init     Create a new Hexo folder.
  version  Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/

hexo 블로그만들기

자세한내용은 https://hyunseob.github.io/2016/02/23/start-hexo/ 를 참고할것.

1

hexo init <사이트명>

• 사이트명은 마음에 드는데로…

위와같이하면 hexo 블로그가 하나 만들어진다.!!

일단 위에서 만든 hexo 블로그를 아무것도 건들지 않고, 소스관리를 위한 git repo 에 올려놓자. 방법은

git repo 만들기

마음에 드는 git 서비스를 이용하여 repo를 만든다.

hexo 소스 관리용 repo 만들기

page 서비스(웹페이지 퍼블리시)를 위한 페이지가 아니라 그냥 관리용으로 만든다. 이유는 웹퍼블리쉬 사이트에 hexo 의 모든 소스를 올렸더니 관리가 귀찮고 너져분해졌다.

그래서 그냥 hexo 의 각종 소스를 올리는 곳 따로만들어서 모든 코드를 올려놓고, 나중에 generate 한 결과를 deploy 할때는 publish 용 repo 에 하도록한다.

publish 용 repo 만들기

마음에 드는 git 서비스에 page 서비스용 repo 를 만든다.

publish 용 repo는 단순히 호스팅역할만 하도록한다. 이렇게 분리하는것이 더 유리할까 싶다.

git repo 에 hexo 소스 올리기 (소스관리용)

이왕 hexo 까지 설치하였으면 git repo 까지 설정해야 그냥 개발자 스럽고… 뭔가 뿌듯할것 같아서 git 에 소스를 올려놓고 관리하도록한다.

1. git ignore 설정

   • 일단 만든 git repo 를 clone 한다음에 gitignore 를 다음과 같이 설정하자.

     1 2 3 4 5 6 7

     .DS_Store Thumbs.db db.json *.log node_modules/ public/ .deploy*/

   • npm 모듈이나 depoly 한 결과들은 자동으로 생성되는 파일들이니 repo 에 올리지 않아도 된다.

2. 만든 블로그 파일들을 해당 git repo 에 올린다.

3. 이제부터 모든 작업한 내용들은 해당 git repo 에 올리자.

이제부터 소스관리용 repo 를 받은다음에 다음과 같이하면 언제든지 동일한 사이트를 만들수있다.

다른 컴터에서 동일사이트만들기 (hexo generate)

일단 소스관리용 git 을 따로 만들었던이유가 컴퓨터를 옮겨가면서 작업하기 위함 이었다. (사실 dropbox 같은 클라우드랑 연동해도 크게 상관은 없다.)

모든 deploy, pulbic 파일 이나 node_module 들은 지금 당장은 없어도 되는 파일들이니 필수로필요한 파일들(빌드에 필요한파일들)만 올렸다가 언제든지 원할때 사이트를 빌드 할수있었다.

사이트 재생성 과정

1. 소스관리용 git 의 내용은 clone
2. node / hexo-cli 설치
3. npm install 명령어를 통해서 필요 모듈들 설치
4. hexo generate 명령어를 통해서 사이트 생성

hexo를 시작하며..

기존 블로그 서비스를 버린? 이유.

일단 기존에 TISTORY 나 WORDPRESS 등에 여러가지 내용을 정리해왔다.

그동안 블로그 서비스를 사용하면서 불편했던점은 다음과 같다.

• 문서의 일관성이 없다.
  • 의도치 않게 각종 tag를 사용하게 된다.
    • 블로그 서비스에서 제공하는 편집기에서 각종 태그가 엄청나게 들어가는 구조
  • 문서의 일관성이 없다보니, 문서를 여기저기 붙일때마다 문서 서식이 다 깨진다.
    • 블로그 작성내용을 워드로 변환하려고 할때 => 깨진다 or 서식이 망가진다.
    • 블로그 작성내용을 PDF로 변환하려고 할떼 => 깨진다 or 서식이 망가진다.
  • 다른 웹사이트에 붙여넣을때 => 엉망이된다 ㅡㅡ;
• 무겁다.
  • 티스토리의 경우 이쁘게 혹은 좀 보기좋게하려면 이런저런 코드들을 덕지덕지 붙여야한다.
  • 각종 플러그인들을 덕지 덕지 붙여야 좀 이쁘게? 보여지다보니… 무거운감도 있다.
• 포스팅 하는게 불편하다.
  • 일단 전용에디터 (웹에디터)를 써야하다보니 무조건 온라인상태에서 작성해야한다.
  • 또한, 서식이 일관적이지 않다보니 글을 작성한것이 이쁘게? 잘되었나 검토, 수정을 몇번 더해야한다.
  • 즉, 포스팅하는 속도가 느리다..

자료정리를 위한 문서형태 : 마크다운

자료정리와 관련하여 이런저런 문서제작도구를 찾다보니 마크다운이 가장 좋았다.

내가 생각하는 마크다운의 장점은 다음과 같다.

• 문서의 일관성
  • 마크다운은 딱 정해진 서식에서 텍스트로만 작성하다보니 작성한 문서의 서식은 모두 일관적이다.
  • 때문에 다른 툴을 이용하면 각종 문서로의 전환이 쉽다. 또한 전환된 결과물도 좋은편
• 가볍다.
  • 마크다운은 일반 텍스트다.
  • DB도 없고 웹엔진도 필요없다. 그냥 마크다운 뷰어만 있으면 끝.

HEXO

마크다운형식으로 블로그글도 작성하고싶었다. 마크다운으로 블로깅을 할수있는 방법이 없나 살펴봤었다.

최근 마크다운으로 웹페이지를 만드는 가장 핫한 도구는 static web generator 이다. static web generator 는 여러가지가있었는데 그중 hexo를 선택하였다.

HEXO 를 선택한 계기

아마 인터넷에서 널리 알려져있고 가장 많이 사용중인것이 jekll (https://jekyllrb.com/) 인듯 싶다. jekyll 은 ruby 기반으로 동작한다. ruby 라는 생소한 언어를 기반으로 사용하는것이 싫었다. (또 공부해야할것 같은 느낌이 싫었다.)

그래서 java script 가 요즘 핫하다고 하길래?(옛날부터 핫했지만…) javascript 로 작성된것이 없나 찾아보니.. 그중 가장 큰 프로젝트가 HEXO (https://hexo.io/ko/index.html) 였다. node 기반으로 돌아가니 node 에 대한 공부도 할겸 하여 선택하였다. (최근 node.js 로 이것저것 다양한 프로젝트에 활용하는것을 보니 node 에 대한 사용법도 익혀보자. ㄷㄷ)

인터넷에 이런저런 자료들을 찾아보니 jekll, hexo, hugo 등등은기능은다 거기서 거기고… 각자 익숙하거나 필요한 환경의 것을 사용하면 될듯 싶다.

초보자가 본 HEXO 의 장점?

그냥 node 하나면 된다. jekyll 의 경우 플러그인에 따라서 code highlight 를 하기 위해서는 python 도 사용하는 경우도 있다고한다. 하지만 HEXO 는 오로지 node 만 있으면 된다. 그냥 npm install 명령어 하나만으로 모든 패키지가 설치되고, 서버실행에서 배포까지 별도의 패키지가 필요없으므로, 초보자가 접근하는 입장에서는 HEXO 가 간단한듯 싶다.

초보자가 본 HEXO 의 단점?

모든 static web generator 가 그러하듯… 일반사용자에게 친화적이지 않다. 워드프레스의 경우 플러그인을 설치할때 검색->설치 과정만 있으면 됐었는데.. HEXO 는 검색->설치->코드수정 이 필요했다. 게다가 모든 설정파일이 텍스트 파일이다보니 직접 타이핑으로 모든 설정을 해야했다. 즉, 개발자나 이쪽에 관심이나 지식이 없으면 접근하기가 힘들다.

게다가 요즘유행하는 git page 서비스를 사용하는 방법도 일반사용자가 접근하긴 어려울듯 싶다.

즉, 개발자들에겐 좋으나 일반사용자에게는 좀 어려울듯 싶다. (나같은 초보개발자도 잘 모르겠다 어렵다 ㅠㅠ)

결론

• 생산성을 위한 글쓰기, 자료정리는 markdown 을 사용하라.

• markdown 으로 웹페이지를 만들고 공짜로 호스팅하고싶다? 그럼 static web generator 를 사용하라.