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

6535 ワード
centos7 gatsby static_site_generator static_site_generator テキストリンク

  • 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 "[email protected]"

  • 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 remote add origin https://github.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_REPO_NAME.git
git branch -M main
git push -u origin main

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

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

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

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

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

[githubページ]
[githubリポジトリ]