정적 블로그, Hexo 설치

정적블로그 / 동적블로그

흔히 웹에 게시된 파일의 내용이 클라이언트의 요청에 따라 바뀌지 않으면 정적(static) 페이지라고 합니다. 반대되는 개념으로 동적(dynamic)이라고 하는데요. 일반적으로 콘텐츠의 내용이 클라이언트가 요청한 파일에 담겨있고 중간 과정 없이 해당 파일을 직접 서버가 전달해 주면 정적, 콘텐츠의 내용이 클라이언트의 요청에 따라 웹 애플리케이션 서버가 서버 코드를 해석하고 DB와 연동하여 콘텐츠를 가져오는 등 요청에 따라 다른 결과를 전달한다면 동적이라고 합니다.

정적블로그

이 포스트에서 다룰 내용은 예전부터 사용은 했지만 방치되어 있던 블로그로 최근에 테마를 변경하며 이 포스트를 작성해 봅니다. 정적이고 설치형이라 장점도 있지만, 단점 역시 존재를 합니다. 장점으로는 내 마음대로 할 수 있다는 것입니다. 티스토리 역시 가능은 한데 약간의 제약이 필요하다는 생각이 들지만 정적 블로그는 정말 내 마음대로 가능은 합니다. 역시 약간의 규칙은 있어야겠지만요.

설치전

이 정적 블로그를 시작하기에는 약간의 사전 설치할 것들이 있습니다. 물론 저 같은 경우에는 원도 기반이라 약간의 제약도 있지만, 사용에 있어 불편함은 없는 것 같습니다.

Git설치, NodeJs설치, Sublime Text 3 설치

• Git 설치하러 가기
• NodeJs 설치하러가기
• Sublime Text 3 설치

전 sublimetext을 사용하지만 많은 분들이 atom을 사용하시더군요. 마크다운 언어가 쉽게 쓸 수 있어서 그런가 봅니다. 사용에 있어 편한 것을 사용하시길 바랍니다.

왜, Hexo인가? 정적블로그인가?

사실 처음 정적블로그(사이트)를 만들려고 할 때 설치도 쉽고, 관리도 쉬운 것을 찾다 보니 Hexo로 정하였습니다.(사이트가 한글을 지원해서) 정적 블로그를 만들려는 다른 이유도 있고요. 밑에...

• html만 제공하면 되므로 웹서버 설정이 간편하다.
• DB관리등 운영에 필요한 자원 소모가 거의 없다.
• 기본 컨텐츠가 md 파일이므로, 다른 플랫폼으로 이전이 쉽다.

하지만 이전 계획은 없고요. hexo나 좀 더 알았으면 합니다. 웃음..

혹시나 해서 정적사이트 인기순위 사이트도 있네요(StaticGen)

참고! 해당폴더에 쉬프트키 + 마우스오른쪽 누르시면 메뉴중에 'Git Bash Here'를 선택하여 설치하시길 바랍니다.

Hexo설치

$ npm install -g hexo-cli

다른 정적 블로그 퍼블리싱 도구들이 그렇듯 Hexo도 CLI 기반입니다. 제공되는 CLI를 사용하여 Hexo 구동에 필요한 기본 파일, 디펜던시 모듈들을 설치합니다.

저장소 만들기와 deployer플로그인설치

$ hexo init Blog # Blog 디렉토리를 생성하고 그 안에 초기화
$ cd Blog
$ npm install
$ npm install hexo-server --save # server 명령문이 실행 되지 않을 경우
$ npm install hexo-deployer-git --save # Git 서버 배포 플러그인

설치 확인하기

$ hexo -v
hexo: 4.0.0
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 13.2.0
v8: 7.9.317.23-node.20
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 79
nghttp2: 1.40.0
napi: 5
llhttp: 1.1.4
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

실행해보기

모두 설치하셨다면 실행을 해 봅니다. 커맨드 창에 hexo s를 입력하고 인터넷 브라우저를 열어 127.0.0.1:4000을 작성하여 확인을 합니다. 따라서 http://localhost:4000 로 접근할 수 있고, 커맨드 실행 시 -o 옵션을 사용하면, 서버를 실행하고 자동으로 브라우저로 연결시켜줍니다.
'Hello World'라는 글(포스트)이 자동으로 생성되는데, ./source/_posts 위치는 디렉터리 내에 있습니다.

server가 구동되는 동안 Hexo는 파일이 변경되는 것을 감지하여 자동으로 업데이트합니다. 따라서 수동으로 server를 재시작할 필요가 없습니다.(원 소스를 변경하지 않을 시에...)

$ hexo s

Hexo 설정

헥소 설정은 ./_config.yml 파일에서 할 수 있는데, 내용이 꽤 직관적이어서 기초는 쉽게 설정할 수 있습니다. (보시면 압니다.)
더 자세한 내용은 여기를 참고

글 작성

$ hexo new [layout] <title>

$ hexo n "title subtitle"
$ hexo n photo "My Gallery"

<title> 위치에 원하는 제목을 입력합니다.
제목이 공백을 포함하면 따옴표로 묶어서 입력합니다.

References

• https://hexo.io
• https://www.staticgen.com/
• https://pages.github.com/