デジタルオーシャンとゴースト、そしてNext.jsを使ってブログを構築する方法

著者は、Write for Donations プログラムの一環としてMozilla Foundation に寄付をすることを選びました。

発表

ブログはあなたの知識や経験、ニュースを他の人と共有するためのメディアです。Ghostはオープンソースのプラットフォームで、モダンなブログやパブリケーションを作成・運営することができます。

Ghostはフロントエンドに使えるテンプレートを提供していますが、デザインやカスタム機能の追加には制限があります。一方、Next.jsは、製品最適化、パフォーマンス、SEOなどの課題に対する解決策を提供するReactのフレームワークです。Next.jsはReactを使ったアプリケーションの開発者体験において優位性を持っています。GhostとNext.jsを組み合わせれば、パフォーマンスとSEOが向上した静的生成のブログを作成することができます。また、デザインのカスタマイズや希望する機能の追加も可能です。

このチュートリアルでは、Ghostを使用して記事を管理し、Next.jsを使用してブログのフロントエンドを構築します。この方法を使えば、ブログのコンテンツ、デザイン、機能を自分でコントロールできます。GhostをUbuntuサーバーに自己ホストし、Silicon Cloud MarketplaceのGhost One-Click vServerを使用して展開することができます。

前提条件

このチュートリアルを完了するために必要なものは、以下の通りです：

• A Silicon Cloud account. If you do not have one, sign up for a new account.
• Ghost installed on an Ubuntu server with at least 1 GB of memory. You can deploy a Ghost One-Click vServer on Silicon Cloud or follow the Ghost documentation for manual setup.
• A registered domain name to point to your Ghost blog. You can find instructions on setting your domain on Silicon Cloud nameserver in the How To Point to Silicon Cloud Nameservers From Common Domain Registrars guide.
• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
• A Next.js project on your local machine. You can create a Next.js project through the library’s Setup step in the Getting Started guide. Use create-next-app and accept the configuration defaults.

• Tailwind installed on your local machine and configured for Next.js. After installing Next.js, follow the instructions in the Install Tailwind CSS with Next.js guide.
• A text editor like Visual Studio Code. This tutorial uses nano.
• Familiarity with React, which you can gain through the How To Code in React.js series.

ステップ1 — ゴースト上で投稿を公開する

このステップでは、Ghostのアカウントを作成し、いくつかのサンプル記事を公開します。これにより、将来のステップで表示するコンテンツが用意されます。

Ghostをインストールし、設定した後、ブログを管理するために管理者アカウントが必要になります。Ghostのインストールプロセス中に入力したURLをYOUR_DOMAINとして、YOUR_DOMAIN/ghostに移動してください。

Ghostのウェルカムページが表示されます。そこでは、アカウントを作成するよう招待されます。サイトのタイトル、お名前、メールアドレス、およびパスワードを入力してください。そして、「アカウントを作成して公開を開始する」を押してください。

左側のサイドバーの「最初に何をしたいですか？」の下で、「最初の投稿を書く」オプションを選択してください。ブログ投稿のためのタイトルと本文を入力し、右上隅の「公開」をクリックしてください。その後、「続ける」ボタンを押して最終確認し、そして「今すぐ投稿を公開」ボタンをクリックしてください。

「YOUR_DOMAIN/ghost」にアクセスしてダッシュボードを表示してください。左サイドバーから「View site」を選択すると、サイトのライブプレビューが表示されます。

このチュートリアルの後半では、ウェブサイト上でいくつかのブログ投稿を表示させます。ダッシュボードから、左のサイドバーで「投稿」を選択し、2つのブログ投稿を作成してください。それぞれに独自の名前を付けて、後で認識できるようにしてください。

このステップでは、Ghost上で管理ページを設定し、ブログ記事を公開します。現在、お使いのブログはGhostが提供するデフォルトテンプレートを使用しています。次のステップでは、よりデザインの柔軟性を持つNext.jsプロジェクトを作成します。Ghostをコンテンツ管理システム（CMS）として使用し、Next.jsをフロントエンドの構築に利用します。

ステップ2：Next.jsプロジェクトの作成

あなたは今、ブログにGhostを使う準備が整っています。このステップでは、Next.jsを使用してブログのフロントエンドを作成し、Tailwind CSSを使ってスタイルを追加します。

好きなコードエディタで作成したNext.jsプロジェクトを開いてください。pages/index.jsファイルを開いてください。

1. nano pages/index.js

ファイル内の既存のコードを削除し、次のコードを追加して、next/headからHeadコンポーネントをインポートし、Reactコンポーネントを作成してください。

import Head from 'next/head';

export default function Home() {
	return (
	);
}

ヘッドコンポーネントは、HTML内で使用する