ウェブサイトを安く公開する方法【第二回】
皆さんは「ウェブサイトを無料で公開したいな」と思ったことはありませんか?
今回は静的ウェブサイトを無料で公開する方法をお伝えしていこうと思います。
残念ながらメール利用をするにはドメインは必須ですので、ドメインは取ってください。
Namecheapで数$で買えるドメイン(初年度)もありますし、Cloudflareに5$で買えるドメインもあります。
今回はCloudflareで5$ドメインを取った前提ではなしていこうと思います。※ CloudflareにDNSを変更するでも可能です。
CloudflarePagesは無料で静的ウェブサイトを建てることが出来るサービスです。
利用方法はGithubにリポジトリを作り繋ぐ方法と直接ファイルをアップロードする方法がありますが、今回は前者で説明していきます。
GitHubにアカウントを作ってください。
持っている場合はそのアカウントを使ってください。
![](https://assets.st-note.com/img/1696301553364-c6kj2txKcn.png)
「+」ボタンを押して
![](https://assets.st-note.com/img/1696301619685-n6m9rb1NY3.png?width=1200)
リポジトリを作成してください。
公開設定はPublicでもPrivateでもOkです。
![](https://assets.st-note.com/img/1696301738856-fRBobnadDu.png)
「creating new file」からファイルを作れます。
以下のようにしてください。
![](https://assets.st-note.com/img/1696301808222-XD4uGkgBfG.png)
右上の「Commit changes」を押して
![](https://assets.st-note.com/img/1696301832944-fsCVCyLX2L.png)
出たウィンドウの右下の「commit changes」を押してください。
![](https://assets.st-note.com/img/1696301840245-MVJbcA5CN5.png)
Cloudflareに戻り、左メニューの「Workers & Pages」を押して
![](https://assets.st-note.com/img/1696301936485-uaYKIGbL1S.png)
「Pages」を押し、Connect to Gitを押してください。
![](https://assets.st-note.com/img/1696302059450-JSdcVR1a6M.png?width=1200)
私はGithubアカウントを追加済みのため表示されませんでしたが、
追加していない場合は追加してください。
![](https://assets.st-note.com/img/1696302121226-vhbzBRjach.png?width=1200)
先程作ったリポジトリを選択し、
![](https://assets.st-note.com/img/1696302172955-98XAECFSay.png)
「Begin setup」を押します。
![](https://assets.st-note.com/img/1696302187916-3I3lUXiP1l.png)
ここは変えなくても大丈夫なのでスクロールして、
![](https://assets.st-note.com/img/1696302244360-Q6D2WhtF5g.png?width=1200)
「Save and Deploy」を押してください。
![](https://assets.st-note.com/img/1696302270257-qhEaBVHGto.png)
これが終わるまで待ってください。終わったら下の「Continue to project」を押してください。
![](https://assets.st-note.com/img/1696302310394-Fwh4FjlKgP.png?width=1200)
このボタンです。
![](https://assets.st-note.com/img/1696302344386-WlBOHyGuBg.png)
「Custom domains」を押してください。
![](https://assets.st-note.com/img/1696302371064-3wjGhBLeoh.png?width=1200)
取得したドメインを入力してください。
![](https://assets.st-note.com/img/1696302559666-eblcC77bUL.png?width=1200)
「Continue」を押し、「Activate domain」を押してください。
![](https://assets.st-note.com/img/1696302664665-i7uMtKIA0Y.png?width=1200)
「verifying」が「Active」になったらサイトにアクセスしてみましょう
![](https://assets.st-note.com/img/1696302737649-Je0yLSRmhI.png?width=1200)
このように先程作ったページが表示されれば成功です!お疲れ様でした。
![](https://assets.st-note.com/img/1696302794450-uRueCkuDza.png)
サイトのアップデートはGithubのリポジトリを更新するだけです!
![](https://assets.st-note.com/img/1696302914927-CQ0ji0WsPI.png)
更新後、少し待てば適応されます!
![](https://assets.st-note.com/img/1696302953642-RpyA5tPlKc.png)
メールアドレスですが、無料のカスタムドメイン対応のメールプロパイダを利用することが出来ます。
個人利用ならZohoMailがおすすめです。
メール+ウェブサイトのために数千円も毎月払う時代は終わりました!
お手軽にウェブサイトをお安く運営しましょう!
ちなみにプロフィールウェブサイト作りました!(VPSを使って建ててますが)
普段はウェブ開発とかウェブデザインとかやってるのでそれ関連の記事も出せたらなと思います!
ではまた次回★
この記事が気に入ったらサポートをしてみませんか?