無料で簡単、爆速でWebサイトを立ち上げる方法【GitHub + Cloudflare Pages】

## はじめに
一からWebサイトを立ち上げるには思ったよりもやることが多いです。

- ドメインの取得
- サーバーの準備
- DNS設定
- ファイルをアップロード

サーバーとドメインは会員登録とか決済登録とかしないといけないし、月々の費用もかかるし、あとDNS設定は時間かかるのでタイムラグも発生します。

あー

面倒くさい…

そこで誰でも簡単にできて無料！
しかもタイムラグもなくて爆速でWebサイトを立ち上げることができたので、具体的な手順を紹介します。

## 必要なもの
- GitHubアカウント
- CloudFlareアカウント

これだけ。

https://github.com/

https://www.cloudflare.com/ja-jp/

## 手順

### 1. GitHubに新しいリポジトリを作る
GitHubにログインしたらまずリポジトリを作成します。

Repositoriesから右上の「New」ボタンをクリックして作成しましょう。
![github-new-repository-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/1da1f1eb-5f0b-0dae-eccc-d82daf3f65db.png)

作成するリポジトリに好きな名前を設定します。

public（公開）とprivate（非公開）はどちらでも好きな方で。
あとはデフォルトでOKです。
![github-new-repository-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/b50a14f0-b965-01bf-eb59-93cbe29b018f.png)

新しくリポジトリができたら何か適当なファイルを作ります。

真ん中あたりの「creating a new file」をクリックしてください。
![github-new-repository-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/4f0d0963-24ae-6637-dd5f-b76d36a59247.png)

内容はとりあえず何でもいいので、

ファイル名は「index.html」
内容は「Hello World!」

としました。

できたら右上の「commit changes...」をクリック。
![github-new-repository-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/d53b68fd-ccad-3ab9-f4cc-6c87406c9d07.png)

確認画面が出てきたら「commit changes」で完了です。
![github-new-repository-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/0528de68-3c7a-bc73-29b9-122f41746d58.png)

作ったリポジトリにファイル（index.html）ができました。
![github-new-repository-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/b74aa9ef-b892-87aa-a767-6130800bd563.png)

こちらでGitHubの準備は完了です。

### 2. CloudFlareにGitHubを接続する
次はCloudFlareを設定します。

CloudFlareにログインしたらサイドバーの「Workers & Pages」をクリックしてください。
![cloudflare-github-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/b0511b97-4386-6e5a-e45e-44a74092a19b.png)

「Pages」の「Gitに接続」ボタンをクリック。
![cloudflare-github-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/fdce1c2e-e7f4-e02c-9409-1f5defaa67b5.png)

「GitHubに接続」ボタンをクリック。
![cloudflare-github-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/ba67c091-d46d-d914-6888-d7885e677a4c.png)

GitHubへ自動的に移動します。

自分のGitHubアカウントをクリック。
![cloudflare-github-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/e2d12237-6fa2-1fe5-10b1-0cfc33c19fe5.png)

前項で作成したリポジトリを選びたいので「Only select repositories」を選択。

作成したリポジトリをクリック。
![cloudflare-github-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/67e77740-48c8-7664-7c37-001086cfc558.png)


リポジトリが選択できたら「Install & Authorize」ボタンをクリック。
![cloudflare-github-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/df3ec487-26e7-e540-87d5-43a20225c1c5.png)

CloudFlareに戻ってきます。

こちらでもリポジトリを選択して「セットアップの開始」ボタンをクリック。
![cloudflare-github-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/cb3d1d72-b713-e32c-2d41-6219dae9f6b5.png)

最後です。
特に変更することはないので、デフォルトでOKです。

「保存してデプロイする」をクリック。
![cloudflare-github-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/3a5d7729-9934-89de-bada-85514fe70c91.png)
![cloudflare-github-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/f61697d3-97c5-f516-eb69-4a2edbaffb10.png)

CloudFlareの処理が始まります。
![cloudflare-github-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/cf70a3f2-bf06-846e-dcac-5750005c4385.png)

無事に成功。
「プロジェクトに進む」をクリックして完了です。
![cloudflare-github-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/622b053a-23e2-e64e-9ac2-642cec3f96b9.png)
![cloudflare-github-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/3e150a09-eb47-c207-9f94-3ccfcdaee15d.png)

ドメインが作成されたのでクリックして開いてみてください。
![cloudflare-github-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/1e9b7818-c526-ad19-d2f8-fae5f3bb6305.png)

反映まで時間がかかるので直後はエラー画面か、Nothing画面になると思います。
![cloudflare-github-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/86b76476-d858-f33f-d3fb-462a6d4b8dc4.png)

しばらく後…

GitHubのリポジトリに作成した「index.html」が無事に表示されました！
![cloudflare-github-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/83534b95-8194-fae6-9ec3-f254782e36a9.png)

以上です。
お疲れさまでした！

これであっという間にWebサイトを立ち上げられますね。
手順に慣れてしまえば、おそらく５分かからないかと。

## 更新してみる
実は「GitHub + CloudFlare」でWebサイトを作るメリットは更新する時なんです。

GitHubのリポジトリを更新すれば、自動的にCloudFlareへ反映してくれます。

最高か。

実際に更新してみましょう。

まずGitHubを開いて更新するファイルを選択します。
![github-update-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/7c1fe00e-ddd1-3894-3ff5-c50270bf6a2c.png)

右上の鉛筆マークをクリック。
![github-update-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/c9d21fd6-ff68-559b-b8fd-ece3bfb1beb6.png)

適当に「Hello World!」をコピペしました。

変更したら右上の「Commit changes...」ボタンをクリック。
![github-update-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/d14854d0-76d0-e436-149a-4c032c16bd85.png)

確認画面が出てきたら「commit changes」で完了です。
![github-update-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/0adba89c-1aab-ed81-3a50-4e16e683626f.png)

CloudFlareの「デプロイ」を開いてみると…

デプロイの行数が増えていて、ステータスが進行中になってます。
![github-update-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/5d5a6092-36c3-3849-135c-921fc9ccf9ae.png)

ステータスが完了したらドメインを開いてみましょう。
![github-update-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/a77e4fc2-6f20-538b-e075-68081e928459.png)

ちゃんと更新されていますね！
![github-update-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812157/9d544f05-135b-8fa8-d837-b8a6f262f898.png)

## まとめ
「GitHub」と「CloudFlare」を使って、無料で爆速にWebサイトを立ち上げてみました。

ちなみに独自ドメインを使いたい場合は、CloudFlareに設定できます。

それはまた別の記事で。

いや、最高か。