Gatsby プロジェクトを xserver にアップロード

ローカルで作成した Gatsby プロジェクトを xserver 上にアップロードします。

ネット上にはいろいろな情報がありますが、ポイントさえつかめばとても簡単です。
でもポイント外すと混乱します。

環境は、linux mint 21.3 です。

ローカルで Gatsby プロジェクトを作成

まずはローカルでプロジェクトを作成します。

Gatsby CLIをインストールします(すでにインストールされている場合はこのステップは必要ありません)。


npm install -g gatsby-cli

プロジェクトを作成してサーバー起動。


gatsby new helloworld
cd helloworld
gatsby develop

http://127.0.0.1:8000/ にアクセス。

ビルドする

プロジェクトをビルドします。


gatsby build

ビルドが成功すると、helloworld/public 内に index.html が作成されます。

作成された public の容量は 1.9 MB 程度です。

xserver へのアップロード

xserver へは public フォルダだけをアップロードします。
これ知らないとハマります。

私の場合は、「user.xsrv.jp/helloworld/」の中に public フォルダをアップロードしました。

アドレスバーに「https://kunokatura.xsrv.jp/helloworld/public/」とすれば Gatsby の helloworld の index.html が表示されます。

package.json や .htaccess を設定する必要はありません。