メインコンテンツまでスキップ

Docusaurus ベースのブログサイトを Cloudflare 上にデプロイする

完成したプロダクト​

今回のゴール​

自分が日々のプログラミング学習の中で得た知見を発信する媒体を持つことが出発点です。媒体の候補は様々ですが、YouTubeなどの動画媒体は日々の撮影や編集などのコストが大きく、加えて生のコードを公開しないと動画が撮れない点がいまいちだと考え、ドキュメントでの発信をすることにしました（技術ブログの文化が根付いているのも大きかったです）。

そして、個人での発信のためできるだけお金をかけたくなかったので、無料でブログサイトを構築することをゴールにしました。

環境構築​

カテゴリーソフトウェア名バージョン備考
OSwsl: Ubuntu20
nodenodev20.11.1
pnpmv8.15.4
voltav1.1.1バージョン管理
フロントReact18.2.0
TypeScript5.2.2
Docusaurus3.2.1
スタイル-
ホスティングCloudflare Pages
テスト-

【選定理由】

  • Docusaurus: Meta 社が開発した React ベースの静的サイトジェネレーターで、ドキュメントの作成に特化しているものです。ほかにもGatsby等のサイトジェネレーターがありましたが、ドキュメント作成に特化した静的サイトジェネレーターであり、ブログサイトの制作と相性がいい点を評価しました。また、今後 SEO 対策や Google adsense への申請も検討していますが、そうした収益化へのプロセスを Docusaurus ベースのサイトで以前に経験していることも大きかったです。

  • Cloudflare Pages: Cloudflare 社が提供するフルスタックアプリケーションのホスティングサービスです。無料で使用できる点、ビルド、デプロイ時のエラーなどがすぐにフィードバックされる点や、Workers などの別の機能との接続が容易でありアプリの拡張に対応しやすい点を評価しました（もっとも、単純に使ってみたかったというのが大きいですが）。

ブログ構築​

ページ作成についてこと細かく書いていると無限に時間が溶けてしまうので、公式ドキュメントに書いてあることは省きます。まずは docusaurus の公式ドキュメントを参照してください。

Docs の構成​

デフォルトの状態だと各ディレクトリのトップページは category.json で指定されます。ただ、category.json を使用した場合、URLにページの名称をそのまま入れないといけないため、ページ名が日本語だった場合URLにも日本語が入ってしまいます。

docs
├── mypage
│   ├── _category_.json
│   └── docusaurus_blog.mdx
└── intro.md

そこで、URLをできるだけ英語だけで指定するために、category.json を削除して 01-mypage.md をトップページとして指定しました。ファイル名の先頭についている番号はサイドバーなどの掲載順を指定しています。ただし、相対パスを指定するときは先頭の番号を無視する決まりがあるので気を付けてください。

また、サイドバーの設定を手動で行わないといけないので、公式ドキュメントのサイドバーのページに従って設定してください。

docs
├── 01-mypage
│   └── docusaurus_blog.mdx
├── 01-mypage.md
└── intro.md

cloudflare へのデプロイ​

  1. cloudflare のダッシュボード にアクセスする（アカウント登録が済んでいない場合はアカウント登録を先にしてください）
  2. 左側のメニューバーから "workers & pages" を選択する
  3. アプリケーションの作成 > Pages を選択し、デプロイしたいソースコードが格納された GitHub リポジトリを cloudflare と接続する（ソースコードを GitHub 上にプッシュしていない場合は、先に GitHub にプッシュしてください）
  4. 画面の指示に従ってセットアップを進める
    1. リポジトリの選択: 始めは GitHub のリポジトリが表示されていないと思うので、GitHub にアクセスして必要なリポジトリを連携してください。
    2. ビルドとデプロイのセットアップ
      • プロジェクト名: リポジトリ名をそのまま採用すればOKです。独自ドメインを指定していない場合は、"your-project (プロジェクト名).pages.dev" が URL に使用されます。
      • プロダクションブランチ: 基本は main(master) branch のはずです。
      • フレームワーク プリセット: docusaurus を選択
      • ビルドコマンド: 使っているパッケージ管理ツールのビルドコマンドを書いてください。今回のケースでは pnpm を使用しているので pnpm run build と入力します。
      • ビルド出力ディレクトリ: ビルドを実行することで生成されるファイルを格納しているフォルダを指定します。通常は /bulid に格納されています。
    3. サイトをデプロイ

関連した投稿​

実装時の体験談・エラー集​

参考記事​