Tec
BY NAKA.K IN NAKA-ARKIT
Contentful Gatsby Firebase でホームページを立ち上げる 準備編
2023.09.24
MacBook Pro 14inch
CHIP Apple M1 Max
RAM 32 GB
OS Ventura 13.5
Gatsbyの準備
npm install -g gatsby でgatsbyをグローバルインストールを行う。作業ディレクトリを作成したら、
cdコマンドでディレクトリへ移動し、下記のコマンドを実行する。1gatsby new
2
3$ What would you like to call your site?
4$ ✔ · web <お好きなプ ロジェクトネームを>
5$ What would you like to name the folder where your site will be created?
6$ ✔ web/ web <フォルダーの名前を気にしなければ、そのままエンター>
7$ ✔ Will you be using JavaScript or TypeScript?
8$ · JavaScript <JavaScriptかTypeScriptかお好きな方を>
9$ ✔ Will you be using a CMS?
10$ · Contentful <Contentfulのところでエンター>
11$ ✔ Would you like to install a styling system?
12$ · No (or I'll add it later) <そのままエンター>
13$ ✔ Would you like to install additional features with other plugins?
14$ · Add the Google gtag script for e.g. Google Analytics
15$ · Add responsive images
16$ · Add an automatic sitemap
17$ · Generate a manifest file <必要項目をスペースキーで選択して、Doneのところでエンター>
18最後にこの内容で進めるかを聞かれるので、
yを押し、次にcontentfulのFirebaseの準備
このサイトに飛び、googleアカウントでログインしたのち使ってみるを押し、プロジェクトを作成を押す。プロジェクトの名前を入力したのち、規約に同意しプロジェクトを作る。Google アナリティクスはオンにしたままで地域を日本に変更する。
開始するにはアプリを追加してくださいと書かれている、上部の項目からウェブを選択する。名前をつけて続行し、下記の写真の{}の中をコピーし保存しておく。
次にパソコンからFirebaseにHostするために、ターミナルで
npm install -g firebase-toolsを打ち、インストールが完了したのち、firebase loginでfirebaseのアカウントと紐付けを行う。