블로깅 플랫폼 옮기기 : Wordpress 에서 Ghost 로.

나는 오랫동안 블로깅 플랫폼으로 wordpress를 써왔다. 한동안 그냥 방치하고 있었는데, 이제라도 꾸준히 글을 좀 써보려고 마음을 먹었다. 그러다가 새로운 기분도 낼 겸 블로그를 하나 새로 만들까 했는데, 마침 맘에 드는 블로깅 툴이 있어서 아예 밑바닥부터 싹 갈아엎어버렸다.

뭐 어떤 블로깅 툴을 써도 비슷하겠지만, wordpress 또한 마찬가지로 맨 처음에 호스팅을 할 것인지, 아니면 직접 운영할 것인지 결정해야 한다. 나는 예전에 http://wordpress.com 에서 호스팅을 이용했다. 추가기능을 넣지 않으면 (도메인을 붙인다던가, 유료 테마를 사용한다거나 등) 웬만한 수준의 용도로는 무료로도 충분히 사용할 수 있었다.

하지만 호스팅은 다들 알다시피 이런저런 제약사항이 많은데, 내가 불편했던 점은 다음과 같다.

  • 가장 큰 문제는 원하는 기능을 넣을 수가 없다는 것이다. 입맛대로 이런저런 커스터마이징을 하고싶은데 이게 아예 불가능했다. (플러그인 설치가 불가능하다보니 블로그를 옮기기 위한 export tool들 또한 설치를 못해서 옮기느라 손이 고생함...)
  • 이미지를 원하는 CDN에 올려서 사용하고 싶은데 불가능함.
  • 블로그 호스팅 업체 따로, 도메인 업체 따로 해야함. 귀찮음.
  • 내부적으로 뭐가 어떻게 돌아가는지 모른다. 뭔가 성미에 맞지 않음.

또한 wordpress 자체에도 맘에 들지 않는 점들이 많았다. 일단 가장 큰 문제는 wordpress는 시간이 흐르면서 너무 복잡해졌다. 난 그냥 글을 쓰고 싶은 것 뿐인데 뭔놈의 메뉴가 이렇게 많은지.

이때 눈에 들어온 것이 ghost였다.

Ghost가 뭐가 좋길래?

자세한 내용은 공식 홈페이지의 vs Worpress를 참고하면 좋다. 일단 가장 좋은 점은 글쓰기가 훨씬 편하다는 것이다. 물론 사람마다 취향차이가 있겠지만, UI가 훨씬 심플하고 Markdown을 잘 지원한다.

SEO를 하기 편하고, 퍼포먼스도 더 좋고 기타등등 많다. 하지만 내 맘에 드는점 딱 2가지를 꼽자면 위에서 말한 심플하고 글쓰기 편한 UI와, 100% 오픈소스라는 점이다. 깃허브 주소는 요기.

Ghost를 쓰면 블로깅의 목적에 좀 더 충실할 수 있고 또한 많은 사항을 내 컨트롤 하에 둘 수 있다.

ghost in production mode

ghost도 호스팅을 한다. 홈페이지에서 가입 후에 저렴한 가격으로 편하게 사용할 수 있다. 직접 설치해서 운영하는건 너무 귀찮고 신경쓸게 많다면, 호스팅을 이용하는 것도 좋은 선택이다. 직접 운영하는 것에 비해 훨씬 저렴하고, 신경쓸 것도 훨씬 적고, 보안도 알아서 챙겨주고, 업데이트도 해주고, 여튼 좋다.

하지만 나는 뭐가 어떻게 돌아가는지 잘 모르면 뭔가 찝찝해서 참지 못하는 성격이기도 하고 워드프레스를 호스팅으로 이용해보니 내맘대로 사용할 수 없는 부분들이 답답하기도 했다.

그래서 ghost는 직접 설치해서 운영하기로 했고, 이렇게 사용중이다. 그 간단한 후기를 정리해놓는다. 신경쓸 점이 은근히 많다.

0. 환경변수 세팅 NODE_ENV=production

