Gatsby.jsブログの公開にはNetlifyというホスティングサービスを使います。
NetlifyとGitHubを連携することで、Gatsbyで作ったサイトがWeb上に公開でき、また更新も自動で反映してくれます。
使うもの
- GitHub
- Netlify
事前準備として、GitHubとNetlifyのアカウント(無料プランでOK)を取得しておきます。
GitHubリポジトリにプロジェクトをpushする
GitHubで新しいリポジトリを作成します。
![](https://0forest.com/blog/wp-content/uploads/2018/06/ss-gatsby-netlify-01-scaled.jpg)
プロジェクトフォルダでターミナルを開きます。
スターターブログなどをコピーしてプロジェクトを作った場合、プロジェクトフォルダ内に「.git」が作成されていますので、「.git」を削除しておきます。
rm -rf .git
GitHubのコマンドに従って、リモートリポジトリにプロジェクトをプッシュします。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-01-2-scaled.jpg)
ローカルリポジトリの新規作成
git init
git add -A
git commit -m "first commit"
git remote add origin https://github.com/emmieworks/gatsby-zeroforest.git
最後の行のURLはリポジトリのURLに変更してください。
プロジェクトをプッシュ
git push -u origin master
これで、GitHubのリポジトリをみると、ファイル群が追加されています。
Netlifyでサイトを公開
NetlifyにGitHubから新規サイトを登録します。
ログインして、右上の「New Site From Git」ボタンをクリックします。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-02.jpg)
「GitHub」ボタンをクリックします。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-03.jpg)
Netlifyと連携させたいリポジトリ(先ほどプッシュしたリポジトリ)を選んで、次に進みます。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-04-scaled.jpg)
リポジトリを選択します。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-05-scaled.jpg)
「Deploy Site」をクリックします。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-06-scaled.jpg)
デプロイが開始します。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-07-scaled.jpg)
デプロイが終わるとhttps://xxx.netlify.app
というURLが表示されます。
これがHPのURLになります。
Netlifyに独自ドメインを設定する(ムームードメインの場合)
独自ドメインを設定します。
SettingsのDomainから、Custom Domainメニューのドメインを追加します。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-08.jpg)
DNS Configurationを設定します。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-09.jpg)
画面に従って、ドメインを設定していきます。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-10.jpg)
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-11-scaled.jpg)
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-12.jpg)
最後にネームサーバーの設定情報が出てくるので、これをドメインのネームサーバーに設定します。
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-13-scaled.jpg)
ムームードメインの場合
![](https://0forest.com/blog/wp-content/uploads/2021/09/ss-gatsby-netlify-14.jpg)
ムームー管理画面から、該当するドメインを選択>ネームサーバーの設定変更>「取得したドメインで使用する」
※「上級者向け」のネームサーバー1〜4に順に入力して、ネームサーバー設定変更ボタンを押して設定完了です。
その後、更新するとき
プロジェクトをビルド。
gatsby build
更新したファイルをリモートリポジトリへプッシュ
git add -A
git commit -m "update"
git push
Netlifyでデプロイされて、ホームページに変更が反映されます。