Ghost로 블로그 이전

AWS Lightsail에 Ghost를 설치하여 블로그를 이전했다. 설치하면서 겪은 삽질과 커스터마이즈한 내용을 정리했다.

Ghost로 블로그 이전
Photo by Olena Sergienko / Unsplash

왜 옮기게 되었는가?

기존에는 개인 서버에서 블로그를 돌리고 있었다. 한동안 큰 문제가 없었는데 갑자기 장애가 연달아 터진 것이 큰 계기가 되었다. 윈도 업데이트로 자동 재부팅, 정전, 서버 파워 문제, 심지어 몇 년 간 바뀐 적 없는 IP가 갑자기 바뀌는 일까지 이 모든 일이 1달 만에 발생했다.

결과적으로 가용성 확보를 위해 AWS 위에 올리기로 했다. 직접 개발해서 사용하던 블로그 툴은 개인 노트에 사용하기로 하여 새로운 블로그 플랫폼을 찾아야했다. 그러던 차에 기존에 Ghost를 버렸던 이유인 한글 URL을 영문으로 바꿔버리는 것을 소소한 코드 수정으로 해결할 수 있다는 글을 보고 다시 Ghost를 써보기로 했다.

설치

AWS Lightsail 에 인스턴스를 하나 만들었다. Ghost 이미지가 있지만 그대로 쓰면 재미가 없으므로 우분투 위에 직접 세팅하기로 했다(여담이지만 폰을 바꿀 때도 백업으로부터 복원하지 않고 항상 처음부터 다시 세팅한다). 간편한 설치를 위해 도커로 설치했다.

실행

실행의 편의를 위해 스크립트를 작성했다.

#!/bin/sh
docker rm -f ghost-blog

docker run --name ghost-blog \
        -p 127.0.0.1:2368:2368 \
        -e url=https://www.ipari.dev \
        -v /home/ubuntu/ghost/content:/var/lib/ghost/content \
        --restart=always \
        -d ghost

nginx

nginx에서 리버스 프록시로 설정하면 된다. 하지만 정상적으로 설정했음에도 Too Many Redirection 에러가 발생하며 접속이 안되었다. 해결책은 Ghost 깃헙 이슈[1]에서 찾을 수 있었다. 아래 한 줄만 설정에 추가하면 되며, proxy_buffering 은 끄지 않아도 문제가 해결되었다.

proxy_set_header X-Forwarded-Proto $scheme;

커스터마이즈

한글 URL 허용

Ghost를 다시 쓰기로 한 결정적인 계기였으므로 가장 먼저 세팅했다. 블로그 글[2]에 따라 slugify.js , validator.js 를 수정하면된다.

도커에 설치했으므로 컨테이너 내부에서 해당 파일의 경로를 찾았다.

$ docker exec -it ghost-blog bash

수정해야하는 파일의 경로는 다음과 같았다.

/var/lib/ghost/current/node_modules/@tryghost/string/lib/slugify.js
/var/lib/ghost/current/node_modules/@tryghost/validator/lib/validator.js

컨테이너 내부에 편집기가 없으므로 파일을 편집하기 위해 외부로 복사했다.

$ docker cp ghost-blog:/var/lib/ghost/current/node_modules/@tryghost/string/lib/slugify.js .
$ docker cp ghost-blog:/var/lib/ghost/current/node_modules/@tryghost/validator/lib/validator.js .

vim 으로 가이드에 따라 파일 수정.

// slugify.js : 아래 부분 주석처리
string = unidecode(string);

// validator.js : 정규식에 한글 추가
validators.isSlug = function isSlug(str) {
    assertString(str);
    return validators.matches(str, /^[a-z0-9\-_ㄱ-ㅎㅏ-ㅣ가-힣]+$/);
};

수정한 파일을 컨테이너 내부로 복사하여 대체한다. 내부에서 외부로 복사할 때의 반대로 경로를 지정하면 된다.

편집한 컨테이너를 커밋하여 새 이미지를 만들고, 이제 이 이미지로 Ghost를 실행하면 된다.

$ docker commit {container_id} ghost-ipari

code highlight 적용

prism.js 가이드 따라 prism.css, prism-core.min.js, prisom-autoloader.min.js 를 넣으면 된다.

이 때, css는 Site Header에, js는 Site Footer에 넣어야 정상적으로 작동하는 것에 주의해야한다. (가이드에서도 css는 <head> 에, js는 <body> 에 넣어놓았다)

subscription 제거

버전 4 부터는 멤버십과 구독 기능이 추가된 듯 하다. 그런데 이게 바보같은 것이 설정에서 멤버십 기능을 비활성화해도 관련 버튼과 UI 요소가 남아있다. 별도의 테마이면 모르겠지만 기본 테마조차도 그렇다. 누군가가 CSS로 제거하는 방법을 올려놨을 것 같아서 찾아봤더니 Ghost 포럼[3]에 바로 있었다. 모든 부분이 필요하지는 않고, 내가 필요한 부분만 남겨놓았다.

a.gh-head-button,
#ghost-portal-root,
.footer-cta,
.site-footer a[href^="https://ghost.org"] { 
    display: none; 
}

  1. https://github.com/TryGhost/Ghost/issues/2796#issuecomment-68502551 ↩︎

  2. https://tmigod.com/고스트-블로그-한글-url-적용-방법/ ↩︎

  3. https://forum.ghost.org/t/v4-upgrade-disable-remove-subscribe-button-memberships/22229/6 ↩︎