ghost는 nodejs로 만들어져있다. phase를 지정하지 않으면 디폴트로 development 환경으로 뜨도록 되어있다. 오픈소스 개발할게 아니라면 production 모드로 띄워야한다. NODE_ENV=production 환경변수를 주면 된다.

1. nginx 뒤로 안전하게 숨기기

ghost 앱을 직접 80 포트에 물리는 것은 추천하지 않는다. 여기를 참고해보면 ghost는 root 권한으로 뜨기 때문에, ghost에 보안 문제가 생겨서 뚫려버리면 그건 노답이다. 나는 docker로 돌리고 있기때문에 직접 돌리는 것보다야 낫겠지만, 어쨌든 조언을 따라서 nginx 뒤에 배치해 놓았다.

2. admin 페이지에 SSL 적용하기

ghost의 어드민 페이지는 /ghost 혹은 /admin 경로로 접근할 수 있다. 이때 로그인을 해야하는데, 당연히 http로 하면 보안상 좋지 않다. 따라서 https 를 이용해서 로그인해야 한다.

ghost의 설정파일인 config.js 안에 다음 설정을 추가하면 /ghost 혹은 /admin 경로로 접근할때 강제로 SSL을 사용한다. 까먹고 http로 로그인하더라도 걱정할 일이 없다.

config = {  
  production: {
    forceAdminSSL: true
  }
}

하지만 위 설정을 추가하더라도 사용할 인증서가 없다면 https를 사용할 수가 없다. 여기를 보면 개인 인증서를 nginx를 통해 서빙할 수 있도록 안내되어 있다. 하지만 나는 이렇게 직접 설정하는 것이 귀찮아서 AWS를 사용했다. AWS에서는 인증서를 정말 손쉽게 발급하고 관리할 수 있는 기능을 제공한다. 인증서 사용할 일이 있다면 한번쯤 사용해보길 적극 추천한다.

3. Mail 보내기

ghost는 관리자를 위해 메일 서비스를 세팅해 놓을 것을 강력히 권장한다. 비밀번호를 잊어버렸을 경우 초기화를 위해서이다. 별거 아닌 기능같지만 운영하는 입장에서는 굉장히 중요하다. 이거 안해놓고 비밀번호 잊어버리면 답이 없다.

세팅하는 방법은 크게 3가지가 있다. Mailgun, AWS SES, Gmail을 이용하는 것이다. 각각 장단점이 있는데 나는 AWS의 SES를 이용중이다.

SES를 사용중이라면, 아래와 같이 설정하면 된다. 자세한 내용은 여기를 참고한다.

config = {  
  production: {
    mail: {
      transport: 'SMTP',
      from: 'YOUR-ADMIN@YOUR-DOMAIN.COM',
      options: {
        host: 'YOUR-SES-SERVER-NAME',
        port: 465,
        service: 'SES',
        auth: {
          user: 'YOUR-SES-ACCESS-KEY-ID',
          pass: 'YOUR-SES-SECRET-ACCESS-KEY'
        }
      }
    }
  }
}

4. privacy 체크

프라이버시 설정에는 다음과 같은 기능이 있다. 디폴트는 모두 true이다.

  • 자동 업데이트 확인 사용여부
  • 구글 폰트 사용여부
  • 그라바타 사용여부
  • RPC ping 사용여부 (새 포스팅 작성시 자동으로 검색엔진에 알리는 기능)
  • Structured data 사용여부 (포스팅들의 metatag를 3rd party social network에 알리는 기능)

아래와 같이 설정할 수 있다.

config = {  
  production: {
    privacy: {
      useUpdateCheck: true,
      useGoogleFonts: true,
      useGravatar: true,
      useRpcPing: true,
      useStructuredData: true
    }
  }
}

ghost에 기능 추가하기

1. disqus

ghost는 기본적으로 댓글 기능이 없다. 블로그에 댓글같은 커뮤니티 기능을 넣을 수 있는 프로그램들은 많지만, 그중에 제일 유명한 것은 disqus이다. disqus에 가입한 후, 스크립트를 ghost에 설치해주면 된다.

