自分のドメインを取得してWebアプリを作成・公開する方法

1.まえがき

今年中にアプリを 10 個作ることを目標にしており、手始めに私が好きなプログラミングから発想をもらって、プログラミング言語の予約語」を練習する Web アプリを作ってみました。
こちらです ↓

タイピングゲームとして寿司打とかは有名ですが、それのプログラミング版ってあんまり見ないな〜と思ったので作ってみた感じです。（アップデートあり）

そしたら、やっぱりみんなに見てもらいたいじゃないですか？
でも、公開方法も何も知らなかったということで、備忘録として残しておこう…というのがこの記事の目的です。参考になれば幸いです。

2.Web ページを公開する媒体

Web ページを公開する媒体として、考えられるものはいくつか存在します。今回は、「Github Pages」を使用しました。↓

自分にとって、これの特長とそれに対する注意点は表 2.1 のような感じでしょうか？

表2.1 Github Pagesの特長と注意点

特長	注意点
Githubにプッシュするだけで完結	GitとGithubに関する基本知識が必要
HTML/CSS/JSのみを使った静的サイトのみ対応	動的サイトは対象外 →PHPやRuby・Pythonは使えない
寄付やクラウドファンディングを募ることができる (広告も貼れるっぽいが規約を遵守する必要あり)	オンラインビジネスのような商用利用はできない
リポジトリをPublicにしなければならないが無料で使用できる	自分の書いたコードが誰でも閲覧可能になる(課金すればPrivateでも公開可能)

そのほかにも、いろんなサイト(例えば Netlify)を使う方法、RaspberryPi や自分の PC をサーバにして公開する方法なんかもありますが、今回は一番楽そうなこの方法で運用しようかなと思いました。
とは言っても、そのうちランキング機能とかもつけたいと考えているので、その時は別途サーバを動かしたり…考えることは多いです。

3.自分だけのドメインを取得する

Github pages では、向こう側が勝手に割り当てた（？）URL を使って公開するんですが、せっかく自分のサイトを作るなら、自分オリジナルのドメインを持ちたくないです！？そんなことない？自分だけのドメインを持てば、それは一生の宝になるはずです！

3.1 ドメインの発行にはいくらかかるのか？

実はドメインを発行するのってそんなに値段かからないんですよ！自分の場合は 1 年で$11.51(当時日本円で 1776 円)でした！つまり１ヶ月 150 円くらいで自分のドメインが作れてしまうわけです！安いでしょう？
やはり、せっかく自分のサイトを作るなら、自分専用のドメインをとって、自分だけのオリジナルサイトを作るほうがいいと思いますよう！

3.2 ドメインの発行手順

それでは、ドメインの発行手順を説明していこうと思います。
今回は、cloudflare を使って独自ドメインを取得しました。これについてもメリットとデメリットがあります。表 3.1 のような感じでしょうか。

表3.1 cloudflareからドメインを取得するメリットとデメリット

メリット	デメリット
安い。しかも何年経っても定額※日本語のサイトの中には２年目以降値段が変わるサイトがあり	米ドル基準で換算するので、円安が進むとそれだけ値段が上がる クレジットカードの手数料心配
有名企業であり大きな企業なのでセキュリティリスクが少ない	全部英語なので英語が読めるか翻訳機を携えるかのどちらかが必要

それではやっていきます。まず、以下のサイトにアクセスしましょう。

そうすると、以下のような画面が出てくるかと思います。

図3.1 ドメイン登録と更新

そしたら、この検索ボックス内に「（自分が作りたいドメイン名）.com」と入力し、検索します。すると、そのドメインが購入可能かどうかがわかります。

基本的に.com か.jp がいいと思います。安全性や信頼性の観点からですね。

あろうことか、自分が購入している瞬間を撮影し忘れていたため、今回は以下のような URL を使って説明します

qiita.com
ssmbc2929.com

基本的に数字はあまり用いないほうがいいと言われます。数字を含むドメインがスパムサイトや迷惑メールに多いからだそうですが…
あと、あまり長いドメインも好まれません。こちらは検索されにくくなるからですね。

