👻

Ghostを使ってみた

2023/05/16に公開

CMS

HeadlessCMS

ghost

tech

はじめに

今回は、JavaScriptベースのオープンソースブログプラットフォームである「Ghost」について、簡単な説明と利用した手順、感想を記載しようと思います。

Ghostとは

Ghostとは、Headless CMSの1つです。

CMS
Contents Management Systemの略で、Web作成の専門的な知識がなくても簡単にホームページの作成や運営ができるシステムのこと。
headless
「head(見た目)がない」、つまり見た目の部分を管理する必要がない(フロントエンドを編集する必要がない)という意味。

ちなみに、headlessと併せて覚えるべき概念としてdecoupledがあり、これはフロントエンドとバックエンドを分離して管理する必要があるものを指します。有名どころではWordpressがこれに該当します。

さっそく利用してみる

以下の動画で利用手順を解説してくれているので、こちらを参考に利用を開始してみます。
※動画は1年以上前のものでGhostのメジャーバージョンが私の利用時と異なるため、UIや利用開始手順も大幅に異なります。
Ghost.org Complete Tutorial - Turn Your Blog into a Subscription Business

Ghost公式から利用開始する

まず、Ghostの公式Webサイトで、「Get Started-free」をクリックします。

以下のスタイルを選択する画面にとびます。

スタイルを選択する

私は「Ease」を選択しました。

すると「Ease」のプレビュー画面が表示されます。そのまま「Start with Ease」をクリックします。

セットアップ画面が表示されるので、必要情報を入力して「Continue」をクリックします。

自分に当てはまるものを選択し、「Done」をクリックします。

アカウントを作成する

必要情報を入力し、「Done」でアカウントを作成します。

クレジットカード情報を入力し、「Try Again」をクリックします。
※私は最初入力ミスをしてしまったので初期ボタンの文字はわかりません。

完了すると以下の画面が表示されます。
「Practice Publishing Website」の部分は皆さんが設定したタイトルになっていると思います。

Webサイトを編集する

※私は既にいくつか編集を行っておりますが、お気になさらず。

以下の歯車アイコンをクリックし、ホームページの編集画面に移動します。

こんな画面が表示されます。

General
出版物の情報を設定します。項目は以下です。

サイトのタイトル・説明
タイムゾーン
言語
検索エンジンでのタイトル・説明
Twitterカード、Facebookカード
SNSアカウントとのリンク
公開・非公開

Design
ホームページのデザインをします。
サイドバーには「Brand」「Site-wide」「Homepage」のプルダウンがあり、それぞれ以下を設定できます。

Brand...テーマカラー、ファビコン（ブラウザタブのアイコン）、ヘッダロゴ、背景画像
Site-wide...ヘッダロゴの位置、タイトルのフォント、ボディのフォント
Homepage...注目投稿の表示・非表示

Navigation
ヘッダメニューの追加とページへのリンクを設定します。

例えば、「Contact」というメニューをヘッダに追加しクリックすると「Contact us」ページに飛ぶように設定する場合の手順は以下です。

Contact usページを作成する
作成したページのURLをコピーする
Navigaionでヘッダメニュー名「Contact」と、コピーしたリンクを設定する

まず、ページの作成です。サイドメニューの「Pages」を開き、右上の「New Page」をクリックします。

画像、タイトル(Contact us)、内容を設定し、「Publish」をクリックします。

「Continue, final review」をクリック、「Publish page, right now」をクリックします。

以上でページ作成は完了です。ここまでの操作を完了すると、以下の画面が表示されます。
次にURLをコピーするため以下の赤枠内をクリックし、作ったページを表示します。

URLをコピーします。

最後にヘッダメニューとリンクの設定をします。
ダッシュボード画面に戻ります。
歯車アイコンより設定画面を開き「Navigation」をクリックします。

以下のように、LabelとコピーしたURLを設定し、「Save」をクリックします。

以上で、ヘッダメニューの追加とページへのリンクをの設定が完了しました。
ダッシュボード画面に戻り、「View site」より確認してみましょう。
ヘッダメニューが追加され、クリックすると作成したページが表示されるかと思います。

投稿する

投稿の手順です。「Contact us」ページを作成した手順とほぼ同じです。
ダッシュボード画面の「Posts」を開き、右上の「New Post」をクリックします。

画像、タイトル、内容を設定します。
内容については、プラスボタンをクリックすると画像やマークダウンテキスト、ギャラリー、動画など様々なものを追加できます。

以下の赤枠をクリックしタグの設定や注目投稿、公開範囲など詳細な設定もできます。

「Publish」をクリックします。

ダッシュボード画面に戻り「View site」を開くと、以下のようにFeaturedや設定したNewsタグ欄に投稿が表示されています。

Subscriberを設定する

まずはテストで自分自身をメンバーとして設定するため、ダッシュボード画面の「Members」を開き、「Add yourself as a member to test」をクリックします。
これだけで追加されます。

新しくメンバーを追加したい場合は、「New member」をクリックし、名前やメールアドレスなどの情報を入力し「Save」をクリックします。

ニュースレターを作成する

ダッシュボード画面の歯車アイコンから設定画面を開き、「Email newsletter」をクリックします。

「Customize」をクリックします。

サイドメニューで、ニュースレターの内容、メールアドレス、サインアップ時のメンバー登録、デザインを設定できます。
設定が完了したら「Save and close」をクリックします。

有料サブスクリプションを設定する

まずはhttps://stripe.com/jp を開き、Stripeアカウントを作成します。
「今すぐ始める」をクリックします。

必要情報を入力し、「アカウントを作成」をクリックします。

入力したメールアドレスに確認メールが届くので、確認を完了します。

以下の画面が表示されるので、「支払いの受け取りを設定する」をクリックします。

表示される画面で諸々の入力が完了したら「同意して送信する」をクリックします。

完了すると以下のようなダッシュボード画面が表示されます。

次に、Ghostのダッシュボード画面に戻り、歯車アイコンから設定画面を開き、「Membership」をクリックします。

以下の画面が表示されます。
「Customize Potal」をクリックすると、サインアップ用のダイアログの編集を行うことが可能です。
「Subscription access」「Defoault post access」「Commenting」では、誰が定期購読設定やサインアップできるか、投稿を閲覧できるか、投稿にコメントできるかを設定できます。

「MEMBERSHIP TIERS」では、

Free
無料会員登録の設定やサインアップ後のリダイレクトURLの設定ができます。
Premium
「Connect with stripe」をクリックし、Stripeと連携して有料会員の設定ができます。

「Connect with stripe」をクリックすると、以下のダイアログが表示されます。
Stripeにログインしている状態で、「Use test mode」をオンにし、「Connect with stripe」をクリックします。

以下のアカウントの接続画面が表示されるので、「連携する」をクリックします。

以下の画面が表示されるので、キーをコピーし

ペーストして「Save Stripe settings」をクリックします。

以上でGhostとStripeの接続が完了したので、「MEMBERSHIP TIERS」より有料会員の価格設定ができるようになります。