[구] 4. Ghost CMS 사용해보기

저를 따라 Ghost 블로그를 시작하게 되신 여러분들을 환영합니다.

다시한번 저의 소개를 하자면, 서비스기획자로 일하고 있는 용진입니다.

오늘은 오랫만에 Ghost 블로그를 시작하게 되신 여러분들을 도와드릴만한 글을 쓰게 되었습니다. 이전까지의 블로그에서는 Ghost CMS를 AWS Lightsail이라는 VPS 서비스의 인스턴스에 올리고 처음 실행하는 부분까지 알려드렸습니다. 오늘부터는 블로그를 여러분의 입맛에 맞게 설정하는 방법을 알려드리도록 하겠습니다.

Ghost 블로그 관리자 화면 보기

이전에 알려드렸다시피 Ghost 블로그의 관리자 페이지를 열기 위해서는 본인 블로그의 URL 뒷부분에 /ghost를 붙이면 됩니다. 저의 경우에는 Https://jinbap.im/ghost가 되겠군요. 실제로도 들어가질겁니다. 여러분은 ID와 PW를 모르니까 접속을 못하겠지만요. ID/PW를 입력하고 들어오면 다음 화면을 보게 될 겁니다.

화면 구성은 단순합니다. Dashboard라는 화면에는 최근에 작성한 포스트와 Ghost에서 제공하는 글들을 확인할 수 있죠. 좌측의 SNB^{Side Navigation Bar, 또는 보통 왼쪽에 있기 때문에 Left Navigation Bar(LNB)라고도 합니다} 에는 블로그로 이동하거나 글을 작성하고 관리하는 메뉴가 있습니다.

SNB 하단을 보면 좌측에 사람 얼굴같은 것을 볼 수 있습니다. 선택하면 다음과 같은 컨텍스트 메뉴가 보일겁니다. 여기서 Your profile을 선택합니다.

사용자 설정하기

현재 접속한 계정의 정보를 설정할 수 있는 곳입니다. 여러분의 별명과 메일 주소, 비밀번호 등을 설정할 수 있습니다. 이전에 Bitnami로 생성된 초기 비밀번호 등도 여기서 본인이 주로 사용할 비밀번호로 변경해주시면 됩니다.

블로그 설정하기

SNB 하단에서 사람 얼굴 옆 톱니바퀴는 Ghost 블로그의 상세 설정으로 진입하는 아이콘입니다. 클릭하시면 다음과 같은 화면을 볼 수 있습니다.

우선적으로 볼 수 있는 건 블로그의 제목과 상세 설명을 입력할 수 있는 칸입니다. 애정을 가지고 블로그를 키워보려면 이름부터 잘 지어보죠. 그 밑의 Site timezone은 시간대 설정이고 Publication Language는 블로그 주 사용 언어 설정입니다. timezone은 Seoul 또는 GMT +9:00를 찾으면 되고 주 사용 언어는 ko로 변경해주면 됩니다. 아마 이 블로그를 보신다면 한국에 사실테니깐요. 북한까지는 동일하게 설정을

다른 설정은 우선 넘어가고 Site 하단의 Design & branding을 선택해보죠. 다음 화면을 볼 수 있을겁니다.

블로그가 어떻게 표시되는 지 확인할 수 있습니다. 여기서 메뉴의 위치라든가 제목의 표시 위치 등을 조절할 수 있어요. 하나하나 눌러보시면서 본인의 마음에 드는 위치를 골라봅시다. 테마가 마음에 안든다구요? 그건 다음 시간에(펑)

마지막으로는 메뉴 설정입니다. Ghost 블로그에서는 메뉴가 따로 없습니다(?) 단지 Tag 정보에 따라 묶어서 표시하는 정도죠. 그래서 우리는 이 Tag 정보를 먼저 생성하고 메뉴를 만들어야 합니다. 이전 Site 메뉴에서 Navigation을 선택합니다.

보시면 좌측에는 이름을 기재하고, 우측에는 URL을 기재하게 되어있습니다. URL 구조는 보시다시피 https://블로그 URL/tag/tag명 구조입니다. 아까 말씀드린대로 우선 포스팅을 먼저 대략적으로라도 하나 만들고 해당 포스트에서 Tag를 먼저 기재한다음에, 그 Tag를 바탕으로 메뉴를 구성하는 것을 추천합니다. 그럼 글은 어떻게 쓰냐구요?

블로그 글을 써보자

우선 Setting 화면에서 나와서 다시 첫 관리자 화면으로 돌아와줍니다. SNB에서 Posts를 선택하면 다음 화면을 볼 수 있습니다. 여기서 New Post 버튼을 선택!

글을 쓰는 화면입니다. 제목과 본문은 알아서 잘 쓰실 수 있죠? Ghost의 에디터에서는 일반 글을 쓰는 것 외에도 다양한 것들을 입력할 수 있습니다. 이미지와 이미지 집합인 갤러리, 동영상, Twitter(X) 글이나 페이스북 글, HTML을 통한 임베드까지 가능합니다. 본문 왼쪽의 십자가가 있는 원을 선택하면 말이죠.

마지막으로 아까 말씀드린 Tag입니다. 화면 우측 상단을 보면 Preview 와 Publish 옆에 네모난 아이콘이 있을 겁니다. 해당 메뉴를 선택하면 화면 우측에서 다음 메뉴가 표시됩니다.