まず、qiita.com から見てみましょう。我らが qiita のドメインなので、当然登録することはできません。
もちろん、画面には図 3.2 のような表示があります。

図3.2 ドメインがすでに使われている場合

翻訳すると「qiita.comはすでに登録されているので使えないよ！」っていう感じです。

では次に、ssmbc2929.com です。自分のユーザーネームから持ってきているのでおそらく登録できます。
図 3.3 からわかる通り、購入可能です。購入可能な場合はオレンジ色の"Purchase（購入）"のボタンが出てくるので、値段と相談してそこをクリックします。

図3.3 ドメインが購入可能な場合

ちなみに、先ほど「1 年で$11.51」といいましたが、図 3.3 では 10.46 となっています。これはクレジットカードの手数料などが加算された結果相違が生じているだけなので、心配することはありません。

さて、購入ボタンを押した後、今度は図3.4の画面が出てきます。

図3.4　ログイン画面

実は、cloudflareで購入する際は自分のアカウントを登録する必要があります。これは、自分のサイトへのアクセス状況を管理したり、セキュリティ設定や支払いの管理に必要です。
qiitaを使っている皆さんならGoogle・Apple・Githubのどれかのアカウントは持っていると思いますので、それを使うのが楽かなとは思います。もちろんそれらに頼らず、自分のメールとパスワードを設定する形で登録することもできますので、サクサクとやっておきましょう。

そしたら次、図3.5の画面が出てきます。

図3.5 料金設定

お察しの通り、ドメインの購入は1年間のサブスクリプション方式となっています。"Payment potion"のタブを開くと、何年単位で支払うか、の画面が出てきます。長期間に設定することでの割引などは特にないため、基本的にここは無視で問題ありません。
そしてここ、肝心なのですが、

1 年後にサブスク料を払い忘れると、数日間の猶予期間の後、そのアドレスは一般に解放されてしまいます。

とはいうものの、催促のメールが届きますし、自動で継続購入できる設定がデフォルトで ON になってた（気がする）のでそこまで心配することはないと思われます。

そしたらその下には、図3.6のように、個人情報を登録する箇所があります。都道府県名以外は流石にモザイクです。

図3.6 個人情報登録

以下に、それぞれ何を入力するかをまとめます。もちろんすべて英語で入力します。また、*がある箇所は必須なので気を付けましょう。

• First name：名前
• last name：苗字
• Organization(if applicable)：（企業として利用する場合のみ）企業名
• Email：メールアドレス
• Phone：電話番号
• Country：国籍
• Address line1：市・区・郡以下の住所
• Address line2：アパート名・ビルなど書ききれない住所
• City：市・区・郡
• State/Province：都道府県名
• Postal code：郵便番号

なお、自分は以下のサイトを使って英語の住所を出力しました。大変便利なので使ってみてください。

その下には図 3.7 のように、支払い方法を選択する画面が出てきます。クレジットカードか PayPal が選択可能です。ここに関しては好きなほうを選択すると良いと思います。

図3.7　支払方法選択

以降は画面の操作に従って進んでもらえればと思います。相変わらず英語なのでお気をつけて。

4.購入が完了したら

購入が完了しましたね！世界で一つだけのアドレスです！
ただ、まだ終わりではありません。ホームページを作らなければなんの意味もないのです。
ここから、Github pages と cloudflare の両方で設定しなければいけない場所があります。
自分のドメインが世界中に浸透するまで、10 分くらいかかるみたいなので、その間にいくつか設定を終わらせてしまいます。

4.1 Github pagesの設定

まずは、Github pagesを使ってwebページを公開する設定を行いましょう。
始めに、webページをつかさどるリポジトリを作ります。図4.1のように作ります。

図4.1 Github pagesを使うためのリポジトリ

ここで、リポジトリ名は必ず以下の通りにしてください。

[自分のユーザー名].github.io

上記のようにしないと機能しません。気を付けましょう！

自分はすでに作ってあるのでエラーが出てますが無視してくださいね！

次に気を付けないといけないのが ② の"Choose visibility"です。"Public"にしてください。
Private にすると課金をしない限り公開できません。無料で使いたい方は Public にしましょう。

