Ghost

[Ghost] 7. Ghost 테마를 수정하기 위한 Local 설치

나용진

• 9 min read

Ghost Blog의 테마를 수정하기 위한 Local 설치를 진행해봅니다.

간단한 추가는 Code injection으로

요즘 Google에서 제공하는 구글 애널리틱스Google analytics 를 사용하려면 추적 스크립트를 사이트 내부에 심어야 합니다. 일반적으로는 코딩으로 해결해야하지만, Ghost CMS에서는 편의를 위해 Code injection이라는 기능을 제공합니다. 해당 위치는 Setting - Advance - Code injection에 있습니다. GTM을 비롯한 구글 애널리틱스, Prism.js 를 CDN으로 불러오는 것 등 대부분 사이트의 <head> 와 <body>에 스크립트를 삽입하는 건 여기서 해결 가능합니다.

하지만 그 외에 보여지는 폰트를 변경하거나, 넓이를 변경하거나, TOC 등을 추가하려면 Code injection 만으로는 부족한 순간이 오게됩니다. 그럴 때 우리는 테마를 직접 수정해야하죠. 하지만 웹 서버에 올라있는 건 그대로 수정하는 건 매우매우 어렵고 추천하지 않습니다. 또한 Ghost의 특징 중 하나인 Headless로 인해 굳이 웹 서버에 올라있는 걸 수정할 필요는 없기도 하죠.

headless가 뭔가요?

Headless는 말 그대로 "머리가 없다."라는 뜻입니다.
...라고 써놓고 땡하면 정말로 무슨 뜻인지 모르겠죠. 조금 더 자세하게 설명해볼까요.

Headless라고 하면 우선 Head가 뭔지 생각해봐야죠. 웹에서의 Head는 어디일까요? 바로 표시되는 영역을 말합니다. 지금 이 블로그 글을 읽고 있는 여러분이 보고 있는 지금 이 페이지가 바로 Head입니다. 어? 그런데 지금 여러분은 이 글을 읽고 있잖아요? Headless 구조인데 어떻게 읽을 수 있는거죠?

조금 더 옛날 이야기를 해보죠. 과거 초창기 웹이라는 건 내가 모든 것을 만들어서 사용자에게 던지는 구조였습니다. 그래도 되는 게 딱히 그 때는 어떤 기술이 필요한 게 아니었거든요. HTMLHyperText Mark-up Language 만 던진거에요. 저 당시에는 말 그대로 "문서document"인 겁니다. 그러다가 이미지도 던지게 되고 문서를 조금 더 꾸미게 되면서 이것저것 추가가 된거죠. 그게 바로 CSSCascading Style Sheets와 JavaScript인 겁니다.

결국 HTML, CSS, JavaScript 요소들로 인해서 웹 페이지의 표현이 점점 복잡해지게 되고 이것이 현재의 Front-end와 Back-end의 분화를 가져오게 됩니다.

이는 콘텐츠 관리 시스템Content Management System에도 마찬가지로 적용됩니다. (제 블로그에는 적용하지 않았지만) 회원 가입을 하거나 포스트의 글과 이미지를 저장하는 부분을 백엔드로, 저장한 포스트를 표시하는 부분을 프론트엔드로 분리한거죠.

그러다가 문득 이런 생각을 한 겁니다.

"어라, 그러면 굳이 프론트엔드를 고정할 필요도 없지 않아?"

네 맞습니다. 굳이 프론트엔드를 고정할 필요도 없습니다. 백엔드에서 API로 주는 정보만 제대로 받고 표시할 수만 있다면 "어떤 프론트엔드로 만들어야 한다."라고 할 이유가 없죠. 그렇게 등장한 것이 Headless CMS 입니다.

Ghost Blog는 Headless 구조로 설계된 CMS 입니다. 기본은 Handlebars.js로 만들어졌지만 굳이 저걸 사용할 필요 없이 Gastby를 쓰거나 React.js로 구현할 수 있지요.

그렇기 때문에 Ghost Blog의 Theme를 수정한다는 것은 프론트 엔드를 뜯어고친다와 같은 말이 됩니다. 그렇지만 이미 잘 짜여진 테마이기 때문에 약간씩 손 보는 건 어렵지 않습니다. 요즘은 ChatGPT에게 물어봐도 되구요. Ghost Blog의 Theme를 고치기 위해 Local 설치를 반드시 해야하는 이유를 설명하기 위해 너무 먼 길을 돌아왔군요. 준비해야할 것은 다음과 같습니다.

  • nodejs 설치
  • Ghost 설치
  • npm을 통한 gulp 설치

