WordPress が主流だが、あえて、スタティックサイトジェネレータ + Netlify を推したい
2022/08/11, last updated 2023/05/03 - ~6 Minutes
はじめに
Netlify がとても使いやすいと思ったので、紹介したい。
適していない方：
- GUI でないと編集がつらい方
適している方：
- HTML/CSS/JS を書いてブラウザで確認して、といった、昔ながらの WEB 制作に慣れている方
- WordPress のアップデートやセキュリティ対策がつらくなっている方
SSG (スタティックサイトジェネレータ/静的サイトジェネレータ) とは?
Netlify を理解するには、まず、スタティックサイトジェネレータを説明する必要があるだろう。 以下、サイトジェネレータと呼ぶことにする。
WEB サーバは、
- ファイルを返す
- プログラムで描画した結果を返す
かのどちらかの動きだろう。
WordPress は後者である。URL にアクセスすると、WordPress がデータベースから投稿を読み出し、ヘッダ、フッタ、サイドバー、プラグインなどを描画して返す。その都度プログラムで描画するので、動的なサイトである。(ただし、アップロードした画像は、wp-content/uploads の下に格納され、対応した画像ファイルが返されるので、静的である。)
一方、サイトジェネレータの場合は、全て前者になる。ドキュメントソースコードをサイトジェネレータで HTML/CSS/JavaScript に変換し、変換したファイルを WEB サーバにアップロードする。アップロードしたファイルが表示されることになる。URL にアクセスすると、URL に対応したファイルが返されるだけなので、静的サイトである。
サイトジェネレータも色々なものがあるが、私は、 HUGO を使っている。「ドキュメントソースコード」は、 hugo-thmeme-m10c/exampleSite のようなものである。
このドキュメントソースコード上の config.toml のあるディレクトリで、hugo コマンドを実行(一般にはビルドと呼ばれている)すると、public ディレクトリに HTML/CSS/JavaScript が生成される。
public ディレクトリ内に生成されたファイルを WEB サーバにアップロードすることで、WEB サイトとして表示されるようになる。
大昔は(今も？) HTML を手書きしてアップロードしていたが、それが進化した感じに思える。
Netlify とは？Netlify を使うとどう便利なのか
Netlify とは、静的サイトジェネレータと WEB サイトホスティングを組み合わせたサービスだ。
Netlify を使った場合、例えば、次のようになる。(事前のセットアップは多少必要)
- ドキュメントソースコードを github に push する。
- Netlify 上でドキュメントソースコードがビルドされる。
- エラーがなければ、Netlify 上の WEB サーバに置かれる。(デプロイと呼ばれている)そして、この WEB サイトは CDN 上にある。独自ドメインで https に対応した WEB サイトにすることもできる。
要するに、github に push するだけで、CDN 上の https に対応した WEB サイトが更新されるというわけだ。
そして、100GB/month までは無料のプランがある。アクセスが増えるまでは Starter プランで様子を見ればよいのではないかと思う。詳しくは Pricing を参照してほしい。
セキュリティも高そうだ。github 上のドキュメントソースコードを書き換えられないように注意するだけでよい。
コンテンツの全部、または、一部を他のサイトに移動するのも簡単だ。ファイルや画像を移動先のドキュメントソースコードにコピーするだけでよい。WordPress でコンテンツを他のサイトに移動させるのと比較するとどうだろうか。
まとめると、次のようになる。
- 簡単 (データベース不要。github に push するだけでよい)
- 高速なサイト (自動的に CDN 上に配置される)
- 高セキュリティ、メンテナンス不要 (ドキュメントソースだけ気にしていればよい)
- コンテンツの簡単な移動 (データベースが不要でありテキストで記述するため、ファイルのコピーでコンテンツを移動可能)
ここでは、HUGO を使った場合について書いたが、Netlify では、HUGO と同様のツールである Jekyll であったり、フロントエンド開発に使われる Angular、React、Vue、Next.js といったフレームワークを使用することもできる。
コンテンツの編集方法
以下は、HUGO の場合。
投稿は、markdown で記述する。例えば、 Creating New Theme のようなものである。投稿の先頭には、front matter と呼ばれる領域がある。タイトルやタグの指定などに使われる。
私は、記事を慣れたテキストエディタで書けるので、markdown で記事を書けるほうが楽だ。WEB サイトにログインせず、オフラインで記事を書けるのも良いと思う。しかし、WordPress のようなグラフィカルな編集機能がないとつらいと感じる人もいるだろう。
markdown で記述した後、PC 上で確認して、OK であれば、github に push する。github を使うことでドキュメントのバージョン管理ができていることになるし、ローカルと github 両方にデータがあるので、自動的にバックアップにもなっている。しかし、事前に PC 上で確認したり、github に push したりするのがやりづらい、と思う人もいるだろう。
Netlify で問い合わせフォームを作るには？
そもそも、サイトジェネレータで問い合わせフォームを作るにはどうするのだろうか？
- HTML で入力フォームを作り(markdown だけでなく HTML でも記述できる)、ボタンを押すと入力内容を HTTP POST、または、JavaScript でサーバに送信するように構成するだろう。入力フォームを受けとるサーバは別途用意する。
- Google Forms などでフォームを作り、フォームへのリンクを設置するか埋め込む。
HTML で入力フォームを設置する場合、Netlify では Netlify Forms を利用することができる。Form 投稿時に、Email、Slack、外部サービスへの POST で通知することができる。簡易的なものであれば、これで良い場合もあるだろう。
WordPress から Netlify への移行方法
WordPress から Netlify に移行することはできるのだろうか？
まず、WordPress をサイトジェネレータの形式に変換する必要がある。 例えば、HUGO であれば、 Migrate to Hugo (WordPress) に他の CMS からの移行方法が書かれている。 私は、blog2md を使って WordPress でエクスポートしたデータを markdown に変換し、変換しきれない部分は手作業で修正した。
いくつかのサイトを Netlify へ移行してみたが、以下のステップで行った。
- WordPress をサイトジェネレータの形式に変換する
- サイトジェネレータのデータを github に登録する
- レンタルサーバとメールアドレスがひもづいていたので、ドメインプロバイダをメールサービスのあるドメインプロバイダに転出 (Namecheap に転出)
- Netlify 上に配置する
まとめ
- Netlify を使うと、github に push するだけで WEB サイトが更新される。
- Netlify (というより、サイトジェネレータを使えば) 高速性、高セキュリティ性、高ポータビリティ(移動が簡単) なサイトを構築できる。Netlify を利用した場合、CDN 上で動作するため、スケーラビリティも高い。
- 問い合わせフォームなどは、Netlify Forms を利用することが可能。
- WordPress サイトを変換ツールを使ってサイトジェネレータ形式に変換できれば、Netlify の利用は可能だろう。サイトジェネレータへの変換は場合によっては、手作業で修正する必要あり。