Cloudflare Pages + gatsby.jsを使って個人ブログを爆速で構築する手順

モチベーション

「そのうち個人ブログたてたいなー」と思っていたところ、丁度e34.fmのエピソード2でCloudflareとgatsbyが良いよという話がでてたのでこの機会にやってみました。本記事では簡単に作業内容をご紹介します。

対象読者

個人ブログを爆速で構築したい人

Cloudflare Pagesとは

Cloudflare PagesはCDNなどを提供するCloudflare社の静的サイトホスティングサービスです。特徴としては無料ユーザーでも帯域制限課金が無制限であることと、ホストできるサイト数も無制限であることです。類似サービスとの比較はcatnoseさんが良い感じにまとめてくれています。

Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる

ちなみに、筆者はNetlifyからCloudflare Pagesに移行する方をちょくちょく観測しています。

• Netlifyの無料枠を越えてしまい、1日20ドル請求されてしまった話

gatsby.jsとは

gatsby.jsはreactベースの静的サイトジェネレータです。 テックブログはHugoを使う人が多い印象ですがe34.fmに影響されてgatsbyを選びました。 少し調べたところ、どうも只のSSGフレームワークではないぽいので、デザインいじったりプラグインいれたりしながら楽しんでみようと思います。

Reactベース静的サイトジェネレータGatsbyの真の力をお見せします

環境構築

早速やっていきましょう。必要なものは以下

• node(後述しますが15系が良いと思います)
• git
• 好きなエディタ(筆者はnvim) まずはgatsby-cliを入れます

npm install -g gatsby-cli

次にgatsby-cliでstarterをつかったテンプレートリポジトリを展開します

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
#ダウンロードできたら移動
cd my-blog

フォルダ構成はこのようになります。

.
├── LICENSE
├── README.md
├── content
│   └── blog
├── gatsby-browser.js
├── gatsby-config.js
├── node_modules
├── gatsby-node.js
├── package-lock.json
├── package.json
├── public
├── src
│   ├── components
│   │   ├── bio.js
│   │   ├── layout.js
│   │   └── seo.js
│   ├── images
│   │   ├── gatsby-icon.png
│   │   └── profile-pic.png
│   ├── normalize.css
│   ├── pages
│   │   ├── 404.js
│   │   ├── index.js
│   │   └── using-typescript.tsx
│   ├── style.css
│   └── templates
│       └── blog-post.js
└── static
    ├── favicon.ico
    └── robots.txt

content/blog配下に.mdファイルを置くことで記事を作成できます。 build後の成果物はpublic配下に置かれます。 gatsby-config.jsを編集するとプロフィールの内容を変えることができます。

src/componnts/bio.jsを編集することでプロフィール画像を設定できます。

className="bio-avatar"

layout="fixed"

formats={["AUTO", "WEBP", "AVIF"]}

//ここで画像のpathを指定
src="https://hoge.jpeg"

width={50}

height={50}

サンプルのソースでは画像もgit管理に含まれていますが、ページ数が増えてきた時に大変になるのは容易に想像できるのでgithubのissueを使ってコンテンツを管理するのが良いのかなと思います。(参考)

ローカルで動かす

gatsby-cliを使ってプレビューしながら作業できます

gatsby develop

これでhttp://localhost:8000にアクセスすればサイトが表示されます。 作業が終ったらGithubにリポジトリを作ってプッシュしておきましょう。

ローカルホストでerror

ちなみにgatsby developした際にnodeが16系だと以下のエラーが出ます。

 ERROR

(node:3430) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in
the "exports" field module resolution of the package at
/home/yfcgpsebp/ghq/github.com/isanasan/blog/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

詳細は省きますがgatsbyが依存しているパッケージが古いのが原因のようです。nodeを14系もしくは15系にすれば解決します。ただ、エラーが出ていてもプレビュー自体は普通にできるのでそんなに気にしなくても良いかも。

Cloudflare Pagesからデプロイ

ここからはCloudflareでブログをホストする手順を説明していきます。アカウントが無ければサインアップしておきましょう。

• Cloudflareのダッシュボードから右下のページをクリック

  

• プロジェクトを作成をクリック

• リポジトリを選択

• ビルドの設定でフレームワークプリセットにGatsbyを選択

細かい設定は何もいりませんでした。 保存してデプロイするを選択すればビルドとデプロイが実行されます。 4分ほどでデプロイが完了します。

ちなみにmain以外のブランチにpushすると認証ユーザー以外には閲覧できないプレビューモードでデプロイされます。

Google Domainsで独自ドメインをとる

今回ブログ構築にあたってドメインも取得しました。なんとなくテックブログといえば.devドメインが良いなと思って調べてみたところ、お名前.comだと年2,178円、Google Domainsだと年1,400円だったのでGoogle Domainsでisana.devを取得しました。ドメインについてはもっと安く管理する方法があるかもしれないので今後新しい情報があれば別途記事にします。

カスタムドメイン設定

• プロジェクトのダッシュボードからカスタムドメイン->カスタムドメインを設定をクリック

  

• 使いたいドメインを入力して続行をクリック

  

• CNAMEセットアップを開始をクリック

  

• 名前とターゲットをコピー

  

• Google Domainsにログインし、ダッシュボード左側のカラムからDNS->カスタムレコードを管理->新しいレコードを作成をクリック

• ホスト名,データにそれぞれ先ほどコピーした名前とターゲットを入力

• タイプはCNAMEを選択して保存をクリック

• Cloudflareの画面に戻りDNSレコードを確認をクリック

あとはTTLが経過すれば変更が反映されて設定したカスタムドメインでブログにアクセスできるようになります。

所感

想像以上に簡単かつ爆速で出来てしまいました。 自前でブログを作ったことで、デザインとか機能面でやりたいことが次々出てきてしまい、軽率に作ってしまったことを若干後悔していますが、せっかく作ったので日々のアウトプットに活用していきたいと思います。 また、zenn-cliのように新記事をzenn new articleコマンドで良い感じに生成できるのはとても便利なので自分用にcliを作りたと考えています。