はじめに
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 の利用は可能だと思います。サイトジェネレータへの変換は場合によっては、手作業で修正する必要あり。