gatsbyjsを使用した静的サイトの公式チュートリアル

<style>
body,h1,h2,h3{
  background-color: snow;
  font-family: 'Yu Gothic UI';
}

</style>



+ GatsbyjsのHPのコマンドを記載します。  
  <a href="https://www.gatsbyjs.com/" target="_blanc" rel=noopener noreferrer>[gatsbyjs公式サイト]</a> > [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のインストール:<a href="https://code.visualstudio.com/#alt-downloads" target="_blanc" rel=noopener noreferrer>[公式サイトはこちら]</a>  
  --省略します--  

+ Githubのアカウントを作成する:<a href="https://github.com/" target="_blanc" rel=noopener noreferrer>[公式サイトはこちら]</a>  
  --省略します--  

+ GatsbyCloudのアカウントを作成する:<a href="https://www.gatsbyjs.com/dashboard/signup/" target="_blanc" rel=noopener noreferrer>[公式サイトはこちら]</a>  
  --省略します--  
  Githubのリポジトリと連携してビルドやデプロイして公開してくれるサイト  
  界隈ではよくNetlifyなんかが使われているようだ  

## Part 1: Create and Deploy Your First Gatsby Site
  公式の画像です。  
  わかりやすいと思います。  
  <img src="https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/d61c2/deployment-workflow.png" alt="サンプル" width="80%">


+ 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、あとはブラウザで表示してみると・・・  
  <a href="http://localhost:8000/" target="_blanc" rel=noopener noreferrer>[http://localhost:8000/]</a>  
  止めるときは[Ctrl + C]でOK

  下は公式の画像です。
  <img src="https://www.gatsbyjs.com/static/b79cb66545b144295a8c6a5efeaafb20/94cea/localhost-new-site.png" alt="サンプル" width="80%">

+ Gitで新しいリポジトリを作成する : <a href="https://github.com/" target="_blanc" rel=noopener noreferrer>[公式サイトはこちら]</a>

①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でサイトを構築する : <a href="https://www.gatsbyjs.com/dashboard/" target="_blanc" rel=noopener noreferrer>[ダッシュボードはこちら]</a>

①[Add a site]をクリック  
②[Import from a repositry]から[GitHub]をクリック  
③アクセス許可のウィンドウが表示されるので許可する  
④前回作成したリポジトリが表示されていると思うので選択する  
⑤[Next]をクリック  
⑥[Build Site]をクリック  
⑦ビルド中のため少し待つ  
⑧ビルドとデプロイが完了したら上の方にある[*****.gatsbyjs.io]をクリックする

これでサイトの公開は完了した。  
Githubの更新をキャッチアップして自動でビルドを実施してくれる。

まだこの時点ではGoolgeの検索には引っかからないと思うが、油断は禁物。

---

この続きは汚れていて読めない・・・

---

基本的に以下のサイトをチュートリアルで作成していくことになります。  

<a href="https://gatsbytutorialexample.gatsbyjs.io/" target="_blanc" rel=noopener noreferrer>[githubページ]</a>  
<a href="https://github.com/gatsbyjs/tutorial-example" target="_blanc" rel=noopener noreferrer>[githubリポジトリ]</a>