Blog

なんだか中途半端なタイトルになってしまいましたが、これには訳があります。
このサイトを作るにあたって、やりたかったことがざっくり下記のようなものでした。

• ブログをつくりたかった　→　CMSが必要
• SPA風の動きが欲しい　→　Nuxt.jsを使う
• 軽いサイトにしたい　→　静的ホスティングサービスを使ってみよう

結果から言うと、静的ホスティングサービスとしてNetlifyで一度公開しようとしましたが、断念…。なのでそれだけ実現せず。
その備忘録を書こうと思います。

HeadlessCMSにWordPressを選んだ理由

単純に、WEBサイト作る時にWordPressでできないことがないくらい多機能であることと、システム自体が無料なので需要が今後もあるだろうと思いました。
使い慣れてるし。世界の３分の１を占めてるらしいし。

そもそもWordPressで辛いと思っていた部分がどこかというと、１にも２にも速度です。それがSSGで静的にすることで解消されるなら、まずやってみる価値があります。
あと、お客さんに使ってもらうことを考えたら、マークダウンで記事を書くよりもビジュアルエディタの方が簡単だし、投稿画面が素人にもわかりやすいことは必須。

Rest APIが提供されてからHeadlessCMSとして使えるようになりましたが、プレビューやフォームなど、今までの感じで実装しようとしてもできない部分はたくさんあるので、結局はさぐりさぐりやっていくことには変わりありません。
HeadlessCMSとしてどれだけのシェアをもつかはわからないですが、無料でここまでできる…というのを知っておきたかったのも大きな理由です。

サイトジェネレーターにNuxt.jsを選んだ理由

正直Gridsomeの方が、よりやりたいことと近かったかもしれない…と後から思いましたが…。

とりあえず普段のWEBサイト制作でVue.jsをサイトの一部に使うことも多くなってきたので、Vue系列のNuxt.jsにしようとは思っていました。

最近Reactが人気っぽいなぁ…という印象があって、Gatsbyも一通り勉強してみたけど、やっぱりなんというか、WEBサイトを作るときはHTMLとCSSが主軸になるので（まあこれも人によるかもですが）、JSXが若干受け入れ難し…。
いや、でもGatsbyに気持ち傾いてるしできれば使ってみたいと思って、「JSXは良い」という情報もたくさん見ましたが、自分でまだそれを「そうだな」と感じられるまでに至りませんでした。

WEBサイトによっては、スタイルをたくさん書かないといけない　→　クラスが見やすい方がいい　→　HTML全体の見通しが良い方がいい　→　HTMLをあまり分解したり変形したりしたくないというのがあって、なんだかやっぱりHTMLの中にちょっとプログラム入ってるくらいが見やすい。
…とはいえ、そのVueのv-ifみたいなディレクティブすら、「ここに書くのか…」って当初思ったことを考えれば、最初の印象がどんなでも、使えば慣れるんだろうとも思います。

ホスティングサービスは、レンタルサーバー！

最初はNetlifyで進めていて、デプロイも完了し、あとは独自ドメインに切り替えるだけだ…というところまでいきました。
がしかし、見てわかる通り画像多めの攻めた（？）デザインにしてしまったため、

遅いっ！！！

トップページのアニメーションが終わるまでに描画が完了しない。ローカルでは全くそんなことがなかったので、驚きました。

でも、「速くなった」という人がいっぱいいるのに、なんでだ。と調べたところ、どうやらNetlifyの無料プランではCDNが日本にない。

あと、DBからデータを取得する時間がカットされたという意味で、一般的にNetlifyを利用すると表示が速くなるのだと思いますが、私の場合は画像量とアニメーションが速さに大きく関係するので、動的部分を静的にしたから速くなるというのは当てはまらなかったのでした…。

もうNetlifyのつもりで問い合わせフォームもNetlify Formsで作ったし、今更変えるかぁ…と思いましたが、やっぱりアニメーションに描画が追いつかないのは致命的なので、別のホスティングサービスを探すことに。
候補に上がったのは、GitHub PagesとVercel。

GitHub Pages

無料でSSL対応、自動デプロイに対応している。
ただし、

