뚝딱뚝딱 Ghost로 기술 블로그 만들기 - (1) 설치와 호스팅

몇 개월 전쯤  페이스북 친구와 독자 분께서 아래와 같은 댓글을 남겨주셨다.

나는 망설임 없이 '고스트(Ghost)' 라고 답했다 . 지금 이 블로그는 고스트로 디지털오션(Digital Ocean) 에서 매월 5달러로 호스팅 되고 있다.  그동안 국민 블로그인 네이버, 티스토리부터, 워드프레스, 미디엄(Medium)까지 수많은 블로그 플랫폼을 사용해봤지만 좀처럼 나에게 꼭 맞는 플랫폼을 찾기 어려웠다.  기술 블로그를 운영하기 위해 마크다운(markdown) 문법, 코드 하이라이트, 수학 수식 기능이 꼭 필요했지만 거의 대부분 플랫폼이 지원하지 않았다. 테마를 수정하거나 입맛에 맞게 커스터마이징 하는 일도 힘들었다. 이곳 저곳을 전전하다보니 글 전체 목록을 관리하거나 옮기는 일도 쉽지 않았다 회사나 플랫폼에도 종속되지 않는 독립적인 나만의 공간, 콘텐츠를 갖고 싶었다. 한동안은 장고걸스 튜토리얼을 따라하며 Django 웹 프레임워크로 블로그 개발도 해봤지만 쉽지 않았다.  엉망진창인 내 코드를 뜯어 고치며 유지 보수만 하다 정작 글쓰기에 흥미를 잃어버리고 말았다. 만약 글쓰기에 좀더 집중했더라면, 지금쯤 책 한권은 나왔지 않았을까. 많은 비용을 들이지 않고 글쓰기 활동에만 집중할 수 있는 편리한 환경과 도구가 필요했다. 이집저집을 떠돌다 2년 전, 오픈 소스 블로그 플랫폼인 고스트를 알게 되었다. 군더더기 없는 깔끔한 인터페이스와 글쓰기에 최적화된 사용자 경험에 만족해 지금까지 고스트로 개인 블로그를 운영하고 있다.

본 글에서는 그동안 기술 블로그를 운영하면서 느낀 고스트의 장점을 소개하고  도메인 구입부터 고스트 설치, 디지털오션 배포까지 전 과정을 친절하게 안내하고자 한다.

유령, 고스트?  👻

고스트는 세계에서 가장 인기있는 최신 오픈 소스 블로그 플랫폼이다. 2013년 4월 고스트 재단(고스트 재단은 비영리로 직원 모두가 원격 근무를 한다.  마치 '유령'처럼 이 곳 저 곳을 떠돌면서 말이다.)은 고스트 플랫폼을 킥스타터에 출시하면서 유명세를 얻게 됐다. 현재 전 세계적으로 백만 육천개가 넘는 고스트 블로그가 운영되고 있고 애플, 스카이 뉴스, 틴더 등 유명 테크 업계에서도 공식 회사 블로그로 채택해 사용하고 있다. 내가 존경하는 엔지니이자 블로거인 코딩 호러(coding horror) 역시 2014년부터 고스트 블로그를 사용해 지식과 배움을 나누고 있다.

고스트는 블로그 설치부터 글 작성과 관리까지 모든 과정이 쉽고, 빠르고, 가볍고, 매우 간편하다. 헤드리스 Node.js 콘텐츠 관리 시스템(CMS)으로 설치형 블로그로  JSON 문서 저장 형식을 기반으로 한다. 때문에 전문적인 지식이 없어도 누구나 쉽게 데이터를 이관할 수 있다.  이외에도 구글 AMP, 통합 SEO, 소셜미디어 도구, unsplash 이미지, 태그 , 다중 언어 지원, 그룹 블로그 등 글쓰기 도구에 필요한 거의 모든 최신 자원을 지원하고 있다.

고스트 글쓰기 기능은 미디엄과 매우 흡사하다. 만약 미디엄과 비슷한 사용자 경험을 원하면서 동시에 별도 도메인으로 나만의 브랜드와 출판물을 가지고 싶다면 고스트가 바로 탁월한 선택이 될 것이다.  도메인, 테마, 스타일 등  모두 내가 선택할 수 있고 구글 에드센스를 붙여 광고로 수익을 창출할 수 있다. 아직도 미디엄과 고스트 둘 중 고민이라면 코딩 호러가 작성한 미디엄과 고스트 비교 분석(Medium vs Ghost) 글을 읽어보는 것을 추천한다.

