第1話
Netlify始め方ガイド！フォルダを落としてURLを作り、「公開」で世界に見せる
作ったHTMLのページが手元のパソコンにある。住所の欄は file:///C:/Users/… のままで、友だちに送っても相手の画面では開けない。フォルダをブラウザの窓に落とすと、〜.netlify.app で終わるURLができる。「準備中」の札を外して、誰でも見られるようにする。この流れを1か所でやるのがNetlifyです。
Map
Netlifyでできること
このシリーズの「見取り図」。1話で1つの部屋を開けていきます。
- 01自動で公開
- 02フォーム受信
- 03巻き戻し
- 04小さなプログラム
Episodes
エピソード一覧
第1話から順に読むのがおすすめ。途中の話から読んでも、1話で完結します。
-
01
-
02
第2話
Netlify×GitHubの始め方！直して保存したら、勝手に公開される仕組みを作る
第1話でフォルダを落としてURLを1本作った。文字を1つ直したくなるたびに、index.html を書き換えて、フォルダをもう一度落とす。3回目あたりで、どのフォルダが最新だったか分からなくなる。直したファイルをGitHubに保存するだけで、公開中のページが新しくなる仕組みを作ります。
-
03
第3話
Netlifyの下見と巻き戻しの使い方！本番を壊さずに直して、失敗したら前に戻す
保存するだけで公開される仕組みは便利。でも困ることが2つ。直した結果を確かめる前に、見に来た人にそのまま見えてしまう。確かめるために保存し直すたびに、本番に置き直されて15クレジット減る。直すのは本番とは別の「枝」の上で、失敗したら前の版に戻す型を作ります。
-
04
第4話
Netlify Formsの始め方！サーバーなしで問い合わせを受け取るフォームを作る
作ったページに「お問い合わせはこちら」を置きたい。メールアドレスをそのまま書くと、迷惑メールが届くようになるかもしれない。入力欄と送信ボタンは HTML だけで作れても、送られた内容を受け取る仕組みがない。HTML のフォームに Netlify 用の印を付けるだけで、送られた内容が Netlify の画面に届くようにします。
-
05
第5話
Netlifyで独自ドメインを使う方法！自分の住所をつないで、古いURLから案内する
〜.netlify.app のURLは、名刺やチラシに載せるには少し長くて覚えにくい。自分で買った住所（ドメイン）をNetlifyのサイトにつなぐと、鍵つきの扉（https）も自動で付きます。前の住所に来た人には、みちしるべ（リダイレクト）で新しい住所を案内します。
-
06
第6話
Netlifyのクレジットの読み方！残りと使い道を見て、サイトが止まる前に気づく
本番に置くたびに15。ページが開かれると、1万回で2。無料プランは月に300。では、あなたのチームには今いくつ残っていますか。今月は何にいくつ使いましたか。この2つに答えられないまま使っていると、ある日いきなりサイトが止まります。
-
07
第7話
Netlifyの公開範囲と環境変数の使い方！見せる相手を決めて、鍵をページに置かない
URLを送ったのに、相手が開けない。その正体は、Netlifyの新しいチームではサイトが非公開から始まることでした。今回は反対に、自分で「誰に見せるか」を決める側に回ります。そして、外のサービスを使うときに要る「APIキー」を、どこに置くか。
-
08
第8話
Netlify Functionsの始め方！サーバーを借りずに、小さなプログラムを動かす
天気を取ってきて表示したい。AIに文章を作ってもらいたい。どれもページの中のJavaScriptでやると、鍵が見に来た人に配られます。JavaScriptのファイルを1つ決まった場所に置くと、それが「呼ぶと動くプログラム」になります。
-
09
第9話 NEW
Netlify DatabaseとBlobsの使い方！入力した内容が、消えないようにする
関数は呼ばれるたびに真っさらな状態で動きます。数を1つ増やしても、次に呼ばれたときには元どおり。感想を投稿してもらう、読んだ数を数える、送られた画像をあとから見る。どれも「置き場所」が要ります。
これから開く部屋
- 10AIに直させる＋総まとめ
Follow
Netlifyの続きを受け取る
第10話が出たら知らせが届くように。公開したらXで告知し、記事の感想は引用リポストで全部読みます。
RSSは、Feedly などのRSSリーダーにこのボタンのURLを入れると使えます。この連載の新しい話だけが届きます。