Jekyll + Netlify + Cloudinary で高速なウェブサイトを無料で公開する
普段は Rails や React でWebサービスを作ってますが、シンプルなブログやサイトを作るには、やりすぎ感が否めない。
ブログ投稿くらいならサクッとできるけど、画像をアップロードしたり、カテゴリー分けやタグ付け機能を作ったり、関連記事を表示するための実装をしたり... と実は色々と考えることがでてきてしまいます。
普段はそれが仕事だったりするけど、コンテンツをつくる立場にいる時は、箱をつくるのに時間も労力もかけたくない!! と思ってやり方を考えました。
たどり着いたのは、静的サイトをホスティング。
ブログだと無意識に Wordpress を選択してしまいそうですが、そこを思いとどまって静的サイトも考慮して良いと思います。高機能なCMSを捨てることで、速度もメンテナンス性も格段に向上します。
Jekyll
静的サイトジェネレータ
https://jekyllrb.com/
Netlify
Jekyll をいい感じにホスティングしてくれる
https://www.netlify.com
Cloudinary
画像を "On the fly" で加工してくれる
https://cloudinary.com
Jekyll のインストールと新規プロジェクト
1
2
3
4
5
$ gem install jekyll
$ jekyll new ~/your-website
$ cd ~/your-website
$ bundle install --path=./vendor/bundle
$ jekyll serve
とりあえずこれでサイトが出来上がる。
http://localhost:4000 にアクセスすれば確認できます。
.gitignore に vendor/bundle を追加しておきましょう。
GitとGithub
ひとまず github にレポジトリを作って URL をコピーしましょう。
1
2
3
4
5
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin your-git-hub-repository-url
$ git push -u origin master
Netlify
https://www.netlify.com でアカウントを作って、新しいプロジェクトを作成。
Githubと連携して、先ほど作成したレポジトリを選択。
その後でてくるオプションは基本的にデフォルトのままでOKです。
独自ドメイン も Https も無料で対応してくれます。
保有している DNSを Netlify に向けるだけで完了する。
Netlify で購入することもできますが、普段使っているところで一元管理が良いと思います。
これで静的サイトのホスティングまで完了しました。はやい。
Netlify は静的サイトホスティングだけでなくて、
フォームつくれたり、パスワードかけられたり、Cloud Function みたいなこともできるみたい。まだ使ってませんが、静的サイトだけどちょっとだけ動的に動かしたいって場合に便利かもですね。
Cloudinary
ブログをつくる際にいつも頭を悩ませるのが画像ですよね。
srcset や <source> タグを使った本当の意味でのレスポンシブ画像にも対応したいところ。
PCで複数サイズ作成してタグをコツコツ書いても良いのですが、コンテンツ制作に集中したいので、誰か他の人に任せたいところ。
そんな時に最適なのが Cloudinary です。
アップロードした画像は URL を少し変えてアクセスするだけで、動的に変換してレスポンスを返してくれる凄いやつ。
元の画像が 2400px だとしても URL の書き方で 200px の画像を取得できてしまいます。しかも一回変換されたら CDN でキャッシュされるので、これまた爆速です。
さらに良いところは、Jekyll をホストしている Netlify のアクセスを押さえられるということですね。
コンテンツへのアクセスは Netlify へ、画像のアクセスは Cloudinary へ向けることによって負荷が分散します。（Netlify で静的ファイルをホスティングするだけでも十分速いけど。）
そしてさらに便利なのが、リモートに置いてある画像を勝手に取得して圧縮したり加工したりして返してくれる。
https://your-site.com/images/sample.jpg という画像があるとすると https://res.cloudinary.com/your-cloud-name/image/fetch/w_300,h_300/https://your-site.com/images/sample.jpg とするだけで 300 x 300px の画像を返してくれます。そしてその画像は CDN にもちろんキャッシュされます。
これを利用して、ローカルでコンテンツを書いている時はオリジナルサイズを使用。サーバーにデプロイされたら Cloudinary を通した画像を使用する、という流れ。
Gemfile に追加して、インストールしましょう。
Gemfile
1
2
3
group :jekyll_plugins do
gem 'jekyll-cloudinary' # 追加
end
1
$ bundle install
Jekyll の設定に Cloudinary 関連を追加します。
_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
cloudinary:
cloud_name: your-cloud-name
origin_url: your-site-url
only_prod: true
verbose: true
presets:
default:
min_width: 320
max_width: 1600
fallback_max_width: 800
steps: 3
sizes: "(min-width: 50rem) 50rem, 90vw"
詳しくはドキュメントを見てほしいですが、
自分が躓いた点としては origin_url と only_prod です。
origin_url がないと、Netlify にデプロイした時にホスト名が設定されていなかった。
only_prod: true がないとローカル環境でも Cloudinary 用のHTMLタグが出力されてしまう。
Netlify で JEKYLL_ENV=production をセットしましょう。
そしてローカルで $ jekyll serve とやった時の URL は http://127.0.0.1:4000/ ですが、このプラグインの画像URLの出力が localhost となるので CORS にひっかかって画像が表示されませんでした。この問題は localhost:4000 で確認することで回避。
あとは /images/sample.jpg を配置して、Jekyll のコンテンツに下記を挿入すればOKです。
markdown
1
2
### これは Cloudinary から配信されます
{% cloudinary /images/sample.jpg alt="テスト画像" style="width: 100%; height: auto;" %}
とすればOKです。
style とかはお好みで。
以上で、小規模のウェブサイトをいい感じに運営できると思います。
静的サイトだと「クライアントが自由にコンテンツを更新できない」問題が発生しそうですが、Jekyll を簡易CMSにするなど、その辺を上手くやる方法もありそうです。
参考
Jekyll + Netlify のチュートリアル
https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/
Jekyll を CMS っぽくする方法
https://blog.mvp-space.com/10-steps-to-configure-jekyll-with-netlify-as-a-cms-d754d73ea731
https://github.com/jekyll/minima
Jekyll + Cloudinary のプラグイン
https://cloudinary.com/blog/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin
https://github.com/nhoizey/jekyll-cloudinary
レスポンシブイメージに関してはこちらが良い記事
https://jakearchibald.com/2015/anatomy-of-responsive-images/#varying-size-and-density
<img srcset /> と <picture> の使いわけについての良い記事
https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/
Cloudinary の fetch remote image ドキュメント