고스트 블로그 테마 개발 환경 준비

고스트 블로그 테마 개발 환경 준비
💡
이 글은 node.js를 사용해본 경험이 있는 사람을 대상으로 쓰였습니다.

고스트 테마 개발

현재 blog.illustudio.co.kr은 Ghost에서 기본으로 제공하고 있는 Ease테마를 사용중인데요.

조금씩 바꾸면서 테스트를 하고 있는데, 매번 빌드해서 압축파일을 올리는 식으로 수정하는게 비효율적이기도 하고, 생각보다 테마 개발이 편리하도록 구조적으로 잘 만들어진 것 같아서, 직접 고스트 테마를 개발해봐야겠다는 생각이 들었습니다.


Ghost Documentation

고스트의 장점 중 하나는 문서화가 잘 되어있다는 점입니다. 아래 링크에서 고스트의 테마 개발에 관련된 내용을 확인할 수 있습니다.

Ghost Handlebars Themes - Building a custom Ghost theme - Docs
Our handlebars theme templating framework works with the Ghost API to build flexible publishing websites. Get all the tools you need to start building your custom theme here!

Ghost 로컬 설치

How to install Ghost locally on Mac, PC or Linux
A detailed local install guide for how to install the Ghost publishing platform on your computer running Mac, PC or Linux. Ideal for Ghost theme development.

일단 테마 개발을 위해 로컬에 Ghost를 설치하고 진행합니다. 위의 로컬 설치 매뉴얼에 따라 진행합니다.

npm install ghost-cli@latest -g
ghost-cli를 전역으로 설치해줍니다.

그리고 고스트를 설치할 폴더를 만들고 그 안에서 아래 명령을 이용해 고스트를 설치해줍니다.

ghost install local
현재 설치된 node버전은 16.14.2 버전, 고스트는 5.22.4 버전으로 설치되었습니다.

설치된 화면

설치가 끝나고 나면 자동으로 고스트가 실행됩니다.

http://localhost:2368 로 접속해보면 아래와 같이 기본 Casper 테마로 구동되는 고스트 화면을 확인할 수 있습니다.


고스트 명령어

  • ghost stop - 고스트 중지
  • ghost start - 고스트 시작
  • ghost log - 고스트 로그 보기
  • ghost ls - 현재 실행중인 고스트 리스트

ghost ls를 확인해보면 현재 아래와 같이 실행되고 있다는 것을 확인할 수 있습니다.


고스트 관리자 접속

http://localhost:2368/ghost 로 접속하면 위와 같이 첫 화면을 맞이할 수 있습니다. 이 부분은 고스트를 설치하면 항상 처음 나타나는 화면입니다

  • 사이트 제목
  • 관리자 이름
  • 이메일 주소(아이디 역할을 합니다)
  • 패스워드

정보는 위의 내용을 차례대로 입력해주면 됩니다.


설치는 기본적으로 여기까지 마치면 끝입니다.

이제 글을 작성하거나, 테마를 만들거나 혹은 기존의 운영중인 고스트 블로그가 있다면 백업을 받아와서 내용을 불러올 수도 있습니다.

기본적으로 Casper 테마가 설치되어있으므로, 이 테마를 변경하는 방법으로 진행해보려고 합니다.

💡
2022.11.03 update
GitHub - TryGhost/Starter: A development starter theme for Ghost
A development starter theme for Ghost. Contribute to TryGhost/Starter development by creating an account on GitHub.

고스트에서 제공하는 Starter Theme이 있어, 이것으로 대체합니다.


Handlebars

Ghost 테마는 기본적으로 Handlebars.js - HTML 템플릿 엔진을 사용하여 작성됩니다.

Handlebars

handlebars에 대한 내용은 위의 사이트에서 확인할 수 있습니다.


테마의 폴더의 구조

기본으로 설치되어있는 casper 테마 폴더를 열어보면 위와 같은 구조로 작성되어있습니다.

여기서 assets/built 부분은 개발 과정에서 다른 css/js 파일들을 기반으로 생성되는 내용들이라, 손댈 필요가 없는 폴더입니다. 이 폴더를 제외하고는 대부분 직접 추가하면서 만들어갈 수 있습니다.

각 파일 중에 핵심적인 역할을 하는 파일들은 아래와 같습니다.

  • default.hbs - 부모 템플릿 파일, head, header,footer,script 실행 영역까지 있어 실질적인 레이아웃 역할을 합니다.
  • index.hbs - index 첫페이지 메인 화면
  • post.hbs - 블로그 본문
  • page.hbs - 페이지 본문
  • tag.hbs - 태그별 리스트 화면
  • author.hbs - 글쓴이 글 모아보기 화면

Gulp 사용 준비

gulpfile.js에 이미 css의 압축, Live-reload, postcss, autoprefixer, uglify와 같은 처리 과정들이 정의 되어있기 때문에, package.json에 이미 관련 명령어들도 정의되어있습니다.

npm install

프로젝트가 설치된 폴더 중에 content/themes/casper 폴더로 이동하여 위의 명령으로 node 모듈들을 인스톨을 해줍니다.  

💡
gulpfile.js가 있는 폴더에서 설치해주시면 됩니다. 

저의 경우엔 package.json에 기본적으로 지정된 postcss 8.2.13 버전이 cssnano와 postcss-easy-import 모듈과 버전이 맞지 않는다고 안내되어 postcss 8.4.6 버전으로 설치했습니다.

npm run dev

livereload 크롬 확장 프로그램 설치

webpack, parcel, rollup, vite와 같은 번들링 도구를 사용해보신 분들이라면 HMR의 편의성을 잊지 못할겁니다.

아쉽게도 ghost에서 배포하는 기본 테마의 개발환경은 gulp로 작성되어 있어서 HMR과 유사한 자동 새로고침을 적용하려면 크롬 확장프로그램 설치도 필요합니다.

LiveReload
Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and…

Live Reload 를 설치하고 실행시켜주면, gulp watch 명령을 받아들여 이제 소스만 고쳐서 저장하면 바로바로 gulp가 화면을 새로고침 해주기때문에 편리하게 개발 할 수 있습니다.

다음 포스팅에서는 소스를 적용해 페이지들을 수정해보겠습니다.