👨‍💻

エンジニア未経験者とGatsby.jsでブログを作る

2022/04/21に公開

友人からブログを作りたいという相談を受け、gastby.jsで一緒にブログをつくることになりました。その際の備忘録です。

前提

Wordpressを触った上で、もうすこしサイトをいじりたいという要望
自分のブログに好感触を抱いてもらったのでgatsby.jsでブログをつくることに
友人は現在PCを使えず、iPadが使える環境

つかうもの

github：ソースコード管理
gitpod：iPadでもgatsby.jsを動かせるIDEとして使用
Netlify：ビルド＆デプロイ（自分が使っているのでサポートしやすい）

開発手順

templateを使ってリポジトリをつくる

gastbyのスターターブログのリポジトリに移動し、「Use this template」をクリックします。
use this templateの位置

Repository name, PublicかPrivateを選択して「Create repository from template」をクリックします。とくに理由がなければ、Privateを推奨します。Publicを選択すると、サイトには公開していない執筆中の記事を誰でも閲覧できるようになってしまうためです。

リポジトリ作成時の記入例

以上でリポジトリがつくれました。

gitpodで開発環境を動かす

https://gitpod.io/workspaces

gitpodにアクセス、githubアカウントでログインします。「New Workspace」をクリックします。

New Workspaceの場所

先ほど入力したRepository nameで検索し、作成したリポジトリを選択します。その後、ローディング画面が表示されるので待ちます。
画面が切り替わっても、インストールなどを行っているので以下のようになるまで、待ちます。
準備が整ったときのターミナルの画像

開発環境が動くか確認

画面の左にある、

パソコンのようなマーク(画像の青い印の部分)をクリック
8000と書かれた場所にカーソルを持っていき、地球のようなマーク(赤い印の部分)をクリック

タブが開いて、このように表示されれば、開発環境が動作しています。
正常に動いた場合に表示されるサイト

ここまでお疲れ様です🎉🎉

デプロイする

サイトを表示することができましたが、まだ世界へは配信されていません。
サイトを公開する必要があります。

githubにpush

せっかく動いたので、ここまでを保存しておきましょう。そのためにGithubへのpushを行います。

左側の上から三つ目のアイコン(青い印の部分)をクリックします。すると、編集が加わったファイルが表示されます。
今回は、すべてを保存するのでChangeにカーソルを持っていき、＋をクリックします。

＋ボタンの場所

Message にどんな作業をしたのかわかりやすく書き、チェックボタン✔をクリックすることでcommitができました。
チェックボタンの場所

しかし、このままではGithubに保存されていないので「Sync change」をクリックし、Githubにpushを行います。
Sync Changeのボタン

Netlifyでデプロイ

下記の記事が分かりやすいです。
GATSBY_CONTENTFUL_SPACE_ID、GATSBY_CONTENTFUL_API_KEYの設定もかかれていますが、この記事の手順で行った場合は設定不要です。

Discussion