-
GatsbyjsのHPのコマンドを記載します。
[gatsbyjs公式サイト] > [Open Source] > [Dcumentation] > [Try the Tutorial]私の都合上CentOS7で実施します。
Widwosでも実施しているのでフォローできる部分は記載しますが、Macについては触ったことがないので記載しておりません。
Google翻訳で足りるよねって方は、そちらでお願いします。
Part 0: Set Up Your Development Environment
-
nodejsのインストール
# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash # nvm --version #この時点では表示されません # su - #bashのリロードをしてください [# bash] でもOK # nvm --version # nvm install 14 # nvm use 14 # node --version # npm --version -
Gitのインストール
# yum install git # git --version # git config --global user.name "John Doe" # git config --global user.email "johnd@gmail.com" -
Gatsby CLIのインストール
■インストール # npm install -g gatsby-cli # gatsby --version # gatsby --help Usage: gatsby <command> [options] コマンド: gatsby develop Start development server. Watches files, rebuilds, and hot reloads if something changes gatsby build Build a Gatsby project. gatsby serve Serve previously built Gatsby site. gatsby info Get environment information for debugging and issue reporting gatsby clean Wipe the local gatsby environment including built assets and cache gatsby repl Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/) gatsby plugin <cmd> [plugins...] Useful commands relating to Gatsby plugins gatsby new [rootPath] [starter] Create new Gatsby project. gatsby telemetry Enable or disable Gatsby anonymous analytics collection. gatsby options [cmd] [key] [value] View or set your gatsby-cli configuration settings. オプション: --verbose Turn on verbose output [真偽] [デフォルト: false] --no-color, --no-colors Turn off the color in output [真偽] [デフォルト: false] --json Turn on the JSON logger [真偽] [デフォルト: false] -h, --help ヘルプを表示 [真偽] -v, --version Show the version of the Gatsby CLI and the Gatsby package in the current project [真偽] -
Visual Studio Codeのインストール:[公式サイトはこちら]
--省略します-- -
Githubのアカウントを作成する:[公式サイトはこちら]
--省略します-- -
GatsbyCloudのアカウントを作成する:[公式サイトはこちら]
--省略します--
Githubのリポジトリと連携してビルドやデプロイして公開してくれるサイト
界隈ではよくNetlifyなんかが使われているようだ
Part 1: Create and Deploy Your First Gatsby Site
公式の画像です。
わかりやすいと思います。
-
Gatsbyサイトを作成する
# cd /home/ # gatsby new --ここからは対話式に入力します-- ■サイト名を入力 What would you like to call your site? ? ・ My First Gatsby Site ■フォルダ名を入力 What would you like to name the folder where your site will be created? ? home/ my-gatsby-site ■JavaScriptでOK ? Will you be using JavaScript or TypeScript? ・ JavaScript ■CMSの選択 NoでOK ? Will you be using a CMS? ・ No (or I'll add it later) ■スタイリングの選択 NoでOK ? Would you like to install a styling system? ・ No (or I'll add it later) ■プラグインの選択 DoneでOK ? Would you like to install additional features with other plugins? · Done Thanks! Here's what we'll now do: ? Create a new Gatsby site in the folder my-gatsby-site ■実行しますか？ YesでOK ? Shall we do this? (Y/n) › Yes --ログ割愛--■サイトの実行 # cd my-first-gatsby-site # gatsby develop --ログ割愛--
以下の表示がされればOK、あとはブラウザで表示してみると・・・
[http://localhost:8000/]
止めるときは[Ctrl + C]でOK
下は公式の画像です。
- Gitで新しいリポジトリを作成する : [公式サイトはこちら]
①Gitのリポジトリを作成する
②リポジトリにローカルをプッシュする
以下が公式に記載のコマンド
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_REPO_NAME.git
git branch -M main
git push -u origin main
- GatsbyCloudでサイトを構築する : [ダッシュボードはこちら]
①[Add a site]をクリック
②[Import from a repositry]から[GitHub]をクリック
③アクセス許可のウィンドウが表示されるので許可する
④前回作成したリポジトリが表示されていると思うので選択する
⑤[Next]をクリック
⑥[Build Site]をクリック
⑦ビルド中のため少し待つ
⑧ビルドとデプロイが完了したら上の方にある[*****.gatsbyjs.io]をクリックする
これでサイトの公開は完了した。
Githubの更新をキャッチアップして自動でビルドを実施してくれる。
まだこの時点ではGoolgeの検索には引っかからないと思うが、油断は禁物。
この続きは汚れていて読めない・・・
基本的に以下のサイトをチュートリアルで作成していくことになります。