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` で用意する

ほぼ[公式サイト](https://jekyllrb-ja.github.io)の通りにまずやる。
違いは bundler を使って `jekyll` を用意し、さらにそれを使ってサブディレクトリを掘ってサイトを作成する。

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

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

$ bundle install 
```

## `jekyll` でサイトを作成 & preview

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

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

``` zsh
$ 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 git@github.com:PharaohKJ/libalexandria.net.git
$ git push origin master
```


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

[公式ページ](https://www.cloudflare.com/ja-jp/developer-platform/products/pages/)にいろいろ乗ってるので参照。

1. Cloudflareにログインする
2. 左のメニューから「Workers & Pages ▼」を選ぶ
3. Overview のちょい下の右にある `create` ボタンを押す
4. `Workers` タブが選択されているので `Pages` タブを選択し `Connect to Git` ボタンを押す
4. GitHubタブが選択されているのでそのままでOK
4. アカウントを選択し、リポジトリを選択して `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.]( https://jekyllrb.com/docs/configuration/default/)

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

## 確認

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

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

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

ちょっとDNSの仕組みがわかってないと難しいかもしれないが、Cloudflare で取得したドメインだったら適当にぽちぽちすればこのダッシュボード上だけでDNSの CNAME レコードも作成してくれるので楽。さらに[SSL証明書](https://www.cloudflare.com/ja-jp/learning/ssl/what-is-an-ssl-certificate/)もなーんも設定しなくてもちゃんと設定してくれる。ありがたし。

![スクリーンショット 2025-01-03 11.37.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50220/82c08f0d-e377-29ed-df7d-3d54d70ba67d.png)

以上


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

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

``` log
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
```