以前の記事で「Gulpのインストール不要でScssが使用できるサーバー イイウェブ」を紹介しました。
Gulpなどインストール不要。アップロードするだけでSassが使用できるサーバーが登場！！ | イエロー×グリーン | cross bench （クロスベンチ）
この記事に対して
「こんなサービスあったんだー」
「これってNetlify？？」という言われている記事を発見しました！
Netlifyというサービスは初めて聞きました。
もしかするとイイウェブより優秀かもしれないと思い早速試してみました！
（私はあまりターミナルなどは得意ではない…）
Netlify
Netlify: All-in-one platform for automating modern web projects
Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.
NetlifyはGitHubやBitBucketのリポジトリを静的サイトとして公開してくれるサービスです。
GitHub Pagesというサービスもありますがnetlifyは独自ドメイン設定とSSLも無料でできます。
さらにPC内でビルドする作業をNetlifyが行ってくれるのでファイルをアップロードするだけでScssなどをCssに変換したり圧縮したりします。ブログ向け静的ジェネレーターサービス「Hugo 」「Hexo」も使用することができます。
「Write frontend code. Push it. We handle the rest.」
「フロントエンドコードを送ればあとはまかせろ！」と書かれているだけあります。
またNetlityは約2億円の資金調達しているので期待ができるサービスです。
Netlify, a service for quickly rolling out static websites, raises $2.1M
TechCrunch登録からの流れ
GitHub,GitLab,Bitbucketのアカウントを持っていれば登録ができます。
このあと必須になりますので登録したアカウントと紐づけておくことをオススメします。
新規サイトを作る
私はBitbucketを使用しているのでBitbucketを選択しました。
Bitbucketにアップしてるファイルが表示されます。
ファイルを選択後ビルド設定とパブリック設定を行います。
ビルドはGulpで実行する命令
Gulp build Gulpを使用する場合はtaskに登録して下さい。
パブリックは表示させるフォルダ指定になります。
public/ に設定するとpublic内のファイルが表示されます。
空白の場合はルートドキュメントが表示されGulpなどは使用できません。
設定後「Deploy site」クリックで1つのサイトができました。
sitenameが初めはランダムになっていますので、Change site nameからわかりやすい名前に変更して下さい。
デプロイ
Deploysの「Trigger deploy」をクリックするとbitbucketのデータがデプロイされ公開されます。
またプッシュのタイミングで自動的にデプロイされます。
ドメイン設定
独自ドメインを設定しています。
契約しているドメインサービスでDNSを変更します。
Aレコードには104.198.14.52
CNAMEにはサイト名.netlify.com Name:wwwを設定します。
DNS変更後Netlify管理でドメインを登録します。
うまくいけば独自ドメインでサイトを閲覧することができます。
この時点ではまだSSLは適用されていません。
ドメイン設定が成功しているとチェックマークが入ります。
「Verify DNS configuration」をクリックしSSLを発行します。
Forece HTTPSを認証すれば独自ドメインがhttpsになります。
有料プラン
有料プランにすることによって、サイトにパスワード設定をかけたり複数人での管理ができるようになります。
無料プランの制限
制限はありますが小規模のサイトなら余裕ではないでしょうか。
- Network Bandwidth: 100GB/month – Soft
- Storage: 100GB – Soft
- API requests: 200 requests/minute, 3 deploys/minute – Hard
イイウェブとの比較
Netliftの良い所
- Netliftの方が自由度が高い。
- Gulp設定を自分で設定できる。
- 「pug」「Hugo」「Hexo」が使用できるのでブログにも向いている。
- 容量が大きい画像などはCDN化される。
- gitで管理しているので前のバージョンにも戻すことができる。
- HTTP /2 対応
イイウェブの良い所
- マニュアルが日本語で日本人が使いやすい。
- FTPでアップロードができるのでデザイナーでも抵抗がなく使える。
- テスト環境があるのですべての作業が完了してからデプロイができる。
- フォームでreCAPTCHAを設置できる。
- テンプレート変数があり別の値を出力できる。
Netliftの不満な所
- すべてが英語表記
- 「GitHub」「BitBucket」が必須の為Gitを使ったことがない人は抵抗がある。
- 細かい修正でもコミットが必須になってくるので調整が必要なWEBサイトの制作には不向き。
イイウェブの不満な所
- 使っている人が少ない。
- サーバーでビルド設定が行われているので自由に「Gulp」設定ができない。
- 静的ホスティングサービスなのでPHPなどのプログラムを使用できない。
まとめ
静的ホスティングサービスのイイウェブと比べてみました。
| netlify | iiweb | |
| 独自ドメイン | ◯ | ◯ |
| 独自ドメインメール | × | ◯ |
| Gulp設定自由度 | ◯ | △ |
| SSL | 手動 | 自動 |
| 複数サイト管理 | ◯ | ◯ |
| フォーム送信 | ◯ | ◯ |
| マークダウン記述 | ◯ | × |
| FTP | × | ◯ |
Netlifyを使ってみましたがデザイナーには操作が難しいと思いました。
WEBデザインの場合ですとコミットでログを残すより見た目部分を修正したいので、Netliftyは静的ブログやある程度完成したサイトなどを運営するのには良いサービスだと思います。
1サイトはNetliftで運用していって試してみたいと思います。