고스트 프리미엄? 설치형?

고스트는  워드프레스와 같이 프론트엔드 및 백엔드를 설정할 수 있는 풀스택 퍼블리싱 플랫폼이다. 고스트 프리미엄(가입형)과  경우 월 29달러부터 시작하며 기본적으로 서버를 지원하기 때문에 간단하고 빠르게 블로그를 설치할 수 있다는 장점이 있다. 하지만 개인 블로그를 운영하기에 부담이 된다.

가성비 추구한다면  디지털오션에서 월 5달러인 가장 저렴한 가상 서버를 이용하는 것이 현명한 선택일 것이다.  30분만 투자하면 전문성이 느껴지는 멋진 블로그를 만들어 볼 수 있다. 이 과정은 절대로 어렵지 않다. 그럼 시작해보자.

프로젝트와 드롭릿(Droplet) 생성하기

아직 디지털 오션 계정이 없다면 추천 링크를 통해 가입하자. 한 달 동안 무료로 사용 가능한 50달러 크레딧을 받을 수 있다. 필자에게도 25달러가 보상된다.

가입 절차 중 계정 생성 로그인을 완료하면 카드정보 입력 창이 뜬다. 결제 정보를 입력해도 당장 결제가 되지 않으니 걱정하지 않아도 된다.

