Webサイト公開・運用マニュアル
保存版はじめに
このマニュアルでは、作成したWebサイトを**無料で、プロフェッショナルな環境(Cloudflare Pages)**で公開する手順を解説します。
- VS Codeから直接アップロードする方法
- 失敗しやすい「画面の選び方」を実際の画像付きで解説
- ずっと無料で使い続けるための設定
Step 1: GitHubの準備
Webサイトのデータを保存するための「倉庫(リポジトリ)」をGitHub上に作ります。
1. 新しいリポジトリを作成
GitHubにログインし、「Start a new repository」または右上の「+」アイコンから新規作成画面を開きます。
- Repository name: 好きな名前を入力(例: web-tsukuru)
- Public: 選択
- 他のチェックボックス(READMEなど)は全て空欄のままにするのがコツです!
2. VS Codeと連携
VS Codeに戻り、作成したレポジトリのURLを登録してデータを送信(プッシュ)します。
※ 初回のみコマンド操作が必要ですが、2回目以降はボタン一つで更新できます。
Step 2: Cloudflareでの公開手順
ここが一番の難関ですが、画像通りに進めれば大丈夫です。
1. Workers & Pagesを開く
Cloudflareのダッシュボードです。最初は「Workers & Pages」が見当たらないかもしれません。
これを見つける一番確実な方法は、左上の検索バー(虫眼鏡アイコン)を使うことです。
「pages」と入力すれば、すぐにメニューが出てきます。
2. アプリケーションの作成
画面右上の青いボタン「アプリケーションを作成する」をクリックします。
3. 【重要】タブの切り替え
ここが最大のつまづきポイントです!
デフォルトでは「Workers(プログラム)」を作る画面になっていますが、私たちは「Pages(Webサイト)」を作りたいので、必ずタブを切り替えてください。
▲ これは間違い!「Workerを作成」という画面だったら、タブが違います。
画面の一番下を見てください。「Looking to deploy Pages? Get started」というリンクがあります。
ここをクリックするのが、正しい画面(Pages作成)への一番の近道です!
正しい画面(Pages作成画面)にたどり着いたら、「既存のGitリポジトリ」の「始める」ボタンを押します。
次に、接続先として「Connect GitHub」を選択します。
4. GitHubとの連携
「GitHubに接続」ボタンを押すと、認証画面が出ることがあります。「Install & Authorize」ボタンを押して許可してください。
連携できたら、リポジトリ一覧から「web-tsukuru」を選択して「セットアップの開始」を押します。
5. デプロイ(公開)
設定画面になりますが、何も変更せずに一番下の「保存してデプロイ」をクリックします。
成功画面が出れば完了です!お疲れ様でした。
2回目以降の更新方法
一度設定してしまえば、あとは簡単です。VS Codeから数クリックで更新できます。
1. 修正と保存
VS Codeでファイルを修正し、忘れずに保存(Ctrl + S)します。
2. ソース管理を開く
左側のメニューから「枝分かれのアイコン(ソース管理)」をクリックします。
3. メッセージ入力とコミット
変更内容のメモ(例:「画像修正」など)を入力し、「コミット」ボタンを押します。
4. プッシュ(同期)
「変更の同期(プッシュ)」という青いボタンが出てくるので、これをクリックします。
完了!
これでサーバーに送信されました。数分待つとサイトが自動更新されます。