• 公開されたGitHub Pagesのサイトは1GB以内
• 帯域幅制限 100GB
• 1時間当たり10ビルド

※GitHubドキュメントより 2021.4現在
容量がちょっと少ない…に加えて、GitHub Freeユーザの場合はpublicじゃないとホスティングできないという制限があり。公開はしないつもりなので、残念だけど見送り

Vercel

無料プランでも容量が無制限。これがすごい。無料プランだと１日あたりのデプロイは100回まで。
個人的かつ非営利な目的でのみの利用に限定されており、じゃあ広告貼ってる個人サイトはだめなのかというと、問い合わせた方がいらっしゃるらしく、今の所はOKのようです。

じゃあVercelでいってみるか…？と思いましたが、
ここまでいろいろ考えながらずーっと頭の片隅に比較対象としておいてたホスティングサービス
それがレンタルサーバーです。

なぜかというと、今現在すでにレンタルサーバー借りてるんですよね。
ほなもうレンタルサーバーでよくない？？？ということになりますよね。

ずっと昔からテストサーバーとして借りてるロリポップのサーバーです。最近「ハイスピードプラン」が出たのでプランを乗り換えたら、これが速い。ストレージはオールSSD搭載、webサーバーはLiteSpeed採用。
容量320GB。データベース無制限。転送量600GB/日！！
36ヶ月契約で550円/月です。通常は月1100円。

これ借りてるならこれ使えばいいじゃないか…　というのと、
とりあえず色々やってみたい
の、せめぎ合いでここまできました。基準は実務でお客さん相手に勧められるものなのかどうか。

が、「色々やってみたい」の範囲が無料でできる範囲ではなくなってきたので、今回はレンサバ使うことにしました。
PHPでフォームを作り直しました。送信後ページ遷移させずに（送信後アニメーションがあったので）やろうとすると、それはまたそれですんなりいかなかったですが、
なんとかなりました。

結果的にはこれでも、パソコンのコンディションによっては若干描画の遅れがあったりしたので、いろいろ工夫を凝らしました。最終的にPageSpeed Insightsでは「Largest Contentful Paint」以外が合格。
LCPは「最大コンテンツ描画」、このサイトだとメインビジュアルの箇所で、これが2.5秒以内が理想のようですね。PageSpeed Insightsだと3秒前後、GoogleデバッグツールのPerformanceで測ると875.7msでした（なんだろうこの差）。
もうちょっと体感よくできそうな気はします。

「デプロイ」にあたるところがFTPソフトでのアップロードになるわけですが、FTPソフトのミラーリングを使えばすぐです。手間だけみれば、Gitのpushとほとんど変わらない。
「コミットしてpushする」という動作が、「ビルドして同期する」に変わっただけです。

sitemap.xmlやgoogleのためのファイルはミラーリングしたら消えてしまうので、サーバーにあるファイルを削除しないモードにする必要があり、そうすると「_nuxt」ファイルの中身がどんどん増えるので、たまにメンテする必要があるので、やっぱりちょっとは手間かかりますが…。
ロリポップもデプロイする方法あるみたいなんですが、ちょっとそこまでやる元気がなかったので…簡単にFTPソフトの機能を使いました。

まとめ

もし、無料枠でNetlifyくらいのサービスが受けられて、且つCDNが日本にあってスピードに問題がなかったら、本当に有料サーバーを借りることなくWEBサイトが公開できるのではと思います。
静的に記事を作れるならCMSはサーバーにある必要はないわけです。ローカルにWordPressを構築することも可能なので、メディアのパスやそれ以外のローカルへのパスが解決できれば、なんだかいけそうな気がします。

…が、それが実現したとして、静的ジェネレーターを制作に導入する時点で制作費が上がることを考えると、サーバー代いらないということがそれほどメリットなのか…というのも微妙なところな気がします。

WEBサイトつくるのに、WEBアプリケーション並みの金額請求されたら、いや、いいです…ってなりそうですし。

でも、WEBサイトだっていろんな表現ができるようになって、技術面でもそんなに簡単ではなくなってる。もうちょっとコーダーの年収がアップ豊かな表現のWEBサイトたちが流行ってくれれば…と
今後このあたりのサービスがどんな感じになるのか、注目していこうと思います。