🏠
†集まれHTML職人†無料でホームページを公開しよう

2024/12/24に公開
 古代文明ホムペ、復活時は2024年12月、インターネットと現実が交差する世界の片隅にて
「うぉぉぉおぉぉぉ！！！しゃらくせぇぇぇ！！！最近のインターネットはしゃらくせぇぇぇ！！！！！」
「20年前は一般人がHTMLを書いていたんだぞ！！！[1]」
「温もりあふれる手書きHTMLは消えてしまう運命なのかッッッ！！！！！」
謎の声
「……公開したいか、無料で†ホムペ†を……」
ナレーション
「当時、若者たちがWebサイトについて語るとき、その呼び名は「ホームページ」を省略した「ホムペ[2]」であった。はたして謎の声は何者か。」

 Cloudflare Pages「我が名は†クラウドフレア・ページズ†（Cloudflare Pages）」
「貴様にホムペ公開能力を授けよう。もちろん公開するための費用は不要、完全に無料だ。」
「用意するものはパソコンとブラウザだけだ。スマホやタブレットで作業することは可能だが、ファイルの管理が地味に不便なので、おすすめはせぬ。」
「ところで、この文体で説明を続けるのは辛いから、普通の文体に戻すぞ。」

 どんなサービス？Cloudflareは様々なサービスを提供しています。その多くは技術者向けのサービスです。
しかし、Cloudflare Pagesは例外的な存在です。管理画面でHTMLファイルをアップロードするだけで、Webサイトとして公開されるのです。
かつて存在した無料ホームページのサービスとは異なり、内容を改変されて広告が追加されることはありません。あなたが作成したHTMLは、そのまま公開されます。

PagesでWebサイトを作成するとhttps://お好きな名前.pages.devでアクセス可能になります。

 安全なの？Cloudflareはニューヨーク証券取引所に上場している企業です。一般には知られていませんが、セキュリティやCDNといったインターネットの裏方を支える技術で高く評価されています。
もちろんCloudflare Pagesの安全対策は万全です。あなたはHTMLファイルをアップロードするだけで、世界中からの大量アクセスに耐えられる、安全なWebサイトを公開できるのです。

 なぜ無料なの？今回は無料プランを利用します。アップロードできるファイル容量は25 MBに制限されます。
業務利用には制限が厳しすぎるのですが、個人でちょっとしたホームページを公開する程度ならば無料プランで十分です。
なお、ホームページの公開にあたり後から課金が発生することはありません。完全に無料で利用できます。

 公開できるコンテンツに制限はある？大きな力には大きな責任が伴います。当然、違法なコンテンツの公開は犯罪です。（例：詐欺や他者を脅迫する内容など）
本記事で想定しているコンテンツは自作のイラストや小説、日記などです。インターネット上に公開して問題ないか不安に感じた場合は各自で判断せず、弁護士や専門家に相談してください。

 ホームページを公開しよう！それでは、ホームページを公開してみましょう。手順は以下の5ステップです。
Cloudflareアカウントを作成する
Pagesプロジェクトを作成する
HTMLファイルを作成する
HTMLファイルをアップロードする
ホームページが公開されたか確認する

 （ステップ1）Cloudflareアカウントを作成するGoogle Chromeなどのブラウザで以下のリンクを開いてください。Cloudflareのホームページが表示されます。
https://www.cloudflare.com/ja-jp/
大量の専門用語と微妙に不自然な日本語に不安を感じるかもしれませんが、Cloudflareに限らず技術系のサービスはどれもこんな雰囲気です。安心してください。
Googleアカウントをお持ちの場合は「ログイン」ボタン、そうでなければ「無料で始める」ボタンを押してください。
上記の画面は「ログイン」ボタンを押した後に表示される画面です。選択肢の中にあるGoogleボタンを押してください。
※「無料で始める」を選んだ場合はメールアドレスとパスワードを設定する画面が表示されます。手順が面倒なのでGoogleログインをお勧めします。
Googleログインが成功すると、Cloudflareの管理画面が表示されます。以下の画面が表示されたら成功です。
※ご使用されているブラウザの言語設定によっては同じ見た目にならない場合があります。
以上でCloudflareアカウントが作成できました。次のステップへ進みましょう。

 （ステップ2）Pagesプロジェクトを作成する画面の左側にあるメニューの中から「Workers & Pages」をクリックしてください。すると、以下の画面が表示されます。
