私がGhostを始めたのはもう2年前のことですが、今夏レンタルサーバーの自動決済が何故かうまく行かず、そのままサーバーの記録も無くなってしまいました。スナップショットなどのバックアップをしなかった自分にも落ち度はあるものの、かなりのショックでした。

あまり更新もしなかったのでいっその事やめる覚悟でいましたが、ドメイン料も毎年払ってますし、最近Ghostが1.0にリリースされ新しく変わったことを知り、再度レンタルサーバーを使ってGhostを始める覚悟を決めました。難しいインストールの手順もパッケージ化により単純になっていました。公式のサイトにもインストール方法は載っていますが、注意点もありましたので、今後のためにまとめておきます。

因みに推奨される環境は「Ubuntu 16.04」になります。

新しいユーザーの作成

もし、新しいサーバーでインストールをしようとした場合、rootの代わりに、sudoコマンドを使えるユーザーを新しく作成することが望ましいです。<user>に任意のユーザー名を入れてください。環境構築時は作成したユーザーで操作を行います。

$ adduser <user>
$ usermod -aG sudo <user>
$ su - <user>

パッケージの更新

パッケージリストを更新し、現在インストール済みのパッケージを最新化します。Ghostインストールに必要なモジュールをインストールする前の事前準備だと言えます。

$ sudo apt-get update
$ sudo apt-get upgrade

Nginxのインストール

Nginxは有名なオープンソースのサーバープログラムです。Nginxをインストールした後は、ufwコマンドを使ってHTTPHTTPSの接続を許可します。

$ sudo apt-get install nginx
$ sudo ufw allow 'Nginx Full'

MySQLのインストール

次はGhostで使うデータベースプログラムをインストールします。Sqlite3なども使えますが、私は基本的に推奨されるMySQLをインストールしました。インストール時、rootのパスワードを設定しますので、注意してください。

$ sudo apt-get install mysql-server

インストール後はGhostで使うデータベースとユーザーの作成が必要です。Ghostの設定時に必須となるので、DB名とユーザー名、パスワードなどは忘れないようにしてください。

$ mysql -u root -p
# Enter password:
mysql> create database <dbname>;
mysql> grant all on <dbname>.* to '<user>' identified by '<password>';
exit

Node.jsのインストール

Node.jsはJavascriptで動くサーバー用のエンジンです。GhostはNode.jsベースで作られているため、Node.jsのインストールは必須と言えます。Ghost起動にはバージョン6をインストールします。

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash 
$ sudo apt-get install -y nodejs

Ghost-CLIのインストール

Ghost-CLIは簡単に言うとGhostの統合パッケージになります。これで複雑なインストールの手順がかなり単純化され、しかもGhostの永続起動や中止なども簡単にできるようになりました。まずは、Ghost用フォルダを作成し、所有者を新しく作成したユーザーに設定します。

$ sudo mkdir -p /var/www/ghost
$ sudo chown <user>:<user> /var/www/ghost
$ cd /var/www/ghost

次は以下のコマンドでGhostをインストールすれば終わりです。

$ ghost install

途中でドメインアドレスやMySQL設定で作成したDB名、ユーザー名などを聞かれますので、間違いないよう設定を行ってください。もし間違いが発生してエラーとなった場合はghost setupで再度設定を行うこともできます。無事設定が終わったら、最後にGhostが起動されます。

既存はindex.jsを手動で起動し、永続化するために他のツールをインストールするなど面倒でしたが、今回はghost startコマンドで簡単に永続起動が可能となりました。同じく、中止はghost stopで出来ます。

固定ファイルの利用

Ghostを使うためのサーバーでも、たまにはGhostとは関係のない書類や音楽などの固定ファイル(Static file)を使いたい時があると思います。ghost配下のcontent/imagesにおいてもghostのドメインからアクセスはできますが、いい方法ではありません。Nginxのconfファイルに固定ファイル専用のロケーションを追加することをおすすめします。

& cd /etc/nginx/sites-enabled
$ vim <domain>.conf

Nginxのsites-enabledにあるconfファイルに、以下のようにロケーションを追加します。

location /static/ {
    alias /var/www/static/;
}

追加後はsudo service nginx restartでNginxを再起動し、ghostもまたghost startghost stopで再起動してください。これで、domain/static/music.mp3のように固定ファイルにアクセスすることができます。

Ghostのアップデート

2018年9月現在、Ghost2.0がリリースされました。0.xから1.0時のような大きな変化はありませんが、Ghost-CLIによりアップデータも楽になりましたの2.0にアップデートしてみました。以下の手順で簡単にアップデートができます。注意点としては2.0の前に、1.xの最新バージョンにする必要があることぐらいです。

sudo npm i -g ghost-cli@latest
ghost update --v1
ghost update


基本テーマの修正

今回のメジャーアップデートにより基本テーマも一新されましたが、相変わらず日本語環境と合わない部分が多かったため、少しテーマを修正しました。主に日本語向けの対応となります。

まずは、フォントを和文表示用に変更しました。フォントの変更はcontent/themes/casper/assets/builtにあるscreen.cssを修正することで可能でした。デフォルトでは本文などのフォントがgeorgia,serifに設定されていますが、私は以下の組み合わせに変更しました。

"Hiragino Kaku Gothic ProN","meiryo", sans-serif

この設定により、Macでは「ヒラギノ」が、Windowsでは「メイリオ」が選択されることになります。

また、本文の1段落のフォントサイズと行の高さを設定している以下のコードを削除して、本文全体の段落が統一されるようにしました。

.post-template .kg-card-markdown>p:first-child{font-size:1.25em;line-height:1.5em}

文章の中に写真を入れると、横幅840pxで表示された文章が横幅1040pxで表示されるので、少し統一感がないように感じます。もし写真付きでも常に文章の横幅を840pxにしたい場合は、content/themes/casper/assets/builtにあるscreen.cssの以下のコードの1040840に変更してください。

.post-full-content img,.post-full-content video{display:block;max-width:1040px;margin:1.5em auto}

デフォルトでh1などの見出しタグを使った場合、本文と見出しの区別が難しいように感じました。私はh3の見出しタグに対してスタイルを変更しました。同じくcontent/themes/casper/assets/builtにあるscreen.css.post-full-content h3に以下のスタイルを追加しています。

border-left: 5px solid #3eb0ef;padding: 10px 10px 10px 20px;margin: 20px;

ホームのプレビューでも表示される文章が「文字数」ではなく「単語数」になっているので、日本語の文面だと長く表示される問題がありました。これはcontent/themes/casper/partialsにあるpost-card.hbsのコードを以下のように修正することで解決できました。

excerpt words="**" -> excerpt characters="64"

コードハイライトの追加

文面にコードを入れる際に、統合開発ツールやテキストエディターのようにハイライトを追加することも出来ます。今回はPrism.jsを使った追加方法を記述します。

まずは、 ダウンロードページ に接続してハイライトしたい言語とテーマを選択してjscssファイルをダウンロードします。ダウンロードしたファイルはそれぞれcontent/themes/casper/assets/配下にあるjscssフォルダに格納します。

格納後はcontent/themes/casperにあるdefault.hbsを開いて以下のようにコードを追加してください。

{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}"/>
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

使い方は以下のようになります。JavaScriptのソースコードをハイライトしたい時の例です。

```javascript
ソースコード
``` 

※以上の修正を反映させるためには、ghostの再起動が必要です。

参考ページ

https://docs.ghost.org/docs/install