Jekyll + Netlify + Cloudinary で高速なウェブサイトを無料で公開する

Shunsuke Sawada

普段は Rails や React でWebサービスを作ってますが、シンプルなブログやサイトを作るには、やりすぎ感が否めない。
ブログ投稿くらいならサクッとできるけど、画像をアップロードしたり、カテゴリー分けやタグ付け機能を作ったり、関連記事を表示するための実装をしたり... と実は色々と考えることがでてきてしまいます。

普段はそれが仕事だったりするけど、コンテンツをつくる立場にいる時は、箱をつくるのに時間も労力もかけたくない!! と思ってやり方を考えました。

たどり着いたのは、静的サイトをホスティング。
ブログだと無意識に Wordpress を選択してしまいそうですが、そこを思いとどまって静的サイトも考慮して良いと思います。高機能なCMSを捨てることで、速度もメンテナンス性も格段に向上します。

Jekyll

静的サイトジェネレータ
https://jekyllrb.com/

Netlify

Jekyll をいい感じにホスティングしてくれる
https://www.netlify.com

Cloudinary

画像を "On the fly" で加工してくれる
https://cloudinary.com

  

Jekyll のインストールと新規プロジェクト

Screen_Shot_2018-11-27_at_16.23.22

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 にアクセスすれば確認できます。

.gitignorevendor/bundle を追加しておきましょう。

  

GitとGithub

ひとまず github にレポジトリを作って URL をコピーしましょう。
Screen_Shot_2018-11-25_at_19.24.08

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

Screen_Shot_2018-11-27_at_16.23.35

https://www.netlify.com でアカウントを作って、新しいプロジェクトを作成。
Githubと連携して、先ほど作成したレポジトリを選択。
その後でてくるオプションは基本的にデフォルトのままでOKです。

独自ドメイン も Https も無料で対応してくれます。
保有している DNSを Netlify に向けるだけで完了する。
Netlify で購入することもできますが、普段使っているところで一元管理が良いと思います。

これで静的サイトのホスティングまで完了しました。はやい。
  

Netlify は静的サイトホスティングだけでなくて、
フォームつくれたり、パスワードかけられたり、Cloud Function みたいなこともできるみたい。まだ使ってませんが、静的サイトだけどちょっとだけ動的に動かしたいって場合に便利かもですね。

  

Cloudinary

Screen_Shot_2018-11-27_at_16.23.55

ブログをつくる際にいつも頭を悩ませるのが画像ですよね。
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_urlonly_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 ドキュメント

https://cloudinary.com/documentation/fetch_remote_images

Shunsuke Sawada

おすすめの記事

ほとんどの人にはどうでもいい行間の話
20
Jekyll + VSCode のエディタ設定
1