로그인 후 프로젝트 생성 페이지에서 새 프로젝트 my-blog를 생성한다. 사용 목적(Tell us what it's for)은 website or blog를 선택한다. (아무거나 선택해도 된다.)

프로젝트가 생성되면 드롭릿 시작하기(Get started with a droplet) 파란색 버튼을 클릭한다. 디지털오션에서는 가상서버를 드롭릿, Droplet (물방울)이라 부른다.  가상 서버를 만드는 것은 드넓은 바다와 같은 클라우드에 물방울을 하나 떨어트리는 것과 같다는 아이디어를 착안해 이름을 붙였다고 한다.

드롭릿 생성 페이지에서 이미지를 선택하기(Choose an image) 아래 탭 중 Marketplace를 선택하고 Ghost on 18.04 를 선택한다. 디지털 오션은 고스트 원-클릭 설치 애플리케이션을 지원하기 때문에 고통없이 쉽게 설치를 마칠 수 있다. 본 튜토리얼도 이 방식을 따른다. 만약 환경 구성을 변경하길 원한다면  이미지를 우분투 ubuntu로 선택하고 드롭릿을 생성한다. 공식 문서 내 How to install Ghost on Ubuntu 에 따라 설치를 진행한다.

이제 드롭릿의 크기를 선택해야 하는데 네비게이션 왼쪽 버튼을 끝까지 클릭해 5달러를 선택한다. 많은 개발자 블로거들이 많은 하루 내 수백명이 접속해도 별 문제가 없었다고 말하고 있으니 안심해도 된다.

블록 스토리지(block storage)는 드롭릿에 연결가능한 SSD 기반 클라우드 스토리지로 건너 뛰어도 된다. 데이터 센터 지역은 한국과 제일 가까운 싱가포르를 택한다.  추가 옵션(additional options) 역시 건너뛰자.

SSH 키-페어 설정하기

인증 방법이 어렵게 느껴질 수 있다. 인증(Authentication) 방법은 임시 비밀번호 인증(One-time password) 보다 SSH 인증을 사용하는 것이 좋다. 매번 서버에 접속할 때마다 임시 비밀번호를 메일로 전달받아 입력하는 과정이 번거롭기 때문이다. 파란색 New SSH Key 버튼을 누르면 SSH 키 입력 창이 뜬다.

SSH 키를 생성하기 전에, 먼저 SSH 키가 있는지 먼저 확인하자. 콘솔을 열고 ls -al ~/.ssh 명령어를 입력해 .ssh 폴더 내 SSH 키 목록을 확인한다.

➜ ls -al ~/.ssh
drwx------  12 sujinlee     384 Aug 23 19:15 .
drwxr-xr-x+ 65 sujinlee    2080 Aug 23 23:40 ..
-rw-r--r--   1 sujinlee     193 May  9 15:12 config
-rw-------@  1 sujinlee    1831 May  9 15:17 id_rsa
-rw-r--r--   1 sujinlee     403 May  9 15:17 id_rsa.pub

만약 id_rsa.pub 나 id_ras 파일이 없다면, 새로운 키-페어를 생성해야 한다.

콘솔에서 ssh-keygen 명령어를 입력하고  cat ~/.ssh/id_rsa.pub 를 입력한다.

➜ cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCjq6KSYd67Gj.....

출력된 전체 내용 (e.g  ssh-rsa AAAAB3NzaC....1)을 복사하고 SSH key content에 복사 붙여넣기한다.  Name 항목는 이름(예: my-macbook)을 입력하고 Add SSH Key 버튼을 클릭한다.   

해당 드랍렛의 SSH 인증키를 선택한다. (편의상 select all을 선택하는 것이 좋다.)

📌주의 만약 기존 SSH 키 계정이 디지털오션 이메일 계정과 다를 경우, 계정에 해당하는 SSH 키를 생성해야 한다. 기존 id_ras 파일과 중복되지 않도록 새 파일을 만들어 저장하는 것이 좋다.

ssh-keygen -t rsa -C "user@email.com<이메일 계정>" -f "is_rsa_user<파일명>" 

호스트 이름(Choose a hostname)을 기억하기 쉬운 이름으로 바꾸자. (예: my-ghost-blog) 프로젝트 선택(Select Project)은 my-blog 를 선택한다.  자동 백업 추가(Add backups)는 옵션 사항으로 무시해도된다. 모든 설정이 끝나면 초록색 드롭릿(Create Droplet) 버튼을 클릭한다.

 몇 분 후에 드롭릿 생성이 완료 되었다는 메일이 올 것이다. 프로젝트 페이지로 와서  생성된 드롭릿 IP(예: 178.128.217.115)를 확인하자.

IP 주소 창(예: http://178.128.217.115/)을 열어보면  고스트 설치 페이지가 보일 것이다. 드롭릿을 설정한 다음 도메인에 연결할 수 있다는 뜻이다.

해당 IP주소에서 드롭릿이 설정되고 호스팅된다. 이 페이지가 보이지 않는다면 드롭릿이 제대로 설정되지 않는 것이다.  

고스트와 도메인 연결하기

아직 고스트 블로그 설치가 모두 끝난 것이 아니다.  등록된 도메인이름이 필요하고, 서버 ip 주소와와 도메인을 연결해야 한다. 도메인은 숫자로 된 인터넷 주소 'IP'를 기억하기 쉬운 '문자 주소'로 대체한 것이다.  '네임서버(Name Server)'를 통해 문자 주소와 숫자 주소가 연결된다.

보통 도메인 구입 가격 연 15달러 내외로 업체에 따라 상이하다.  iwantmyname.com 에서 도메인 가격 비교를 해볼 수 있다.  com, net 으로 끝나는 도메인은 대부분 가격대가 높다.  dot.tk 에서는 tk , ml, ga 등 도메인을 무료로 제공하고 있으니 참고하자.

도메인이 준비되었다면 디지털 오션에 도메인을 추가하고  DNS 레코드를 설정할 차례다. 오른쪽 더보기 버튼을 클릭해 도메인 추가( 'Add a domain') 버튼을 클릭한다.

도메인을 입력(예: sujinlee.me) 하면 아래와 같은 DNS 레코드 리스트를 볼 수 있을 것이다.

이제 도메인을 구입한 곳에 가서 A 레코드를 새 드롭릿 IP 주소로 업데이트 한다. 나의 경우 고대디(GoDaddy)에서 sujinlee.me라는 도메인을 구입했다. DNS 관리 페이지에서 A레코드 항목에 새 IP주소로 업데이트 한다.

일반적으로 몇 분 후면 DNS 레코드 전파가 완료된다. 도메인 주소( https://sujinlee.me) 로 접속해보면 IP 주소(http://178.128.217.115/) 과 동일한 설치 화면이 보일 것이다. 이제 가상 서버에서 고스트를 설치해보자.

고스트 설치하기

드롭렛에 접속하기 위해서 디지털 오션 콘솔을 이용하거나 로컬 콘솔에서 SSH 명령어를 사용할 수 있다.  이 튜토리얼에는 로컬 콘솔에서 가상 서버에 접속하고 고스트 설치한다.

만약 로컬에서 SSH 명령어 사용에 어려움이 있다면 디지털 오션 콘솔을 이용하자.



로컬 콘솔을 열고 ssh root@<ip주소> 명령어를 입력한다. '연결을 계속 진행하시겠습니까( Are you sure you want to continue connecting (yes/no) ')라는 메시지가 나오면 yes 라고 입력한다.

➜  ~ ssh root@178.128.56.54
The authenticity of host '178.128.56.54 (178.128.56.54)' can't be established.
ECDSA key fingerprint is SHA256:lCDioAR5XalUOC0u8V0LLSoVl61r/M/2KvX3Ru2hRIo.
Are you sure you want to continue connecting (yes/no)? yes

이후 자동으로 ghost-cli 라이브러리가 설치되고 실행된다. ghost-cli는 고스트를 설치 및 구성하고 항상 최신 상태로 유지할 수 있는 명령형 인터페이스이다.  ghost 명령어로 블로그를 설치하고 관리하고 업데이트 할 수 있다.

블로그 URL을 입력하세요(Enter your blog URL) 라는 메시지가 나오면 블로그 도메인 주소를 입력한다.

Ensuring Ghost-CLI is up-to-date...
+ sudo npm i -g ghost-cli@latest
[...]

✔ Checking system Node.js version
✔ Checking logged in user
✔ Checking current folder permissions
✔ Checking operating system compatibility
✔ Checking for a MySQL installation
[...]

✔ Finishing install process
? Enter your blog URL: http://sujinlee.me

root@my-ghost-blog:~#

짜잔! 이제 블로그 주소로 들어가보면 고스트가 설치된 것을 볼 수 있다! let's encrypt도 잘 적용이 되었는지 확인해보자.

지금 보이는 화면은 고스트 블로그 기본 테마 casper 다. 고스트가 업데이트 될 때마다 기본 테마도 반영하기 때문에, 기본 테마 소스를 다운받아 커스터마이징하는 것을 추천한다. 고스트는 시맨틱 템플릿(semantic templates) 언어인 Handlebars.js를 사용하고 있다. 공식 테마 개발 문서를 참고해 직접 테마를 개발해 볼 수 있다.

관리자 계정 만들기

추후 고스트 버전 업그레이드를 위해서 항상 유저는 ghost-mgr (고스트 관리자)되어야 한다. 로컬 콘솔에서 sudo -i -u ghost-mgr를 입력한다. (가상 서버에 접속했는지 다시한번 확인하자) 유저네임이 root에서 ghost-mgr로 변경되었음을 볼 수 있을 것이다.

root@my-ghost-blog:~#     sudo -i -u ghost-mgr
ghost-mgr@my-ghost-blog:~$

서버 접속을 중단하려면 exit를 입력한다.

root@my-ghost-blog:~# exit
logout
Connection to 178.128.56.54 closed.

이제 블로그 주소 끝에 /ghost 를 입력해 고스트 블로그 관리자 화면으로 들어가보자. 아직 관리자 계정이 없기 때문에 아래와 같은 화면이 나올 것이다.

관리자 계정을 만들었으니 글을 작성하고 관리할 수 있다. 전체 글을 삭제하고 싶다면 좌측 메뉴 SETTINGS > Labs 버튼을 클릭하고 Delete all content를 클릭하면 된다.  태그도 추가하고 메뉴도 구성해보며 고스트를 탐색해보는 시간을 갖길 바란다.

🐛그러나 고스트도 버그가 있다! 고스트 2.0 버전 이후 맥, 아이패드 사용시 에디터에서 한글 작성시 첫 문단에 자모음이 분리되는 버그가 있다. 보고된 깃허브 이슈에 따르면, CodeMirror와 mobile-kit 라이브러리가 원인이라고 한다. 현재로서는 문단 처음에 스페이스 바로 띄워쓰기를 하고 글을 써야 작성해야 자모음 분리 현상을 피할 수 있다.

지금까지 디지털 오션 가상 서버인 드랍렛을 만들고, 도메인을 연결하고, 원-클릭으로 고스트 블로그를 설치해봤다. 

다음 장에서는 기본 템플릿인 casper 디자인을 수정해볼 것이다. 기본 테마에서 지원하지 않는 한국어 폰트, disqus 댓글, 수학 수식 라이브러리인 kaTeX 기능, 구글 애널리틱스 기능을 추가해본다.  마지막으로 이미지와 전체 게시물 데이터를 쉽게 이관하는 방법도 소개한다.

이제 나만의 공간이 만들어졌으니 다시 글을 쓸 수 있는 용기가 생겨났을 것이다. ✍️