静的なウェブサイトとしてのゴーストゴースト


私はコンテンツを作成するためのゴーストCMSを愛し、それは私の個人的な好みです.この記事では、コンテンツの作成と書き込みのためのダイナミックバックエンドとしてゴーストを使用する方法を示します.最後に、コンテンツをgatsbyを使用して燃える高速な静的なサイトに変換する方法を示します.
これらは、ゴーストCMSから構築された静的サイトをホストするために実行されるステップです.
  • ローカル、設定、および記事を公開ゴーストをインストールします.
  • 新しいGatsby静的サイト
  • を作成します
  • はゴーストバック
  • とギャツビーを接続します
  • をテストし、ホスティングのための静的サイトを生成します.
  • ゴーストをローカルインストール


    要件
  • nodejs > 14.15.0 ( NVM経由でインストール)
    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ファイルを開きます.ちょうど発生したapiUrlcontentApiKeyに代わってください.
    これは、ゴーストからコンテンツをプルするギャツビーに伝える部分です.
    {
      "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ホスティング
    を主催している
  • GCS
  • netlify
  • Digitalocean
  • ギタブページ
  • またはサポートされている静的サイトをホストしている他のプロバイダ.