라즈베리파이에 고스트(GhostJS) 블로그 설치하기 - 2편

 

 

 

 

지난 시간에 이어 고스트 블로그 설치를 계속해 보겠습니다.

 

1편에서는 설치후 실행까지 살펴보았는데 이제는 본격적으로 사용하는 방법에 대해 알아보겠습니다.

 

테마 설정하기

기본 테마보다는 좀더 멋있는 테마를 적용해 볼려고 하는 마음은 개발자라도 다 똑같지 않을 까 싶은데요,

고스트 무료 테마를 구글링 해본 결과 저는 Bleack 테마가 가장 마음에 들더라구요.

Bleak 테마 주소는 https://github.com/zutrinken/bleak 입니다.

 

MIT 라이센스로 꽁짜로 쓸 수 있습니다.

 

사용 방법은 github에서 zip형태로 다운받고 고스트 Admin화면에서 업로드하면 바로 적용됩니다.

 

 

바로가기 메뉴 설정

고스트 블로그 메인 화면에는 바로가기 메뉴가 있는데 기본적으로 Home, Tags, Author이 있습니다.

고스트 Admin화면에서는 Design > Navigation 에서 본인 입맞에 맞게 설정할 수 있습니다.

 

저는 기본적으로 있는 Home, Author, Tags 외에 About, Projects란 바로가기 메뉴를 만들었는데요,

About, Projects 바로가기는 일반적인 블로그 포스트가 아니라 Page란 개념으로 만들어야 합니다.

왼쪽 메뉴에 Pages에 들어가셔서 글을 작성하면 됩니다.

저는 About Me란 글을 작성했는데 이 글의 설정을 보시면 지정된 url이 나와 있습니다.

주소는 about-me 라고 지정되어 있네요.

 

Pages에 있는 글은 블로그 리스트가 아니기 때문에 바로가기 메뉴에서 지정해주면 됩니다.

http://xxxx.xxxx.xxx/about-me/ 주소로 지정하면 됩니다.

그럼 블로그 메인에서 바로가기에 보입니다.

 

Projects란 페이지도 똑같이 바로가기 지정하면 됩니다.

 

그럼. 대충 블로그 테마와 바로가기가 갖추어졌습니다.

 

이제 Posts에서 글을 작성하고 Publish 하면 첫번째 글이 블로깅 될겁니다. 

 

그런데 글을 쓸때는 분류를 편하게 하기 위해서 태그(Tags)를 입력하는데 이 태그를 클릭하면 해당 태그의 글 전부를 리스트 해서 보여 줘야겠죠?

 

근데 Ghost 블로그 기본 세팅이 태그를 클릭시 그 해당하는 태그의 첫번째 글만 바로 보여줍니다.

 

보통 생각했던 UI랑 달라서 제가 원했던 해당 태그 전체 리스트를 볼수 있게 테마를 수정해 보겠습니다.

 

역시 구글링하면 안 나오는게 없네요.

 

먼저 설정한 테마가 있는 폴더로 이동합니다.

 

저는 bleak 테마라 아래와 같이 이동했습니다.

 

cd content/themes/bleak-master
ls -l

파일이 뭐가 있나 보면 태그관련은 tag.hbs 란 파일이 보입니다.

 

이 파일을 잘 살펴보면 태그를 클릭시 해당 태그의 글 리스트만 보여주는데 제가 원하는 건 태그 리스트를 보여주면서 태그당 몇개의 글이 있고 해당 태그를 누르면 그에 해당하는 글만 보이게 만들고 싶었습니다.

 

그래서 일단 tag.hbs 파일의 내용을 다음과 같이 고치십시요.

 

{{!< default}}

