HTML/CSSでページを作っても、自分のパソコンの中に置いたままでは自分にしか見えません。フォルダをそのままアップロードするだけで公開してくれる無料サービスがあり、一番手軽なのは Netlify のドラッグ&ドロップです。この記事ではNetlifyを中心に、GitHub Pages・Cloudflare Pagesという選択肢もあわせて紹介します。
Netlifyでドラッグ&ドロップ公開
Netlify は無料で使えるサイト公開サービスで、中でも Netlify Drop はログインなしで試せる特別な入り口です。
- 公開したいフォルダを用意する —
index.htmlがそのフォルダの直下にあることを確認します。サブフォルダの中に埋もれていると、うまく表示されません。 - フォルダをまるごとドラッグ&ドロップ — 上の丸い枠にフォルダをドロップすると、アップロードが始まります。
- 発行されたURLを確認する — 数秒待つと
xxxxx.netlify.appのようなURLが発行されます。これをコピーすれば、誰にでも共有できます。
公開前のチェックリスト
アップロードの前に、フォルダの中身を3点だけ確認しておくと、公開後の「あれ？」がほぼ防げます。
- トップページの名前は
index.html——公開サービスは「まずindex.htmlを表示する」という約束で動いています。home.htmlやmypage.htmlしか無いと、URLを開いても何も出ません - リンクや画像のパスは相対パスに——
file:///Users/…のような自分のパソコン内の場所を指すパスで書いていると、ネット上では見つけられません。images/photo.pngのように、HTMLファイルから見た道順で書きます - 個人情報が入っていないか——公開したページは世界中の誰でも見られます。本名・住所・学校名・電話番号・顔写真を載せていないか、アップロード前に一度見直しましょう
ほかの選択肢
Netlifyがもっとも手早いですが、普段使っているツールに合わせて選ぶのも手です。
GitHub Pages
コードを保存する場所として使われるGitHubに、そのままページを公開できる機能です。GitHubにコードを置く習慣があるなら、追加の登録なしで使えるのが強みです。
ただし無料プランではリポジトリを公開（public）にする必要があり、HTMLやCSSのソースも誰でも読める状態になります（非公開のまま公開したい場合は有料プランが必要）。人に見られて困るものを書いていないか、ここでも確認しておきましょう。
Cloudflare Pages
Cloudflareという会社が提供する公開サービスです。表示速度の速さと、GitHubと連携して「コードを更新するたびに自動で反映される」仕組みが特徴。このサイト（ぴよぐらみんぐ）もCloudflare Pagesで公開しています。
3つのサービスの使い分け
| サービス | 手軽さ | 更新のしかた | 向いている人 |
|---|---|---|---|
| Netlify Drop | ◎ 登録なしでも試せる | フォルダを再ドロップ | 今日はじめて公開する人 |
| GitHub Pages | ○ GitHubの利用が前提 | コードを更新すると反映 | GitHubを使っている人 |
| Cloudflare Pages | ○ 登録＋連携の設定 | GitHub連携で自動反映 | 何度も更新して育てたい人 |
迷ったら「まずNetlify Dropで公開の体験→更新が増えてきたらGitHub連携のあるサービスへ」という順番が、遠回りのない道です。
公開に慣れて「xxxx.netlify.appではなく、自分だけの住所がほしい」と思ったら、次の一歩は独自ドメインです。
べんりワザ独自ドメインの取り方と選び方独自ドメインの取り方と選び方——費用の罠と名前の決め方も解説しています1まとめ
- 作ったフォルダをそのままアップロードすれば、無料で公開できる
- 一番手軽なのはNetlify Drop——ドラッグ&ドロップだけで数秒後にURLが手に入る
- GitHubを使っているならGitHub Pages、更新のたびに自動反映したいならCloudflare Pagesも選択肢
自分の作ったページに、自分だけのURLがつく——それだけで、作ったものがぐっと”本物”に近づきます。