はじめに
一からWebサイトを立ち上げるには思ったよりもやることが多いです。
- ドメインの取得
- サーバーの準備
- DNS設定
- ファイルをアップロード
サーバーとドメインは会員登録とか決済登録とかしないといけないし、月々の費用もかかるし、あとDNS設定は時間かかるのでタイムラグも発生します。
あー
面倒くさい…
そこで誰でも簡単にできて無料！
しかもタイムラグもなくて爆速でWebサイトを立ち上げることができたので、具体的な手順を紹介します。
必要なもの
- GitHubアカウント
- CloudFlareアカウント
これだけ。
手順
1. GitHubに新しいリポジトリを作る
GitHubにログインしたらまずリポジトリを作成します。
Repositoriesから右上の「New」ボタンをクリックして作成しましょう。
作成するリポジトリに好きな名前を設定します。
public（公開）とprivate（非公開）はどちらでも好きな方で。
あとはデフォルトでOKです。
新しくリポジトリができたら何か適当なファイルを作ります。
真ん中あたりの「creating a new file」をクリックしてください。
内容はとりあえず何でもいいので、
ファイル名は「index.html」
内容は「Hello World!」
としました。
できたら右上の「commit changes...」をクリック。
確認画面が出てきたら「commit changes」で完了です。
作ったリポジトリにファイル（index.html）ができました。
こちらでGitHubの準備は完了です。
2. CloudFlareにGitHubを接続する
次はCloudFlareを設定します。
CloudFlareにログインしたらサイドバーの「Workers & Pages」をクリックしてください。
「Pages」の「Gitに接続」ボタンをクリック。
「GitHubに接続」ボタンをクリック。
GitHubへ自動的に移動します。
自分のGitHubアカウントをクリック。
前項で作成したリポジトリを選びたいので「Only select repositories」を選択。
作成したリポジトリをクリック。
リポジトリが選択できたら「Install & Authorize」ボタンをクリック。
CloudFlareに戻ってきます。
こちらでもリポジトリを選択して「セットアップの開始」ボタンをクリック。
最後です。
特に変更することはないので、デフォルトでOKです。
「保存してデプロイする」をクリック。
CloudFlareの処理が始まります。
無事に成功。
「プロジェクトに進む」をクリックして完了です。
ドメインが作成されたのでクリックして開いてみてください。
反映まで時間がかかるので直後はエラー画面か、Nothing画面になると思います。
しばらく後…
GitHubのリポジトリに作成した「index.html」が無事に表示されました！
以上です。
お疲れさまでした！
これであっという間にWebサイトを立ち上げられますね。
手順に慣れてしまえば、おそらく５分かからないかと。
更新してみる
実は「GitHub + CloudFlare」でWebサイトを作るメリットは更新する時なんです。
GitHubのリポジトリを更新すれば、自動的にCloudFlareへ反映してくれます。
最高か。
実際に更新してみましょう。
まずGitHubを開いて更新するファイルを選択します。
右上の鉛筆マークをクリック。
適当に「Hello World!」をコピペしました。
変更したら右上の「Commit changes...」ボタンをクリック。
確認画面が出てきたら「commit changes」で完了です。
CloudFlareの「デプロイ」を開いてみると…
デプロイの行数が増えていて、ステータスが進行中になってます。
ステータスが完了したらドメインを開いてみましょう。
ちゃんと更新されていますね！
まとめ
「GitHub」と「CloudFlare」を使って、無料で爆速にWebサイトを立ち上げてみました。
ちなみに独自ドメインを使いたい場合は、CloudFlareに設定できます。
それはまた別の記事で。
いや、最高か。