하루의 기록

DocPad 첫삽 뜨기 (추석톤)

추석 연휴 동안 Jekyll로 만든 개인 계정 github page를 DocPad로 바꾸는 프로젝트를 시작했다.

기존에 블로그와 스터디 모임 사이트를 Jekyll로 만들어 썼는데 문서화된 내용도 그렇고, 루비도 잘 몰라서 그런지 기본 기능 외에 확장해서 사용하는 것이 조금 불편하다는 느낌을 받았다.

그래서 이번 참에 Jekyll이 아닌 다른 정적 사이트 생성기를 사용해보기로 맘 먹었다. 그 중에서도 자바스크립트로 만든 걸 써보기로 했는데 그 이유는:

1. 전에 node 기반으로 자바스크립트 코딩을 해본 적이 있다. (루비보다는 자바스크립트가 친숙함)
2. node와 npm의 편리함
3. 아무래도 웹이니 자바스크립트 구현체가 좋지 않을까 하는 막연한 기대감

StaticGen에서 몇 가지를 살펴보았는데 처음에는 DocPad 보다는 Hexo가 눈에 띄었다. 헌데 문서를 보다보니 중국어가 많아 보이길래.. 건너뛰고 좀 더 Geek 해보이는 나는 DocPad를 골랐다.

설치와 Beginner Guide까지는 무난하게 끝내고 나니 기본 사이트 구조는 대충 잡혔다. 디자인은 기본적인 사이트 골격을 잡은 후에 적용할 생각이라 웹 페이지를 구조화 하는데 중점을 두었다.

기본적으로 메뉴 구성은

• About Me
• Blog Posts
• Tags

단순하게 시작하기로 했다.

웹페이지 마크업은 html보다는 jade를 사용하기로 했다. 태그 닫는 게 너무너무 귀찮기도 하고, 태그와 컨텐츠가 좀 더 구조적으로 표현되는 것 같아서 골랐다. DocPad의 jade 플러그인은 deprecated 된 상태라 docpad-plugin-jade에서 추천하는데로 Pug를 사용하기로 했다.

eco로 되어 있는 코드를 pug로 변환하는데 삽질을 좀 하긴 했지만 대체로 무난하게 eco에서 pug로 옮겨 갈 수 있었다. 결국 차이는 javascript 코드를 어떤 문법으로 임베딩하느냐였다.

tags 플러그인을 적용하는 데는 조금 애를 먹었다. DocPad의 livereload 기능이나 watch 기능이 내가 생각한 것과 조금 다른 건지 설정 관련된 것을 변경하면 조금 동작이 이상해서 서버를 재시작해줘야 했다.

이제 Jekyll에 있던 몇 개 안되는 글을 옮겨오는 작업을 좀 하고, 디플로이까지 하면 끝이다.

2017-10-10 작업 노트

• 지금 이 포스트의 내용을 업데이트 했다.
• Jekyll에 있던 블로그 글을 옮겨왔다.

2017-10-17 작업 노트

• 코드 블록을 아름답게 보이게 하기 위해 docpad-plugin-highlightjs을 적용했다. highlight를 위한 태그와 스타일이 분리되어 있는데서 감동!
• 퍼블리싱을 하기 전에 문서를 조금 더 보기 좋게 다듬었다. 아직 스타일을 많이 입히진 않았지만 그래도 가독성이 너무 떨어지는 건 좋지 않을 것 같아서 일단 최소한의 스타일을 적용.

2017-10-18 작업 노트

웹 사이트 퍼블리싱을 해보자. docpad-plugin-ghpages 플러그인을 설치하고, 가이드 대로 따라하면 된다.

docpad.coffee에 설정 추가

plugins:
  ghpages:
    deployRemote: 'target'
    deployBranch: 'master'

Person Github Pages repo 설정

git remote add target https://github.com/username/username.github.io.git

디플로이 명령 실행

docpad deploy-ghpages --env static

/out 디렉토리의 파일들을 github page 저장소로 올려줌