Gridsome + Netlify でかつてない爆速サイトをつくる
本ブログの構成
- フレームワーク：Gridsome + Vue
- コンテンツ：Markdown ドキュメント
- ホスティング：Netlify
- ソース：Github(Private)
サイトジェネレーターの Gridsome を用いた背景
Core Web Vitals という Google が提唱するサイトの 健全性を示す重要指標を満たすために、コーポレートサイトやブログなどの基本的なウェブサイトの作成にサイトジェネレーターを試したいなと思っていました
サイトジェネレーターとは何か
静的サイトジェネレータは、ソースファイルから静的 HTML を生成し、サイトを構築するアプローチです。 Static Site Generator = SSG とも呼ばれ、有名どころで行くと Gatsby などのフレームワークがあります
多くの事業者が、Wordpress などをカスタマイズして使っていることと思います 僕も前のサイトや、12 年前の学生時代の請負とかでもよく使っていました
Wordpress が画期的だった仕組みは、Mysql のデータベースからサーバー側でコンテンツを取り出し HTML を生成して返す方式で、ブログのような動的なサイトを作る上では非常に重宝されていました
Gridsome を用いてサイト生成を行うと、ビルド時に Graph QL や API などから全てのコンテンツを取得して、コンテンツが加わった状態で HTML を出力します
Gridsome を用いると何がいいのか
わかりやすく言うと、セキュアでかつ SEO に強いサイトづくりに向いているフレームワークといえます
メリットは４つあります
- ページレスポンスが早い
- SEO への対応
- セキュリティ、メンテ不要
- サーバー代がほぼ無料（独自ドメインも!）
デメリットは以下の２つあります
- ビルド時間はページの量に応じてかかる
- データ更新のたびに生成し直さないといけないので更新頻度が高いサイトには向かない
詳しくは徐々に触れていく
Jamstack 構成でのホスティングに初めて触れてみましたがとても面白いです Gridsame 導入した後、途中 Graph QL の書き方に少々戸惑いましたが、サイトの更新や反映がとてもスマートで簡単です 静的ホスティングサービスである Netlify でホスティングしているので、デプロイもほぼサクッとできます
レンタルサーバーを借りて、Wordpress をこしらえていた時代が懐かしいですね
今後、実際に使っていく上でわかったことは書いていこうと思います