Gatsby,  Cloudflare pages,  環境構築,  Tech,  サイト構築

Gatsby+Cloudflare pages 環境構築手順

最初の前準備に手間取ってしまいましたが導入できてしまえば自分好みのサイトデザインを構築するのに1分も掛からなかったです

Gatsby+Cloudflare pages 環境構築手順

はじめに

Gatsby+Cloudflare pagesでの環境構築をしようと思ったキッカケは、ブログを始める上で主流がwordpressしかない状況となっており、初期コストが発生するのを回避するにはどうしたら良いかを考えた結果この環境で実施することに落ち着きました。
色々と課題は残っていますが、少しずつ改良を加えていこうと思います。

前準備

既に以下を実施済みの場合はスキップして問題ない


// homebrewがない場合
// M1 Macの場合はFinderでターミナルを検索して右クリックで情報を見るを押下して「Rosettaを使用して開く」を押下し再起動して以下実行
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

// インストールできたか確認
$ brew -v

// nodebrewをインストール
$ brew install nodebrew

// ディレクトリがないとエラーが出たので、ディレクトリを作成
$ mkdir -p ~/.nodebrew/src

// インストールできたか確認する
$ nodebrew -v

// 「current: none」と表示されたら有効化します
$ nodebrew use "インストールされたバージョン"

// 例
$ nodebrew use v12.16.1

// インストールできたか再度確認する
$ nodebrew -v

// 最新版をインストールする
$ nodebrew install-binary latest

// Node.jsを実行できるようにPATHを通しす
// 私の場合うまくできなかったので直接viで編集して追記しました
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc

// 補足:直接PATHを通す
$ vi ~/.zshrc

// インサートモードで追記「esc」押下「:wq」で保存して終了
$ export PATH=$HOME/.nodebrew/current/bin:$PATH

// ターミナルを再起動してバージョンが表示されるか確認
$ node -v

// GatsbyCLIをインストールしてgatsbyコマンドを利用できるようにする
$ npm install --global gatsby-cli

gatsbyで環境構築

$ cd "任意の作業スペース"

//gatsby-casperをインストールする場合
//インストール直後の命名が「gatsby-casper」となるので任意のプロジェクト名に変更する
$ git clone https://github.com/scttcper/gatsby-casper.git --depth=1
$ rm -rf .git && git init

$ cd "任意のプロジェクト名"
$ npm install
$ gatsby develop

// 表示されるか確認
$ http://localhost:8000

トラブルシューティング

画像が表示されなくなった場合

// キャッシュクリアを実行する
$ gatsby clean

ERROR Looks like develop ~ と表示された場合

// 以下実行してエラーが表示された場合
$ gatsby develop

ERROR 
Looks like develop for this site is already running, can you visit http://localhost:8000 ? If it is not, try again in
five seconds!

// 以下実行すると解消する
$ rm -rf ~/.config/gatsby/sites

// キャッシュクリアを実行する
$ gatsby clean

git管理

gitにプッシュして管理させる。
作業手順などは気が向いたタイミングで後述します。

cloudflare pagesにデプロイ

git管理までできるようになれば後は簡単にデプロイまで実行できます。
アカウント開設がまだの場合は作成から始めます。
作成ができればダッシュボード上で「Pages」を押下します。
プロジェクトを作成を押下してgitに接続で今回作成したプロジェクトを選択します。
詳細は後述しますが、「Gatsby」を選択して保存まで押下するとデプロイが開始します。
gatsbyの環境構築の時に「gatsby develop」でエラーなく表示されていればデプロイに失敗することはありません。

デプロイが成功すれば反映完了となりますので生成されたURLを押下して表示されているか確認してみましょう。

次回以降のデプロイに関して

指定したブランチにプッシュされると自動デプロイが開始されます。
運営次第ですがmainからブランチを派生させてGithub上でプルリクエストを作成してマージされるとデプロイも可能となります。
また、プルリクエストを作成するとプレビュー用のURLが表示されるので開発環境も特段作成しなくてもデプロイする前に動作確認を行うことが可能となっております。

今後の展開と課題について

今回デプロイした環境は初期のインストールしたデモ版の状態となるので改良を行っていく必要があります。
各種編集方法は今後調査して後述していくようにします。

今後の課題としては、ヘッドレスCMSの導入を断念したので落ち着いたタイミングで再度導入にチャレンジしてより楽にブログ運営できるように改善していくようにします。
ヘッドレスCMSは今回見送ったので次回はObsidianで記事投稿ができるように改良も行っていくようにします。

あとは、独自ドメインを設定したりサイトの方向性を決めたりを行う必要があるので実施していくようにします。

おわり

これでブログ運営自体は可能な状態となったのでよかったです。
当初はwordpress+ロリポップの構成でサイトを構築しようか迷いましたが、初期費用やランニングコストが地味に発生してしまうので辞めて正解でした。
ただ、このサイトが収益化まで辿り着けるかは今後の運営次第だとは思うのでやれるところまで頑張るようにする

今回は備忘録として殴り書きで文章を作成しましたが、自分自身の考えや学んだことをアウトプットするのは単純に楽しいので今後も継続していけるように日々アウトプットしていくようにする