�ݺ�ߣ

헥소로 블로그 만들기
양권성

HEXO를 이용한 블로그 만들기
▸ Github Page 저장소 만들기.

▸ Hexo CLI 설치하기
헥소는 따로 설치 파일이 제공되지 않고, npm을 통해서만 설치가 가능합니다. 
많은 사람들이 알고 있는 GUI 
(메뉴가 있고 마우스로 드래그&드랍해서 동작을 수행하는 포토샵 같은 프로그램)가 
아닌 명령어 기반의 CLI 
(MS-DOS처럼 시꺼먼 창 띄워서 mkdir로 폴더 생성하고 cd 명령어로 폴더를 변경하거나 등등)입니다.

▸ Hexo CLI 설치하기
또한 npm은 노드 기반이고 노드는 터미널에서 작동을 하는 명령어 기반의 
CLI이기 때문에 기본적으로 터미널과 친해지는 습관을 들여야합니다. 
npm 관련 명령어는 다음 링크를 참조합시다. 
https://docs.npmjs.com/#cli

▸ 기본 블로그 만들기.
먼저 블로그를 만들 폴더로 이동을 한 후 hexo init 폴더명 명령어로 블로그를 만들어줍니다. 
https://github.com/hexojs/hexo-starter 
위 저장소를 클론(내려받기)하고, package.json 안에 있는 의존성 모듈들을 설치까지 해줍니다. 
hexo-cli 관련 명령어들은 아래 링크를 참조합시다. 
https://hexo.io/docs/commands.html

▸ 블로그 테스트
블로그를 만든 폴더로 이동 후 hexo serve란 명령어로 블로그 서버를 킵니다. 
서버를 종료하려면 Ctrl+C 버튼을 누르면 됩니다.

▸ 블로그 접속

▸ 블로그 테마 변경 (테마 모음 링크)
테마를 미리 보려면 빨간색 네모 박스 안에 있는 이미지를 누르면 되고, 
설치 및 기타 등등의 정보를 보려면 파란색 상자 안의 링크를 클릭하면 됩니다.

▸ 블로그 테마 설치

▸ 블로그 테마 변경
루트 디렉토리에 있는 _config.yml 파일을 열어서 
theme를 landscape에서 다운받은 테마 이름으로 변경하면 됩니다. 
yml은 YAML 문법을 따르며 탭 대신에 띄어쓰기, 문자열에 따옴표를 쓰지 않음 
등등의 문법이 있습니다.

▸ 블로그 테마 확인
확인을 위해서는 Ctrl+C키로 기존에 있는 서버를 종료 시키고 다시 켜야합니다. 
루트 디렉토리의 _config.yml 파일을 수정했을 때는 무조건 서버를 껐다 켜줘야 합니다.

▸ 블로그 테마 확인

▸ 블로그 타이틀 변경

▸ 변경된 테마 확인
 
테마 디렉토리의 _config.yml 파일을 수정했을 때는 새로고침만 해주면 됩니다.

▸ 포스트 파일 만들기
CLI 답게 포스트 쓰기 버튼이 아니라 
hexo new post 제목 명령어로 포스트 파일을 만듭니다. 
연재를 길게 잡아야할 것 같은 경우에는 
hexo new draft 제목 명령어로 원고 초안을 만드신 이후에 
hexo publish 제목 명령어로 포스트를 완성하는 방법을 추천드립니다.

▸ Front-Matter
HTML의 <meta charset=“utf-8” />과 같이 파일에 대한 메타 데이터라고 보면 됩니다. 
JSON 문법은 잘 적용이 안 되는 것 같고 YAML 문법으로 작성하는 걸 추천합니다. 
자세한 설명은 아래 링크를 참조해주시길 바랍니다. 
https://hexo.io/docs/front-matter.html

▸ Markdown 문법
실제 포스트 내용은 마크다운 문법으로 작성하며 문법은 매우 직관적이고 쉽습니다. 
우측이 해당 마크다운 문법으로 작성한 포스트 내용이며 
자세한 문법은 아래 링크를 참조해주시길 바랍니다. 
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

▸ 포트폴리오 얹기
hexo-processor-static이라는 패키지를 설치해줍니다.

_static이라는 폴더를 새로 만들어주고 
그 안에 포트폴리오로 쓸 파일들을 쭉쭉 올려주시면 됩니다. 
폴더를 하나 만드셔서 그 안에 몰아넣으셔도 되고, 
아니면 포트폴리오 별로 폴더를 만드셔서 관리하셔도 됩니다.

확인을 위해서는 무조건 서버를 잽팅해줘야합니다.

▸ 댓글 플러그인 붙이기
테마에서 기본적으로 댓글 기능을 구현 해줬는지 확인해봐야합니다.

테마 설정 파일에서도 코멘트 플러그인을 붙일 수 있는지 확인해야합니다. 
여기서는 disqus라는 플러그인을 사용할 예정입니다.

https://disqus.com/ 로 이동해서 로그인을 한 후 GET STARTED 버튼을 클릭합니다.

빨간 네모 상자를 클릭해줍니다.

모든 정보를 입력하고 하단의 Create Site 버튼을 누르면 되는데 
그 전에 저 빨간색 상자 안의 키워드를 기억해야합니다.

사이트를 만들고 설정파일에서 아까 빨간색 상자 안에 있던 키워드를 입력해줍니다.

이제 포스트에 들어가면 댓글을 달 수 있는 것을 확인하실 수 있습니다.

▸ Github Page에 올리기 위한 패키지 설치
배포를 도와주는 hexo-deployer-git 이란 패키지를 설치해줍시다. 
자세한 사용 방법은 아래 링크를 확인해주시기 바랍니다. 
https://github.com/hexojs/hexo-deployer-git

▸ Github Page에 올리기 위한 패키지 설정
블로그 설정 파일에서 다음과 같이 입력해줍니다. 
repo에는 깃헙 페이지 저장소 주소를 입력해주면 됩니다.

▸ 현재 디렉토리를 버전관리 하기
깃헙 페이지에 올라가는 것은 정적인 파일들이기 때문에 
포스팅 전용 파일들도 버전 관리를 하고자 한다면 해당 단계를 따라야합니다.

▸ 로컬 저장소를 원격 저장소와 연결시키기

▸ 포스팅 전용 브랜치 따기

▸ npm script를 이용해서 저장소에 파일 올리기.

▸ 현재 폴더에 있는 파일들을 모두 추가하고, 
로그에 현재 시간을 추가.

▸ 포스트 작성용 브랜치에 파일 올리기.
▸ 실제 블로그 파일 전용 브랜치에 파일 올리기.
▸ npm 스크립트 실행 (배포)

▸ 포스트 작성용 브랜치에 올라간 파일들

▸ 블로그 파일 전용 브랜치에 올라간 파일들

▸ 실제 URL로 확인

남은 과제들
▸ 카테고리 및 서브메뉴
▸ RSS Feed (구독하기)
▸ Google Analytics (방문자 분석)
▸ Open Graph 만들기 (다른 사이트로 퍼갈 때 미리보기 등등)
▸ 등등… 은 이제 알아서 구현하시던가… 테마를 바꾸시던가 하세요 ㅎㅎ

�ݺ�ߣ

헥소로 블로그 만들기

More Related Content

헥소로 블로그 만들기