Cloudflare Pages で jekyll のサイトを公開するコツ

あけましておめでとうございます。

つまるところ

• Cloudflare Pages でウェブサイトを公開しようとしたが、エラーでうまくデプロイできない
• ログを読んだ結果、ビルドコマンドデフォから変更し、 bundle exec jekyll build に変更すればよい
  • (デフォルトは jekyll build となっている)

公開まで

環境の確認

$ [pharaohkj] $ ruby -v
ruby 3.4.1 (2024-12-25 revision 48d4efcb85) +PRISM [arm64-darwin24]

jekyll を bundler で用意する

ほぼ公式サイトの通りにまずやる。
違いは bundler を使って jekyll を用意し、さらにそれを使ってサブディレクトリを掘ってサイトを作成する。

新しめのrubyは csv とか base64 は bundled gem になったので、追加で指定しておく。

$ mkdir jekyll_sites
$ cd jekyll_sites
$ bundle init
$ echo "
gem 'csv'
gem 'base64'
gem 'jekyll'
" >> Gemfile

$ bundle install 

jekyll でサイトを作成 & preview

ここでは libalexandria.net というブログサイトを作る前提とする。（本当はディレクトリ名はなんでもいいが、わかりやすくつけておくとよさそう）

ここでも csv とか base64 を加えて動かないので注意。

$ bundle exec jekyll new libalexandria.net
$ cd libalexandria.net
$ echo "
gem 'csv'
gem 'base64'
" >> Gemfile

$ bundle install
$ bundle exec jekyll serve

これで open http://127.0.0.1:3000/ でみえてればOK。

このままだとscssファイルが Deprecation Warning がたくさんでるが、これはまぁ後日なおすとする。

GitHub にリポジトリを作って push しておく

Cloudflareにgitリポジトリ機能はないので、とりまGitHubに置く。

GitHubに行って良い感じにリポジトリを作成し、urlをゲットしてくる。例えば以下のように設定しておく。
設定後、pushしておき、リポジトリのウェブサイトをみてちゃんとpushされているのを確認する。

$ git remote add origin [e-mail]:PharaohKJ/libalexandria.net.git
$ git push origin master

Cloudflare Pagesを開く & 対象のリポジトリを選択する

公式ページにいろいろ乗ってるので参照。

1. Cloudflareにログインする
2. 左のメニューから「Workers & Pages ▼」を選ぶ
3. Overview のちょい下の右にある create ボタンを押す
4. Workers タブが選択されているので Pages タブを選択し Connect to Git ボタンを押す
5. GitHubタブが選択されているのでそのままでOK
6. アカウントを選択し、リポジトリを選択して Begin setup ボタンを押す

セットアップする

• Project name → 適当でおｋ
• Production branch → とりま master としておく
• Framework preset → ドロップダウンから Jekyll を選択する
• Build command → デフォで jekyll build となるが bundle exec jekyll build と変更する
• Build output directory → _site のままでよい
  • これは jekyll の初期設定で、ここに生成されたHTMLらが出力される → see.

ここまで設定したら Save and Deploy を押す。

確認

Cloudflare ダッシュボードの左のメニューから「Workers & Pages ▼」を選べば作ったpages一覧が表示されるので、対象のpagesを選べばOK。

その右側から「visit」ボタンを押せば、生成されたblogサイトを確認できる。

本番のドメイン変更をしたかったら Custom domains タブを選択し　Set up a custom domain をクリックすればできる。

ちょっとDNSの仕組みがわかってないと難しいかもしれないが、Cloudflare で取得したドメインだったら適当にぽちぽちすればこのダッシュボード上だけでDNSの CNAME レコードも作成してくれるので楽。さらにSSL証明書もなーんも設定しなくてもちゃんと設定してくれる。ありがたし。

以上

変更しなかった場合のエラーのログ

ログを読んだら「せっかく bundle install してるのにビルドコマンドで bundle exec してないので、閉じた世界ではなく、(仮想)マシンにインストールされたgemも参照しちゃうのでややこしいことになっちゃってるね。

2025-01-03T01:12:03.598153Z	Executing user command: jekyll build
2025-01-03T01:12:04.709979Z	/opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler/runtime.rb:319:in `check_for_activated_spec!': You have already activated unicode-display_width 2.6.0       , but your Gemfile requires unicode-display_width 1.8.0. Prepending `bundle exec` to your command may solve this. (Gem::LoadError)
2025-01-03T01:12:04.710464Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler/runtime.rb:25:in `block in setup'
2025-01-03T01:12:04.71068Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler/spec_set.rb:196:in `each'
2025-01-03T01:12:04.710815Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler/spec_set.rb:196:in `each'
2025-01-03T01:12:04.71089Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler/runtime.rb:24:in `map'
2025-01-03T01:12:04.710951Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler/runtime.rb:24:in `setup'
2025-01-03T01:12:04.711038Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/bundler-2.6.2/lib/bundler.rb:167:in `setup'
2025-01-03T01:12:04.711161Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/plugin_manager.rb:52:in `require_from_bundler'
2025-01-03T01:12:04.711238Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/jekyll-4.3.4/exe/jekyll:11:in `<top (required)>'
2025-01-03T01:12:04.711303Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/bin/jekyll:25:in `load'
2025-01-03T01:12:04.711374Z		from /opt/buildhome/.asdf/installs/ruby/3.2.2/bin/jekyll:25:in `<main>'
2025-01-03T01:12:04.716228Z	Failed: Error while executing user command. Exited with error code: 1
2025-01-03T01:12:04.725837Z	Failed: build command exited with code: 1
2025-01-03T01:12:05.536433Z	Failed: error occurred while running build command