GatsbyJS を使った

GatsbyJS を使ってスタティックサイトを作った。 それを GitLab にアップして、そこから Netlify が自動的にデプロイしてくれるようにした。

GatsbyJS

最初は次のサイトを参考にした。

Node.js と npm と Git はインストールしてあったから、それ以降から始めた。

Gatsby CLI をインストールした。

npm install -g gatsby-cli.

Gatsby サイトを作った。

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Starter という GitHub のリポジトリを引数に渡すらしい。 次のリンクを参考に選んだ。

この gatsby new コマンドで Git の最初のコミットまでしてくれるようで、グローバルに user.name と user.email を設定していなかったために、最初エラーになってしまった…。

自分の環境に npm と yarn のパッケージマネージャーの２つがあったため、途中でどちらを使うか選ばされた。 それから Starter で使われているパッケージのバージョンもかなりの数、選ばされた。

作ったサイトを起動した。

gatsby develop

これはかなり時間がかかる。 Starter の作り方によるのか、それとも GatsbyJS 自体がこれくらいの時間がかかるのか。 30 秒くらい待たされる。

Hugo は一瞬なのに。

そして、ターミナルに表示された http://localhost:8000/ へアクセスする。 ちゃんと表示された。

終了する時はターミナルから Ctrl + C。

なんか、 gatsby develop で起動して、終了するとプロンプトが戻ってこなくなる。 とりあえず放置。

GitLab へ

これを Netlify にデプロイしたいんだけど。 一旦 GitLab へ PUSH!

次のページを参考に。

## Git push using SSH
git push --set-upstream git@gitlab.example.com:namespace/nonexistent-project.git master

## Git push using HTTPS
git push --set-upstream https://gitlab.example.com/namespace/nonexistent-project.git master

Creating projects | GitLab

ターミナルにも表示されるけど、このままじゃ次から git push origin master でプッシュできないので、次のコマンドを入力する。

git remote add origin https://gitlab.example.com/namespace/nonexistent-project.git

これで origin でいける。

Netlify

Netlify にサインインして [Sites] のタブから [New site from Git] をクリック。

次のようなウィザード的なページが表示される。

GitHub, GitLab, Bitbucket から選択できる。 今回は GitLab を選択してウィザードの通りに進めるだけ。

Build command にはは [gatsby build] を選択。 Publish directory には [public/] を選択。

そして Deploy site!

xxxxx-xxxxx-xxxxx のような名前でサイトが作成された。 netlify.com のサブドメインなので、 xxxxx-xxxxx-xxxxx.netlify.com のようになっていた。 これをカスタムドメインにすることもできるようだ。

deploy というボタンをクリック！

Deploy in progress と表示されている。 Deploy log には「5:03:22 PM: Build ready to start」のように表示されている。

そのまま動かない。

しばらく待つ。

約３分後。

Deploy log にログが出力され始めた。 長い…。 こんなに待つのか…。

たくさんログが出力される。

「5:07:44 PM: success run static queries — 0.010」のようなログが表示された。 終わったようなので、上に戻ると Preview deploy のリンクが表示されている。 リンクをクリックするとデプロイがちゃんとできたようで、表示された。

終わり

Hugo を使って GitHub Pages にデプロイする時はスクリプトを使っていたのだけど。

Netlify はウィザードで選択していくだけでデプロイできた。 しかもその後は GitLab にプッシュするだけでデプロイしてくれる。 すごい。