Netlify は Github・GitLib・Bitbucket 管理のリボジトリから
デプロイするのが主流の使われ方ですが、
すでに形となっている HTML・CSS・JS・画像も
Netlify で公開する事ができます。
その情報が意外と少なかったので……

(・~・)mogmog、Web サイトをつくる。

(・~・)mogmog.o( ホームページ公開したいなぁ…… )

(・~・)mogmog はとりあえず HTML を覚えて最小限の index.html を作りました。

index.html を作った


Netlify Drop で公開する

https://app.netlify.com/drop

「Drag and drop your site folder here」って右上にあるじゃないですか。
ここに HTML などが入っているフォルダをドラッグ&ドロップします。
D:\http\mogmog の中に index.html があったので、
mogmog フォルダをドラック&ドロップします。

index.html を drop

……はい、公開できました!

公開完了

もう参照できます!!

参照できる

ただしこれは 24 時間限定。しかも URL は勝手に決められます。
サインアップ・ログインすると公開したままにできます。

ログインした

しかもアドレスをよく見ると…… https: になっています。
この段階で SSL 付のアドレスになっています。

Site Setting にある Change site name で
●●●.netlify.com の ●●● 部分を変えられます。

URL の変更

Domain settings で独自ドメインの設定もできます。


Netlify Drop したサイトを更新する

(・~・)mogmog は index.html を変更しました。

index.html を変更

反映する必要がありますね。
Netlify へログインし、下の Production deploys をクリックします。
上の横に並んでいる Deploys でも良いですよ。

Deploys ページ

そうしたら、公開した時と同じように index.html などが入っているフォルダを
Deploys の一覧が出ているところへドラッグ&ドロップします。

※ ページの下にドロップ場所の表示がありますが、スクロールしなくても持っていくと自動的に変化します。

index.html を再度 drop

ログインした時の画面に戻りましたね。はい、更新終わりました!

画面が変わった

正式には Deploys の一番上が PUBLISHED 表示になると更新完了です。数秒で終わります。

更新完了

簡単ですね~~~。


Netlify を使っている人の設定

生成された HTML などを GitHub などで管理したいですか?
はい、もちろんできます。

設定画面

Deploys Setting を次のようにします。

  • Build command: (空欄のまま)
  • Publish Directory: /

あとは HTML などを更新したら、Git で push 等するだけです。
Netlify Drop で公開していた場合でも切替可能です。


でも……お高いんでしょ?

ここまで一切クレジットカードの登録とかは発生してませんよね?
完全に無料でサイト公開できます。 独自ドメインでも無料です。

設定画面
https://www.netlify.com/pricing/

有償サービスは複数人使用時となります。
個人で使う範囲なら無料で十分に使えるでしょう。