静的なウェブサイトとしてのゴーストゴースト
4522 ワード
私はコンテンツを作成するためのゴーストCMSを愛し、それは私の個人的な好みです.この記事では、コンテンツの作成と書き込みのためのダイナミックバックエンドとしてゴーストを使用する方法を示します.最後に、コンテンツをgatsbyを使用して燃える高速な静的なサイトに変換する方法を示します.
これらは、ゴーストCMSから構築された静的サイトをホストするために実行されるステップです.ローカル、設定、および記事を公開ゴーストをインストールします. 新しいGatsby静的サイト を作成しますはゴーストバック とギャツビーを接続しますをテストし、ホスティングのための静的サイトを生成します.
要件 nodejs > 14.15.0 ( NVM経由でインストール)
NPMとギャツビーCLI
ゴーストがインストールされたディレクトリは、すべてのローカルコンテンツ開発のルートとして機能します.プライベートGitリポジトリでチェックするのは良い考えです.
このフォルダを/バックアップをチェックしておくと、静的サイトを生成するのに役立ちます.
今ではゴーストはローカルマシン上で設定されている、それはインターネット上でそれをホストする時間です.
我々の静的なサイトは、ローカルにインストールされた幽霊から内容を引いています.これは、新しいAPIの統合が必要です.
http://localhost:2368/ghost/#/integrationsに移動し、新しいAPIキーを生成します.
生成時にAPIキーとURLが表示されます.次の手順でこれらのキーをコピーします.
静的サイトフォルダに移動し、ファイルを
これは、ゴーストからコンテンツをプルするギャツビーに伝える部分です.
以下のコマンドを実行します.
最後のステップは、私たちのサイトを構築し、静的資産を生成することです.これにより、次のいずれかのサイトがホストできます.
をホストしているGoogle firebaseホスティング
を主催している GCS netlify Digitalocean ギタブページ またはサポートされている静的サイトをホストしている他のプロバイダ.
これらは、ゴーストCMSから構築された静的サイトをホストするために実行されるステップです.
ゴーストをローカルインストール
要件
NPMとギャツビーCLI
mkdir ghost-local && cd ghost-local
# Switch Node Version if you have nvm
nvm use v14.17.0
npm install ghost-cli@latest -g
ghost install local
成功したインストールには次のメッセージがあります.✔ Checking system Node.js version - found v14.17.5
✔ Checking current folder permissions
✔ Checking memory availability
✔ Checking free space
✔ Checking for latest Ghost version
✔ Setting up install directory
☲ Downloading and installing Ghost v4.12.1 > Installing dependencies > [5/5] Building fresh packages...
✔ Downloading and installing Ghost v4.12.1
✔ Finishing install process
✔ Configuring Ghost
✔ Setting up instance
✔ Starting Ghost
Ghost uses direct mail by default. To set up an alternative email method read our docs at https://ghost.org/docs/config/#mail
-----------------------------------------------------------------------------------
Ghost was installed successfully! To complete setup of your publication, visit:
http://localhost:2368/ghost/
インストールされているサイトを表示するには、ghost ls
コマンドを使用します. ghost ls
┌─────────────┬──────────────────────────────┬─────────┬───────────────────────┬────────────────────────┬──────┬─────────────────┐
│ Name │ Location │ Version │ Status │ URL │ Port │ Process Manager │
├─────────────┼──────────────────────────────┼─────────┼───────────────────────┼────────────────────────┼──────┼─────────────────┤
│ ghost-local │ ~/personal/shanmukhsista.com │ 4.12.1 │ running (development) │ http://localhost:2368/ │ 2368 │ local │
└─────────────┴──────────────────────────────┴─────────┴───────────────────────┴────────────────────────┴──────┴─────────────────┘
サイトを見るために、localhost:2368を訪問してください.チェックする時間
ゴーストがインストールされたディレクトリは、すべてのローカルコンテンツ開発のルートとして機能します.プライベートGitリポジトリでチェックするのは良い考えです.
このフォルダを/バックアップをチェックしておくと、静的サイトを生成するのに役立ちます.
新しい静的サイトの作成
今ではゴーストはローカルマシン上で設定されている、それはインターネット上でそれをホストする時間です.
サイトテンプレートのクローン
# Create a new Directory. This is where the output of your site will reside.
gatsby new static-site https://github.com/TryGhost/gatsby-starter-ghost.git
cd static-site
ゴーストバックエンドでギャツビーを接続してください
我々の静的なサイトは、ローカルにインストールされた幽霊から内容を引いています.これは、新しいAPIの統合が必要です.
http://localhost:2368/ghost/#/integrationsに移動し、新しいAPIキーを生成します.
生成時にAPIキーとURLが表示されます.次の手順でこれらのキーをコピーします.
静的サイドプロジェクトのAPIキーを更新する
静的サイトフォルダに移動し、ファイルを
.ghost.json
ファイルを開きます.ちょうど発生したapiUrl
とcontentApiKey
に代わってください.これは、ゴーストからコンテンツをプルするギャツビーに伝える部分です.
{
"development": {
"apiUrl": "http://localhost:2368",
"contentApiKey": "xxx"
},
"production": {
"apiUrl": "http://localhost:2368",
"contentApiKey": "xxx"
}
}
テストと展開
以下のコマンドを実行します.
gatsby develop
ビルドのための静的サイト
最後のステップは、私たちのサイトを構築し、静的資産を生成することです.これにより、次のいずれかのサイトがホストできます.
SITEURL=https://site.com gatsby build
Gatsbyは、public
ディレクトリで利用できる最終的なウェブサイトをコンパイルして、構築することができなければなりません.スペースをホスティングしている静的サイトにここのすべてのファイルをコピーしてください.をホストしているGoogle firebaseホスティング
を主催している
Reference
この問題について(静的なウェブサイトとしてのゴーストゴースト), 我々は、より多くの情報をここで見つけました https://dev.to/shanmukhsista/host-ghost-cms-as-a-static-website-using-gatsby-ghost-template-14elテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol