エンジニアブログ執筆環境を構築した話

はじめに

はてなブログにて執筆をしていたのですが、以下を解決したく、執筆環境を構築しました。

ブラウザ上ではなく、慣れた環境であるエディタ上で執筆を行いたい
タブの切り替えによりプレビューと本文の表示を切り替える操作が面倒
広告表示をなくしたい
できる限りシンプルな表示にして気が散らないようにしたい

解決策

静的サイトジェネレータで作成したサイトをホスティングサービスを利用し、
自身でブログを公開する。

ブラウザ上ではなく、慣れた環境であるエディタ上で執筆を行いたい
- → ローカル環境で好きなエディタ上で記述することが可能
タブの切り替えによりプレビューと本文の表示を切り替える操作が面倒
- → 今回はローカル環境でMarkdown形式で記載している。エディタの機能を使用して、切り替えを行わずにプレビューが常に表示されている状態
広告表示をなくしたい
- → 自身でサイトを作成しているので広告も当然なし
できる限りシンプルな表示にして気が散らないようにしたい
- → 自身でサイトを作成しているので無用な表示は全て消すことができる

構成

静的サイトジェネレータ: Jekyll
ホスティングサービス: Cloudflare Pages

検討内容

静的サイトジェネレータについて

まず、ブログは静的サイトジェネレータを利用しています。
これは慣れていない技術を使って、1からHTML/CSSを利用してページを作成すると時間がかかってしまうためです。
また、事前にページを作成している都合上、レスポンスが速くなることを期待しています。

静的サイトジェネレータにはいくつか種類が存在します。

名前	言語
Jekyll	Ruby
Hugo	Go
Gatsby	js

この中でもJekyllを選んだ理由は、Rubyが最もこの中の言語では慣れているためです。単純ですね。
これはブログを構築していくうえで、ジェネレータ自身と言語仕様、問題の切り分けを行えるように慣れている言語を選んでいます。
機能的な部分では特に比較はしていませんのでご承知おきを。

なお、テーマは下記よりピックアップすると時短になります。
Jekyllテーマ

ホスティングサービスについて

レンタルサーバーを借りる事や Github Pages , Cloudflare Pagesを検討候補にあげました。
(ホスティングサービスは他にも色々と種類があるので気になる方は探してみてください。)
色々なサービスがありますが、今回はCloudflare Pagesを選びました。できるだけ無料で運営したいためです。

この目的があるため、お金がかかるレンタルサーバーは採用していません。

次に Github Pages がありますが、こちらは下記のように色々な制限がかかっています。
Github Pages 利用上の制限

まぁこれ自体はあまり重大ではないのですが、Jekyllのページネーション機能が古いため採用していません。
Github Pages Dependencies

Github Pagesでは jekyll-paginate を使用しています。
これがv2でないとカテゴリ別のページネーションが不可能です。
ビルドがGithubPages側で行われるため、これを回避する方法は現状ありません。

次に Cloudflare Pagesです。以下の画像のように、ビルドを除きあらゆる面が無制限となっています。
どうなっているのか不明なくらいの大盤振る舞いです。
ビルドのプリセットとしてJekyllもサポートしているため、Cloudflare上におけるビルドも容易です。

Cloudflare Pagesの料金について

実装時の注意点

Cloudflare Pages側のgemバージョンと合わせる必要がある。
- 特に意識せずにCloudflare Pages上でビルドを行うと下記のようにバージョンミスマッチにより怒られます。
- 解決させたときのGemfileは以下です。

/opt/buildhome/.asdf/installs/ruby/3.2.2/lib/ruby/3.2.0/bundler/runtime.rb:304:
in `check_for_activated_spec!': You have already activated json 2.6.3, but your Gemfile requires json 2.7.0. Since json 
is a default gem, you can either remove your dependency on it or try updating to a newer version of bundler 
that supports json as a default gem. (Gem::LoadError)

# note: cloudflare pages のデフォルトgemバージョンと合わせる
gem 'base64', '0.1.1'
gem 'bigdecimal', '3.1.3'
gem 'public_suffix', '5.0.3'
gem 'ffi', '1.15.5'
gem 'google-protobuf', '3.24.3'
gem 'sass-embedded', '1.66.1'
gem 'rexml', '3.2.5'
gem 'rouge', '4.1.3'
gem 'unicode-display_width', '2.4.2'
gem 'json', '2.6.3'

# note: jekyll
gem 'jekyll'
gem 'jekyll-paginate-v2'
gem 'jekyll-theme-architect'

# note: jekyllを実行させたときに追加を命じられたので追加。
gem 'kramdown-parser-gfm'
gem "webrick"
gem 'wdm', '>= 0.1.0' if Gem.win_platform?

Cloudflare Pages環境変数にBUNDLE_WITHOUT=”“を設定する必要がある。
- デフォルトの場合、development, test が設定されており、該当するgemがインストールされていない。
- ただし、Jekyllではこれらに含まれるgemが必要なためエラーになるので、今回の対応が必要となる。
- 詳細はこちらより

終わりに

デプロイ時に多少手こずりますが、他の点は簡単に構築をすることができます。

もくもくブログ

メモに近い。記事の正確性には期待をしないでください。