以前の記事で「Gulpのインストール不要でScssが使用できるサーバー イイウェブ」を紹介しました。

Gulpなどインストール不要。アップロードするだけでSassが使用できるサーバーが登場！！ | イエロー×グリーン | cross bench （クロスベンチ）

みなさんScssを使用する際に自身のパソコンでコンパイラKoalaやタスクランナーのGulpを使用してcssに変換したものをアップロードしていると思います。 ですがまだまだ現場ではScssやGulpを使用している会社は半分ほどです。 HTMLコーダー/マークアップエンジニアに質問。 Sassのコンパイルに何を使っていますか？ ※Twitterの公式アンケート機能で回答ください ※その他の回答は個別にツイートください — 池田 泰延 (@clockmaker) 2017年8月22日 池田さんのアンケートではタスクランナーが60%となっております。 私もここ1、２年で積極的にScssを使用するようになりましたが 会社員時代は数人で作業する時やファイル納品がありましたのでcssでの記述が基本となっておりました。 今でも代理店さんからの依頼の最終納品は「css」が多い印象です。 すべてScssにするには全員がScssを知っている必要があり、 会社の方針としてScssで統一しなければいけません。 Gulpを使用するきっかけはGulpをつかわなければいけない案件があったからです。 HTMLファイルのミニファイ（改行をすべて削除して1行に） CSSファイルのミニファイと規則的な並びに 100ページを超えるコーディング すべて静的HTMLで納品 アイコンなどはfontに変換 Gzipの使用 手作業でこれらのノルマをクリアするのは厳しかった為、 この案件をする前にGulpをインストールしてなんとか納品することができました。 そしてGulpを使用してココがもうちょっと便利になったらいいのになーと思った箇所です。 インストールが大変 ターミナルを操作しないといけない WEBデザイナーには仕切りが高い 複数人での作業に向かない 運用もGulpが必要（修正する際にGulpを使用しないと先祖返りが起こる） Gulpは自由度も高くフロントエンドの方は覚えておきたいツールだと思います が！！ 今回はWEBデザイナー、Scssの練習をしたい、ターミナル無理という方の為にあるサービスを紹介したいと思います。 前から思っておりました。 「ブラウザーが勝手にScssを認識してくれたらいいのにー。」

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

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

Mathias Biilmann — a former CTO of a firm that built websites for small businesses — says developers have gotten so used to using Github as a central workflow, they expect the entire rest of the developer experience to work the same way.

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を使ってみましたがデザイナーには操作が難しいと思いました。

WEBデザインの場合ですとコミットでログを残すより見た目部分を修正したいので、Netliftyは静的ブログやある程度完成したサイトなどを運営するのには良いサービスだと思います。

1サイトはNetliftで運用していって試してみたいと思います。