ghost를 맨 처음 설치하면 기본적으로 포함되어있는 theme은 casper라는 놈인데, 이놈을 기준으로 설명하겠다. {ghost 설치 경로}/themes/casper 디렉토리 밑에 보면 post.hbs라는 파일이 있다. 이 파일을 수정한다. 파일을 열어보면 아래와 같은 부분을 찾을 수 있다.

<section class="post-content">  
    {{content}}
</section>  

저기서 {{content}} 밑부분에다가 disqus에서 발급받은 스크립트를 설치한다. 최종적인 모습은 아래와 같다. this.page.urlthis.page.identifier에는 각각 포스팅의 url와 id를 넣어주어야 하는데, 이게 잘못 설정되면 disqus에서 보여지는 댓글들이 꼬일 수 있으므로 신경써주어야 한다. 아래와 같이 설정해주면 된다.

<section class="post-content">  
    {{content}}
    <div id="disqus_thread"></div>
    <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = '{{url absolute="true"}}';
        this.page.identifier = 'ghost-{{id}}';
    };
    (function() {
        var d = document, s = d.createElement('script');
        s.src = '//jay-ghost.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s);
    })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</section>  

2. code syntax highlight

ghost에는 댓글 기능이 없는 것처럼, 포스팅에 포함된 코드를 자동으로 syntax highlight 해주는 기능도 없다. 따라서 직접 해주어야 한다. 후보는 몇가지 있었다. 자세한 내용은 여기 참고.

둘다 괜찮은 라이브러리인데, 내가 선택한 것은 highlightjs 이다. 왜냐하면 cdn에 올라가있기 때문. 트래픽 요금 아껴야지...

ghost admin의 Code Injection에서 아래와 같이 해주면 된다.

Migration from wordpress

드뎌 ghost를 다 구축했지만, 기존에 사용하던 wordpress에서 포스팅들을 다 옮겨와야 한다. 먼저 글을 옮겨야하고, 글에 포함된 이미지를 옮겨야한다.

포스팅 옮기기

위해서 말했다시피 나는 워드프레스 호스팅 버전을 이용했기때문에 ghost 용도로 자동으로 export 해주는 툴을 설치할 수가 없었다. 따라서 그냥 디폴트로 설치되어있는 툴을 이용하여 xml로 export를 받았다.

그리고 누군가 고마운 분이 깃허브에 이 worpress xml을 ghost 용도의 json으로 변환해주는 툴을 만들어놓았다. https://github.com/jonhoo/wp2ghost

이를 이용해서 변환 후에, ghost로 import하면 된다. import할때 slug가 너무 길면 안된다던가하는 문제가 있는데 적절히 수정해주면서 하면 된다.

이미지 옮기기

호스팅(wordpress.com)을 이용했으므로 직접 서버에 붙어서 이미지를 다운받을 방법이 없었다. 그냥 포스팅 하나하나 열어보며 브라우저에서 이미지를 직접 다운받은 후에, ghost 서버로 옮겼다... 젠장.

결론

wordpress에서 ghost로 옮기기 위해 삽질을 꽤나 많이 했는데, 옮기길 잘했다. 글쓰기가 훨씬 편해서 맘에든다. 개인적으로 매우 만족. 하지만 아래와 같은 경우 wordpress가 더 잘맞을 수도 있다.

  • 다양한(때로는 복잡할 정도로 많은) 기능이 필요한 사람.
  • 댓글, 코드 하이라이팅, 이미지 관리 등을 자동으로 해줬으면 하는 사람.

하지만 아래와 같은 경우는 ghost가 좋겠다.

  • 글쓰기에 집중하고 싶은 사람
  • 심플한 UI가 좋은 사람

위에서 말했다시피 ghost 또한 호스팅 서비스를 제공하므로, 저렴한 가격에 좋은 블로그를 하나 운영하고 싶다면 ghost 호스팅도 고려해볼것.