Cloudflare Pages で個人サイトを公開する
- 投稿した日
- 更新した日
- 書いたひと
- ひらたけ
ここ最近、新たに個人サイトをつくろうとされている方を SNS 等でよく見かける気がします。「この SNS 全盛の時代に個人サイト…？」と思われる方も居るかもですが、拙者他人の個人サイトを見るのが結構すき侍なのでもっと増えてほしい所存。というわけで 「Cloudflare Pages」という私がウェブサイトを公開するときに利用しているサービス について書いていこうと思います。
個人サイトにもいろいろ種類があると思いますが、この投稿では 「エディタで HTML や CSS を編集してつくったページをお金をかけずに公開する」という内容 を説明します。
WordPress を利用する場合には PHP が動作するサーバが必要になるので、有料のレンタルサーバを契約するとかが良いと思います。PHP 使いたい場合は ConoHa WING とかがいいんじゃないでしょうか。このはちゃん がかわいいので。
また、HTML や CSS の書き方についての説明はしていません。コードの書き方については様々な書籍が出ていますし、オシャレなテンプレートを公開されている方もいらっしゃるので、そちらを参考にしていただければ。
Cloudflare Pages とは
Cloudflare Pages とは、公式サイトによると次のようなサービス（公式サイトより引用）。
Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
プログラム書いてるような人向けの JAMstack プラットフォーム、みたいなことが書いてあり、実際にそういった技術者向けの機能が豊富に取り揃えられている感じではありますが プログラムなんも分からんという方でも利用は可能 です。
ページを公開する
さっそくつくったページを公開してみます。まずは Cloudflare のサービスを利用するためにアカウントを作成します。アカウント作成のページ にメールアドレスとパスワードを入力し、ボタンを押します。
表示が英語になっている場合は右上の「English」を押して、出てきた選択肢の中から「日本語」を押すことで日本語に変更することが可能です。
登録のボタンを押すと、入力したメールアドレス宛に「これ本当にあなたのメールアドレスですよね？」的な確認のメールが届くので、メール内のリンクを押して認証をします。これでアカウントの作成は完了です。
続いて、Cloudflare Pages の設定に進みます。画面上部に表示されている ヘッダーにある「追加」ボタン を押して、出てきたメニューの中から 「Pages」を選択 します。
ヘッダーのメニューから「Pages」を選択すると、Cloudflare Pages のアプリケーションを作成する画面に移動します。
Cloudflare Pages のアプリケーション作成には「既存の Git リポジトリをインポートして作成する」という方法と「直接アップロードを使用して作成する」という方法の 2 種類があり、今回は後者の 「直接アップロードを使用して作成する」のほう で進めていきます。
画面の下の方にある「アセットをアップロードする」ボタンを押すと、プロジェクトの名前を入力する画面へと移動します。
プロジェクトの名前にはアルファベットの小文字と数字、ハイフンのみが使用でき、公開されたページの URL は 入力した名前.pages.dev というものになります。既に使われている名前の場合は自動で後ろに文字列が付け足されるので、入力欄の下に表示されるテキストをよく確認しておきましょう。
名前を決めたら、ようやく 個人サイトの HTML や CSS ファイルをアップロードして公開 します。ファイル一式が保存されいてるフォルダを選択するか、ファイル全てをまとめた .zip ファイルを選んでアップロード。全てのファイルがアップロードできたことを確認して、画面下部の「サイトをデプロイ」ボタンを押します。
これで Cloudflare Pages で個人サイトの公開ができました🎉
完了画面に表示されているページの URL（入力した名前.pages.dev というドメインの URL）を押すと、アップロードしたページが公開されていることが確認できます。
ドメインを別のものにしたい場合は、プロジェクトの設定画面にある「カスタムドメイン」から設定ができるようになっています。お名前.com などで取得したドメインを設定することも可能ですが、Cloudflare にもドメインを取得できる「Cloudflare Registrar」というサービスが用意されているので、こちらを利用するのが価格も安くて便利かと思います。
みんな SNS では表現できない独自の世界観を世に送り出してほしい…。個人サイトやろうね。