NetlifyとGatsbyJSを連携させる





Netlifyとは

Netlifyは静的Webホスティングサービスで、
GitHubやGitLAbなどと連携可能でGitHubなどで管理しておけば、Netlifyのサーバー上でHTMLに変換して公開してくれる
AWSとは少し違いサーバー管理不要でコンテンツを用意するだけでサイトを公開できる
URLも自動で割り当てられて、独自ドメインを設定することもできる
無料のSSL/HTTPSを提供している
無料枠はストレージ: 100GB、転送量: 100GB/月、リクエスト制限: 500 requests/分まで使用できる

Gatsbyで作成したものをGitのリポジトリに上げる

  • GitHubでリポジトリを作成

  • プロジェクトのファイルで

    1
    2
    git init
    git remote add origin https://github.com/ユーザー名/リポジトリ名.git

  • GitHubにpush

    1
    2
    git commit -m "first commit"
    git push -u origin master

リポジトリで反映されているか確認

Netlifyを使ってサイトを作成する

  • Netlifyにアクセス
    Get started for freeをクリック
  • アカウント作成
    GitHub、GitLab、Bitbucketとのアカウント連携するか、e-mailでアカウント登録できる
    今回はGitHubを使うのでGitHubをクリックして、Gatsbyで作ったものをGitHubに上げたリポジトリ名を入力する
    案内される通りにボタンを押していく
  • Build CommandとPublish directory
    この入力欄ではデプロイ時のコマンドを設定できるので、npm run buildと設定する
    branchはmasterで公開するディレクトリはpublishを入力する

以上で設定完了
名前がつけられ対応するURLをクリックするとサイトが出来上がっている