<header id="header" class="header{{#if tag.feature_image}} has-cover{{else}}{{#if @blog.cover_image}} has-cover{{/if}}{{/if}}">
        <div class="inner">
                <span class="header-title">
                        <h1 class="header-name">{{tag.name}} <em>{{pagination.total}}</em></h1>
                        {{#if tag.description}}
                                <span class="header-description">{{tag.description}}</span>
                        {{/if}}
                </span>
        </div>
        {{#if tag.feature_image}}
        <div class="header-cover" style="background-image: url('{{img_url tag.feature_image}}');"></div>
        {{else}}
        {{#if @blog.cover_image}}
        <div class="header-cover" style="background-image: url('{{img_url @blog.cover_image}}');"></div>
        {{/if}}
        {{/if}}
</header>

<div id="post-index" class="container">

        <main class="content" role="main">

                {{> "loop"}}

        </main>

</div>

 

그리고 전체 태그를 보여주는 화면은 mysite.com/tags 란 주소로 하기 위해 세팅화면에서 Page를 하나 만듭니다.

 

Page 이름은 Tags 라고 하고 내용은 빈칸으로 둡니다.

 

그리고 아까 테마가 위치한 폴더에서 page-tags.hbs란 파일을 다음과 같이 만듭니다.

 

{{!< default}}

{{#post}}

<header id="header" class="header">
        <div class="inner">
                <span class="header-title">
                <h1 class="header-name">
                        {{title}}
                </h1>
                </span>
        </div>
</header>

<main id="site-main" class="site-main outer" role="main">
  <div class="inner">
    {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
    {{#foreach tags}}
        <a href='{{ url }}'>
        <h2>{{ name }} <small>({{ count.posts }})</small></h2>
        </a>
    {{/foreach}}
    {{/get}}
  </div>
</main>

{{/post}}

이 파일의 목적은 태그리스트를 전체로 보여주면서 각 태그별 몇개의 글이 있고 해당 태그를 누르면 관련된 태그 전체 글 목록으로 넘어갑니다.

 

이제 태그까지 만들었고 다음은 Disqus 댓글창을 만들어 봅시다.

 

디스커스 댓글 시스템 가입 및 페이지 세팅이 되어 있다는 조건에서 다음과 같이 합니다.

 

post.hbs를 편집기로 열어서 다음 코드를 해당 위치에 삽입하시면 됩니다. 위치는

 

<div id="disqus_thread"></div>

 

바로 아래에 넣으면 됩니다.

 

<script>
 var disqus_config = function() {
     this.page.url = "{{url absolute=true}}";
     this.page.identifier = "ghost-{{comment_id}}"
 };
    (function() {
    var d = document, s=d.createElement('script');
    s.src = '//YOUR-SITE-CODE.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>​

 

그리고 Code Injection 부분에 disqus 코드를 삽입하면 됩니다.

 

<script>var disqus="YOUR-SITE-CODE";</script>

 

그러면 잘 작동됩니다.

 

여기 Code Injection 부분에 구글애널리틱스 코드도 같이 넣으면 됩니다.

 

이상 Ghost 블로그를 세팅했는데요, 원하는 글을 쓰고 Github.io 에 스태틱 호스팅 하는 방법을 알아 보겠습니다.

 

 

Ghost 설정으로 라이브 서버에 연동할 수 있겠으나 보통 로컬에서 돌아가게 됩니다.

 

그래서 무료 호스팅 서비스에 업로드해야 되는데 보통 github.io를 많이 이용합니다.

 

그래서 정적사이트 제너레이트를 많이 이용하는데 그중에 고스트버스트(ghost-butster)란 파이썬 프로그램이 많이 쓰입니다.

 

설치는 pip install buster 라고 하면 되고, 사용법은 아래와 같습니다.

 

buster generate --domain=http://192.168.29.159:2369

 

로컬 서버로 돌리고 있는 주소를 --domain 옵션에 적으면 됩니다.

 

그러면 static/ 폴더에 저장되는데 이걸 자신의 github.io repository에 git push 하면 됩니다.

 

buster는 git push를 자동으로 해주는 옵션이 있는데 아래와 같이 하면 됩니다.

 

 

 

 

buster deploy

그리고 나서, 자신의 github 사이트에 가보면 git push 가 잘 되어 있을겁니다.

 

이상. 고스트 블로에 대해 알아봤습니다.

 

첫번째 글을 쓰고 나서 좀 귀찮아서 두번째를 마무리 못했는데 그 사이 어떻게 했는지 다 까먹어서 제대로 썼는지 모르겠네요.

 

아무튼 많은 도움이 됐으면 합니다.