画面中央の「Workers & Pages を始めましょう」の下にある「Pages」をクリックしてください。すると、以下の画面に切り替わります。
画面の下部にある「アセットをアップロードする」をクリックしてください。すると、プロジェクトの作成画面に切り替わります。
画面中央にある入力欄にプロジェクト名を入力します。プロジェクト名として使用できる文字は次の3種類です。
（すべて半角文字）
アルファベット小文字
数字
ハイフン記号（-）
ここで設定したプロジェクト名がホームページのURLになります。
URLはhttps://プロジェクト名.pages.devです。すでに使われている名前は利用できないため、取得は早い者勝ちとなります。
プロジェクト名を入力したら「プロジェクトの作成」ボタンをクリックしてください。すると、以下の画面に切り替わります。
以上でプロジェクトが作成できました。画面は開いたまま、次のステップに進んでください。

 （ステップ3）HTMLファイルを作成するさぁお待たせしました、HTMLファイル作成のお時間です。まずはデスクトップに「Pages」という名前のフォルダを作成しましょう。
続いてHTMLファイルを作成します。メモ帳を開いて以下のHTMLをコピペしてください。
<!doctype html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>工事中</title>
	</head>
	<body>
		<h1>ホームページを作っています。完成するまで待ってね。</h1>
	</body>
</html>
上記のHTMLを「index.html」という名前でPagesフォルダの中に保存してください。
以上でHTMLファイルの作成は完了です。職人の魂がうずくかもしれませんが、ひとまず動作確認です。次のステップへ進みましょう。

 （ステップ4）HTMLファイルをアップロードするブラウザに戻ってください。画面下部の「ドラッグアンドドロップするか、コンピュータから選択します」をクリックしてください。
その後、「フォルダをアップロード」ボタンを押してください。フォルダの選択画面が表示されるので、デスクトップにあるPagesフォルダを選んでください。
アップロードが成功すると「すべてのファイルが正常にアップロードされました。」と表示されます。以下のような画面になるはずです。
最後に、画面右側にある「サイトをデプロイ」ボタンをクリックしてください。しばらく待つと、以下の画面に切り替わります。
画面中央に「成功しました！」と表示されたら成功です。ホームページが公開されました！

 （ステップ5）ホームページが公開されたか確認する先ほどの画面にhttps://プロジェクト名.pages.devというリンクがあります。クリックしてみてください。以下のような画面が表示されるはずです。
上記のように表示されます。素朴で味わい深いホームページですね。
通常はすぐに公開されますが、5分ほど待たされる場合もあります。ページが表示されない場合はしばらく待ってからブラウザを更新してみてください。

 ホームページ公開後の作業ホームページを公開する流れは理解できたかと思います。ここからはホームページ公開後に行う作業について説明します。

 ホームページを更新するまずはデスクトップにある「Pages」フォルダを開いて、index.htmlを更新しましょう。
続いて、先ほど完了したステップ5の画面に表示されている「プロジェクトに進む」をクリックしてください。その後、「デプロイを作成する」をクリックしてください。
※画面を閉じてしまった場合はCloudflareにログイン→Workers & Pagesをクリック→プロジェクト名をクリックすると同じ画面が表示されます。
すると、以下の画面が表示されます。「展開環境」は「プロダクション」を選び、ファイルをアップロードします。
「保存してデプロイする」ボタンを押せば新しい内容でホームページが更新されます。
ホームページを更新する場合は同じ流れを繰り返します。

 ホームページを削除するCloudflareにログイン→Workers & Pagesをクリック→プロジェクト名をクリック→設定をクリックします。
画面の一番下にある「削除」ボタンを押すと、プロジェクトが削除されます。ホームページもアクセスできなくなります。
なお、一度削除したプロジェクトは元に戻せません。ご注意ください。

 カスタマイズについてCloudflare Pagesには紹介しきれないほど大量の機能があります。その中で、知っておくと役に立つポイントを3つ紹介します。
ファイル名がindex.htmlではない場合、拡張子を除いたファイル名がURLのパスになります。
例：hello.html→https://プロジェクト名.pages.dev/hello/でアクセス可能


404.htmlを配置すると、ページが見つからない場合に表示されるページとなります。
フォルダ内にフォルダを含めることができます。

 おわりにインターネット空間に浮かぶ小さな箱庭、ホームページを作ってみませんか。

脚注
【古のオタク】アラサー女性はなぜ“HTML”が書けるの？「これ以上探らないで…」【キリ番、お絵かきBBS】 | numan ↩︎
nano-ﾅﾉ-、@ peps!…懐かしいガラケー時代の「ホムペ」文化を振り返る :: デイリーポータルZ ↩︎