Netlifyで簡単！HTMLサイトを無料で公開する方法

2025年5月9日

はじめに

ウェブサイトを公開したいけど、サーバー構築やFTPアップロードなど面倒な手順は避けたい…そんな思いを持ったことはありませんか？今回は、Netlifyというサービスを使って、HTMLファイルを驚くほど簡単に公開する方法をご紹介します。

2025年現在、Netlifyはウェブサイト公開の常識を変えた革命的なサービスとして多くの開発者やクリエイターに愛用されています。特にHTMLやCSS、JavaScriptで作られた静的サイトの公開が驚くほど簡単になりました。

Netlifyとは？

Netlifyは、静的サイトのホスティングとデプロイメントサービスです。以下の特徴があります：

完全無料のプランが充実（個人利用や小〜中規模プロジェクトなら十分）
ドラッグ&ドロップでHTMLファイルをアップロードするだけで公開可能
自動SSL対応で安全なHTTPSサイトが無料で作れる
継続的デプロイメントでGitHubと連携すれば更新も自動化
CDN機能が標準搭載で世界中どこからでも高速表示

たった3ステップでHTMLサイトを公開

ステップ1：Netlifyにサインアップする

Netlify公式サイトにアクセス
「Sign up」をクリック
GitHub、GitLab、Bitbucketアカウント、またはメールアドレスでサインアップ

ステップ2：HTMLファイルをアップロード

方法A：ドラッグ&ドロップで即公開

Netlifyダッシュボードの「Sites」タブに移動
「Add new site」→「Deploy manually」を選択
公開したいHTMLファイルやフォルダをドラッグ&ドロップするだけ！

方法B：GitHubリポジトリから公開（おすすめ）

GitHubにHTMLファイルを含むリポジトリを作成
Netlifyダッシュボードで「Add new site」→「Import an existing project」→「GitHub」を選択
リポジトリを選択して「Deploy site」をクリック

ステップ3：サイトを確認して共有

デプロイが完了すると、自動生成されたURLでサイトが公開されます（例：https://your-site-name.netlify.app）。
このURLを友達やSNSで共有すれば、世界中の誰でもあなたのサイトを閲覧できます！

さらに便利な機能

カスタムドメインの設定

独自ドメインをお持ちなら、簡単に設定できます：

サイト設定の「Domain management」を開く
「Add custom domain」をクリック
お持ちのドメイン名を入力して「Verify」
表示されるDNS設定を、ドメイン管理サービスで行う

フォーム機能

HTMLフォームを簡単に機能させることができます：

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" placeholder="お名前" />
  <input type="email" name="email" placeholder="メールアドレス" />
  <textarea name="message" placeholder="メッセージ"></textarea>
  <button type="submit">送信</button>
</form>

form要素にdata-netlify="true"を追加するだけで、Netlifyが自動的にフォーム送信を処理してくれます。

サーバーレス関数

JavaScriptで簡単なバックエンド処理も実現できます：

プロジェクトのルートにnetlify/functionsフォルダを作成
その中にJavaScriptファイルを作成（例：hello.js）

exports.handler = async function(event, context) {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "こんにちは！Netlify Functionsです！" })
  };
}

これで/.netlify/functions/helloというURLにアクセスすると、JSONレスポンスが返ってきます。