Cloudflare Pages + gatsby.jsを使って個人ブログを爆速で構築する手順
モチベーション
「そのうち個人ブログたてたいなー」と思っていたところ、丁度e34.fmのエピソード2でCloudflareとgatsbyが良いよという話がでてたのでこの機会にやってみました。本記事では簡単に作業内容をご紹介します。
対象読者
個人ブログを爆速で構築したい人
Cloudflare Pagesとは
Cloudflare PagesはCDNなどを提供するCloudflare社の静的サイトホスティングサービスです。特徴としては無料ユーザーでも帯域制限課金が無制限であることと、ホストできるサイト数も無制限であることです。類似サービスとの比較はcatnoseさんが良い感じにまとめてくれています。
ちなみに、筆者はNetlifyからCloudflare Pagesに移行する方をちょくちょく観測しています。
gatsby.jsとは
gatsby.jsはreactベースの静的サイトジェネレータです。
テックブログはHugoを使う人が多い印象ですがe34.fmに影響されてgatsbyを選びました。
少し調べたところ、どうも只のSSGフレームワークではないぽいので、デザインいじったりプラグインいれたりしながら楽しんでみようと思います。
環境構築
早速やっていきましょう。必要なものは以下
- 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を作りたと考えています。
Discussion