현재 쓰고 있는 이 글에 대한 Post settings 기능입니다. 이 글이 발행될 URL과 Tags를 입력할 수 있습니다. 그 외에도 여러 기능이 있으니 한번 살펴보시기 바랍니다.

제 이미지가 보이질 않아요!

글은 잘 보이는데 이미지가 나오지 않나요? 그렇다면 크롬이든 다른 브라우저에서든 F12 를 눌러 봅시다. 아래 화면처럼 뜰 겁니다.

개발자도구에서 위쪽을 보시면 여러 메뉴들이 보일겁니다. 그 메뉴에서 Console(아니면 한글로 콘솔이라고 적혀있을겁니다.)을 선택한 뒤 나오는 메시지를 확인해 보세요. 그 중에서 빨간 글씨로 Mixed Content: 어쩌구저쩌구가 있나요? 글자가 빨간 것을 보니 그게 문제라는 이야기인데, 왜 이런 문제가 생긴 걸까요?

Mixed Content가 뭐길래?

Mixed Content, 혼합 콘텐츠란 간단히 말씀드리면 http 연결로 제공되는 콘텐츠와 https 연결로 제공되는 콘텐츠가 섞이는 상태입니다. 크롬을 비롯한 대부분의 브라우저는 이러한 연결을 안전하지 않다고 판단합니다. 당연한 이야기지만, 보안이 있다고 하여 열었는데 내부에 보안이 되지 않은 콘텐츠가 섞여있으면 위험하니깐요. 그래서 표시가 되지 않는거죠.

그치만... 우리의 content는 죄가 없는걸?

하지만 우리가 올리는 이미지나 미리보기는 죄가 없잖아요? 그렇기때문에 풀어줘야 합니다. 풀어주기 위해서는 인스턴트에 직접 접속해서 수정해야 합니다. 이전에 Lightsail로 들어가서 Ghost를 직접 설정해 준 적이 있죠? 이번에도 마찬가지로 Lightsail로 들어가 Ghost가 실행되고 있는 인스턴스의 SSH client를 실행해봅니다. 그리고 다음 순서대로 차근차근 해봅시다.

Ghost 동작 멈추기

우리가 기계를 고치려면 일단 멈추거나 꺼야죠. Ghost도 마찬가지로 종료해줍시다. 다음 명령어를 입력해서 말이죠.

sudo /opt/bitnami/ctlscript.sh stop

Ghost config 파일 수정하기

Ghost를 멈추고나서 수리를 합시다. 우선 내부에 있는 URL 정보부터 수정해야합니다. 보통 이런 정보는 config라는 파일에 저장해놓습니다. config는 구성을 뜻하는 영어단어 Configuration의 약자로 말 그대로 시스템에 대한 구성을 파일 형식으로 저장해놓은 것을 말합니다. 다음 명령어를 한 줄 한 줄 따라쳐주세요.

cd /opt/bitnami/ghost ##config 파일이 있는 위치로 이동합니다.
sudo chmod 777 config.production.json ##config 파일을 수정합니다.  
ghost config url "https://yourdomain.im" ##https 접속을 기본으로 하도록 수정합니다.

httpd-app.conf 파일 수정하기

이 부분이 조금 어렵습니다. 왜냐면 여러분이 평생 쓸 일이 없는 vim이라는 걸 써야하거든요. vim은 리눅스에 기본적으로 내장된 텍스트 에디터입니다. 윈도우의 메모장이라고 생각하셔도 좋아요. 문제는 얘는 메모장처럼 동작하지 않는다는 점이죠. 그래서 하나하나 잘 따라하셔야합니다.

우리는 bncert-tool을 이용해서 SSL 인증서를 획득했기 때문에 해당 내용이 저장된 httpd-app.conf 파일을 열어주면 됩니다.

cd /opt/bitnami/apps/letsencrypt/conf #httpd-app.conf 파일이 있는 곳으로 이동합니다.
  sudo vim httpd-app.conf #vim 에디터로 httpd-app.conf 파일을 실행합니다.
  

이상한 글자가 마구 뜨나요? Vim 사용법을 전부 알려드리기는 어렵고 간단하게 하면 이렇습니다. 현재 타자를 쳤을 때 글자가 쳐지지 않으면 일반모드에 계신겁니다. 여기서 a를 누르면 입력모드가 됩니다. 아래에 – INSERT – 라고 뜨시죠? 여기서 화살표를 눌러 맨 위로 가줍니다. 그리고 이렇게 입력해주세요.

RequestHeader set X-Forwarded-Proto "https" #대소문자 구분해 주세요
<Directory "opt/bitnami/app/letsencrypt/.well-known"> #여기 위에 작성해주면 맞아요
  ...
</Directory>

그 다음 이대로 쳐서 빠져 나오면 끝입니다.

:wq

끝입니다. 이제 다 했어요!

Ghost 재시작

자, 이제 마지막으로 변경된 설정을 적용하기 위해 Ghost를 재시작해줍니다.

sudo /opt/bitnami/ctlscript.sh start
  

재시작한 뒤 Ghost 블로그를 다시 한번 켜보세요. 이미지가 정상적으로 뜨시나요? 그러면 이제 블로그를 더 재미있게 즐기시는 일만 남았군요. 다음에도 Ghost 블로그 관련된 글로 돌아오겠습니다.