ただし、Public にすると世界中誰でもあなたの作ったコードを閲覧可能になります。それは困る！っていう人は課金をするか、別の方法での公開を検討しましょう。

それ以外の部分は空欄で問題ありません。READMEは作っておいてもいいかもしれませんが…

そうしたら、表示したい web ページをこのリポジトリにプッシュします。HTML だけは必ず"index.html"という名前にしましょう。CSS や JS はどんな名前でも問題ありません。

index.html にしないと README が表示されるか、404 Not Found となります。

そしたら、setting に入ります。"Build and deployment"が図 4.2 と同じようになっているかを確認してください。

図4.2　Build and deployment

4.2 cloudflare の設定

ここから、「自分のホームページとドメインを紐づける」作業を行います。今はまだ、自分のドメインとさっき設定したホームページが乖離したままであるため、自分のドメインを打っても絶対にホームページは見れません。そこで、サーバの IP アドレスと自分のドメインを紐づける必要があるわけです。その作業をおこないます！
始めに、画面左側に図 4.3 のような、複数のプルダウンのメニューがあると思います。
ない場合は、左上のオレンジの雲を押した後、自分のドメイン名をクリックしてください。

図4.3　プルダウンメニュー
1

そしたら、その中にある「DMS > Records」を選択してください。すると、図 4.4 のような画面が出てくるかと思います。

図4.4　DNS > Records

そしたら、右側の青いボタン、"Add record"を押してください。すると、図 4.5 のような画面が出現します。

図4.5 Add record

表4.1 入力するデータ群

Type	Name	IPv4 address	Proxy status
A	[自分のドメイン名]	185.199.108.153	灰色(DNS only)
A	[自分のドメイン名]	185.199.109.153	灰色(DNS only)
A	[自分のドメイン名]	185.199.110.153	灰色(DNS only)
A	[自分のドメイン名]	185.199.111.153	灰色(DNS only)
CNAME	www	[4.1節で作ったリポジトリ名]	灰色(DNS only)

なお、Proxy status の「灰色(DNS only)」とは図 4.6 の状況を指します。

図4.6 DNS only

入力した情報について、それぞれ説明します。
まず、上 4 つのアドレスはすべて、Github 公式が公開している Github の IP です。

ここにつなげることで、自分の github.io がここにあることを知らせます。

次に CNAME について、これは正式名称を「Canonical Name レコード」といい、このドメインへのアクセスを github.io のホームページに飛ばす、という役割をします。こうすることでホームページが見れるわけです。

また、Proxy status についても説明します。これをオン状態（オレンジ）にしておくと、通信時に cloudflare のサーバを中間地点（プロキシ）として経由するため、サイバー攻撃を防いだり高速化してくれたりします。ただ、Github に登録するまでの間はそれをすると SSL 証明書(HTTPS)の発行を妨げる可能性があるため、オフ状態にしているわけです。
なので、すべての設定が終わった後でこれらをオンにすると、安全性が増すためおすすめです。

4.3 　 Github.io にカスタムドメインを設定する。

それでは、いよいよ仕上げです。自分の github.io の setting に戻ってきたら、図 4.7 のようにカスタムドメインを入力しましょう。そのしたの Enforce HTTPS のクリックも忘れずに行いましょう。（表示するサーバをを HTTPS に強制するためのスイッチです）

図4.7 カスタムドメイン入力

そしたら、Actions のタブに入って通信テストを観察しましょう。図 4.8 のように緑色になれば成功です。

図4.8 通信テスト

リポジトリに"CNAME"というファイルが生成されますが、これは削除しないようにしましょう。

5.あとがき

これで、すべての設定が完了しました。
後は自由気ままに Web 開発ライフをたのしんでください！

記事に対する質問・訂正等はコメント欄にお願いします。

最後になりますが、参考までに私のリポジトリを添付しておきます。

最後まで読んでいただき、ありがとうございました！

追記：2026/2/10 図の位置を正しく修正

1. 2026/2/10 追記:画像とそのキャプチャがスマホからみた時に中央揃えになっていなかった問題を修正しました。Qiita運営様やり方を教えてくださりありがとうございました！ただし、図4.3だけはできなかったので左にずれてます…が、諦めました。スミマセン。 ↩