그럼 하나하나씩 해보도록 하죠.

1. Node.js를 설치하기

Node.js는 웹 서버를 돌리는데 반드시 필요한 "환경"을 제공해줍니다. JavaScript로 돌아가기 때문에 정말로 프론트엔드로 분화되는 데 있어서 가장 중요한 런타임Runtime, 실행환경이었죠. Node.js 설치를 위해 다음 페이지로 들어가줍니다.

제가 기억하기로는 Ghost의 환경이 18 버전에서 추천한다라고 알고 있었는데 지금은 20 버전을 추천하네요. 지금 올라와있는 LTS 버전이 20.17.0 이니 그대로 받아서 설치해주면 됩니다. 끝. 쉽죠?

2. Ghost를 Local로 설치하기

저는 윈도우 환경에서 명령 프롬프트를 즐겨 사용하기 때문에 해당 방법을 사용하지만, Powershell를 사용하셔도 동일할겁니다. Win 버튼과 R을 같이 눌러주면 화면 하단에 실행 창이 뜹니다. 거기에 CMD를 치고 엔터를 치면 명령 프롬프트 창이 뜰겁니다.

저는 MS-DOS 때부터 컴퓨터를 사용해서 이 화면이 낮설지는 않지만 요즘 분들은?

해당 창에서 Ghost Blog를 설치할 곳으로 넘어가기 위해 다음과 같이 입력해주세요.

CD 원하는 경로

## 예시
CD C:\Users\yong\Downloads\Ghost

원하는 곳으로 도착했다면 다음과 같이 입력해주세요. 그냥 복사한 뒤 붙여넣으셔도 됩니다.

npm install ghost-cli@latest -g

프로그래밍을 모르시는 분들을 위해 간단하게 뜻을 설명해드리면, 해당 명령어는 Ghost blog의 CLICommand-Line Interface 프로그램을 설치하는 명령어입니다. npm는 Node.js에서 사용가능한 프로그램이 있는 곳입니다. 아이폰의 앱스토어 같은 곳이죠. 간단하게 정리하면 다음과 같습니다.

npm에서 ghost-cli 프로그램을 설치할건데, 최신 버전(@latest)으로 설치할거고 이 프로그램은 컴퓨터 전체(-g)에서 사용할거야.

지금은 이해 못하셔도 좋습니다. 설치가 완료되면 다음 명령어도 따라 쳐주세요. 

ghost install local

그러면 ghost 설치가 완료되었습니다. 끝. 실행하는 방법은 다음과 같습니다.

ghost start
참 쉽죠?

3. Gulp 설치하기

Ghost Blog를 설치하면, 안쪽에 폴더들이 생기겠죠? 테마는 기본적으로 C:\설치한 곳\ghost\content\themes에 있습니다. 저는 casper 테마를 사용하기 때문에 casper 테마로 들어가서 VScode를 열어주었습니다.(설마 VScode도 모르고 테마 수정하려고 하신 건 아니겠죠?)

마지막으로 설치해야하는 건 Gulp 라는 Task-runner 프로그램입니다. 이후에 테마를 수정한 뒤에 단순히 저장을 해야하는 게 아니라 일정한 규칙에 의해 Build하고 zip 파일로 저장해야 테마를 업로드할 수 있거든요. 이 부분은 개발을 배워보신 분이 아니면 진짜로 이해하기 힘드니 그냥 따라 칩시다.

npm install --force

원래는 npm install만 치곤 했는데 어느날부터인가 패키지 문제로 인해 충돌이 발생해서 어쩔 수 없이 강제로 설치(--force)하게 되었습니다. 여러분들도 그냥 강제 설치하세요. 그게 빨라요. 이렇게 설치를 마치면, 기존에 없던 node_modules라는 폴더가 생기고 gulpfile.js가 생기면 완료된 겁니다.

나중에 테마를 수정하고 저장을 하려면 터미널에서 다음과 같이 입력해주면 됩니다.

npm run zip

여기까지 해서 Ghost Blog의 Local 설치를 위한 작업이 전부 끝났습니다. 아마 다음에는 제가 했던 삽질 중 하나를 공유하게 될 거 같네요. 따라하시느라 고생하셨습니다!