memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

githubのprivate repoをcloudflare pagesに移した

本日から大学がスタートしました。在学生を集めて新年度の説明会を実施するという、我々が学生の頃には全くなかった親切設計のイベントです。時代が違いますね。。。ほんと。昔って何だったんでしょう。

もう夜も遅いので(AM1:00)特急で書いていきます。まだ風呂入らないと。。。明日は入学式で早く出ないと行けないので(とはいえ明日になると忘れるで書かなければならないという話で)

Google Sitesの研究室のページをGitHub Pagesに移動した話を書きました。研究室のホームページはこのままでよいのですが、ついでに講義資料のページ(PPTXって見にくいのでスライド)をMarkdownにしてHTMLで公開しようとしています。良いか悪いかはわかりませんが、スライドって1枚ずつはわかりやすいのですが全体の流れって把握しにくいと僕は思うんですね。それなら連続スクロールができるWebページの方がいいんじゃないかな?と思いまして。気のせいかもしれません。やってみたかっただけの話です。

Google Sites ⇒ GitHub Pagesに引っ越しました - memorandums

で、講義ページには、元ネタにしている本から引用したものもあります。もちろん出典は記載しているのですが、やはりそのままWebページとして誰でも見れる状態で公開するのは危険です。ということで何かよい方法がないかな。。。と思って調べるとGitHub PagesをCloudflare Pagesに移した(基本認証あり)という記事を見つけました。

これはよいと思いまして、とりあえず、Cloudflareにアカウントを作ってあれこれやっていたんです。オリエンテーションの間で。これがなかなかうまくいかない。そもそもGitHub Pagesの仕組みを理解して使っているわけではなかったのが原因でした。とりあえずうまく行った手順だけ以下に書いておしまいにしたいと思います。半日以上かかったような気がします。。。情けないことこの上ないです。とりあえず手順だけ書いておきます。自分専用みたいなものですが。。。

  1. GitHub Pagesのリポジトリ(講義ページ公開用に作成したもの)をPublicからPrivateに変更します。

  2. そのリポジトリをcloneしたローカルリポジトリのトップにGemfileを新規作成します。中身は以下を書きます。コメント部分はいらないんですがとりあえずいろいろググって調べた残骸ですがそのまま記載します。ちなみに、やりながらだんだんわかってきたのですが「github-pages」というgemはその名の通りで、Github Pagesの内部で使用しているgemの集合体でした。jekyllをいれたりしなければならないのでは?とあれこれ探したのですが、結局はこの1行を書くだけでGitHub Pagesのビルド環境が整うってことでした。勉強になりました。

source "https://rubygems.org"

# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
gem "github-pages", '~> 231', group: :jekyll_plugins

# If you have any plugins, put them here!
#group :jekyll_plugins do
#  gem "jekyll-feed", "~> 0.6"
#end

gem "webrick", "~> 1.8"
  1. つづいて、そのローカルリポジトリで以下を実行します。CloudflareのV2のrubyのバージョンが3.2.2だったのでこのバージョンにしています。
rbenv install 3.2.2
rbenv local 3.2.2
ruby -v
  1. 以下でbundle installします。
bundle install
  1. ちなみに、(ここはこの時点では試していないのでできないかもですが)ローカルの環境を作ったことになりますので、Jekyllでbuild(MD->HTML)に変換することも、Jekyllのserver起動もできて、ローカルで表示を確認できます。VS Code拡張機能をいれてそこで確認していました。。。でも、Jekyllとは動作が違って面倒だな。。。と思っていました。ローカルに環境を作れば良かったんですね。この辺は全然勉強できていませんorz
# ローカルリポジトリトップで以下を実行する
jekyll build
jekyll server
  1. とりあえずローカルがうまくいったら、git add & git commit & git pushします。
git add -A
git commit -m "hogehoge"
git push -u origin main
  1. あとはCloudflareの設定になります。
  2. CloudFlareにアクセスして、アカウントを作成します。
  3. 左のメニューから「Workder & Pages」を選択し、Pagesタブを選択し、(忘れた)gitと連携というリンクをクリックして、GitHubのアカウント、リポジトリ、ブランチを設定していきます。フレームワークはJekyllを選択し、jekyll build、_siteだったかな?をデフォルトで選択します。選択が完了すると、CloudFlareがGitHubリポジトリからファイル群を引き出し、それらのビルドが開始になります。ちなみに、このビルドは失敗します。ここもずーーーーっとわからなかった。4,5時間くらい粘ったのではないかと思います。

  4. エラーを取るためにはCloudflareに設定すべき項目が2つあります。

  5. 1つは、SettingsーEnvironment Variablesを選択し、そこの2個所(ProductionとPreview)にRUBY_VERSIONという環境変数を追加します。バージョンは3.2.2です。Previewって何なのかわかっていません。たぶん、Productionだけでよいと思いますがとりあえず入れておきました。

  6. もう1つは、SettingsーBuild system versionです。こちらはV2というのがデフォルトになっているのですが、これをV1にするとエラーがなくなりました。その名の通り、インフラがV2よりV1の方が古いようです。エラーの原因は新しいバージョンのgemが既に入っている、というものでして、それを除外する方法が私にはわかりませんでした。古いマシンイメージであれば元から導入されているバージョンが存在しないか古いはずなのでビルドコマンドが実行されてインストールされるファイルの方が新しくなるはずだと想像しました。一応、エラーがなくなりビルドが成功しました。この辺はRender.comもそうでしたが、大変ですね。。。オンプレなサーバーではないので、どこでどう関係しているのかを覗くことができません(有料プランならSSH接続して見れるのでしょうか?)。

とりあえず、ここまでです。

実は、その後、Markdown内に書いたmermaidが変換されないという点がわかっていません。1,2時間くらいずーっとやっていましたができませんでした。宿題です。

あと、基本認証をつけるところもまだできていません。これも宿題です。明日、入学式なので終わったら研究室に戻って続きをやりたいと思います。

おしまし。さ、ふろ。