メインコンテンツへスキップ
Web制作

ホームページを自分で更新する方法｜GitHubとCloudflare Pagesの使い方をわかりやすく解説

#ホームページ #Cloudflare Pages #GitHub #HP管理 #自分で更新
ホームページを自分で更新する方法｜GitHubとCloudflare Pagesの使い方をわかりやすく解説

「ホームページを直したいけど、業者に頼むと時間もお金もかかる……」

そんな悩みを持つ中小事業者の方は多いと思います。tappuri.aiで制作したサイトは、GitHubというサービスを使ってテキストや画像を自分で更新できるように設計されています。この記事では、ITが得意でない方でも理解できるように、仕組みと操作手順をわかりやすく説明します。

ホームページの「仕組み」をざっくり理解しよう

更新作業をスムーズに行うために、まずサイトがどのような仕組みで動いているかを知っておきましょう。

GitHub → Cloudflare Pages → ブラウザの3ステップ

あなたのパソコン（またはスマホ）
    │
    │  ① テキスト・画像を編集する
    ▼
GitHub（ファイルの保管庫）
    │
    │  ② 保存すると自動的に転送される
    ▼
Cloudflare Pages（サイトを世界中に配信する仕組み）
    │
    │  ③ お客様がURLを開くと表示される
    ▼
訪問者のブラウザ

GitHubは「ファイルを保管しておく棚」のようなものです。ホームページのテキストや画像はすべてここに保存されています。

Cloudflare Pagesは「その棚の内容をインターネット上に公開する仕組み」です。GitHubの棚に変更を保存すると、数十秒〜数分でCloudflare Pagesが変化を検知し、自動でサイトに反映してくれます。

つまり、あなたがやることはGitHubのファイルを編集して保存するだけ。あとは自動でホームページが更新されます。難しいFTP操作や管理画面へのログインは不要です。

テキストを変更する手順

会社名・営業時間・料金・キャッチコピーなど、テキストの変更はブラウザだけで完結します。

準備するもの

  • GitHubのアカウント（制作時にご案内しています）
  • パソコンまたはスマートフォン

STEP 1: GitHubにログインして、リポジトリを開く

ブラウザで github.com を開き、ログインします。ログイン後、画面左側か上部に「リポジトリ（Repository）」の一覧が表示されます。ご自身のサイト名と同じ名前のリポジトリをクリックしてください。

STEP 2: 編集したいファイルを選んで、鉛筆アイコンをクリックする

リポジトリ内のファイル一覧から、変更したい箇所が含まれるファイルを開きます。

  • トップページのテキストを変えたい → src/pages/index.astro を探す
  • サービス説明を変えたい → src/content/ フォルダ内のファイルを探す

ファイルを開いたら、右上に**鉛筆のようなアイコン（Edit this file）**が表示されています。クリックすると、ブラウザ上で直接テキストを書き換えられる編集画面に切り替わります。

STEP 3: 変更内容を入力して「Commit changes」で保存する

テキストを書き換えたら、画面を下にスクロールします。「Commit changes」という緑色のボタンが表示されています。

  • 変更内容のメモ欄には「営業時間を変更」「料金を更新」など一言書いておくと後で見返しやすくなります（空欄でも保存できます）。
  • 「Commit changes」ボタンを押すと保存完了です。

保存後、数十秒〜2分程度でホームページに変更が反映されます。ブラウザの更新ボタンを押して確認してみてください。

画像を差し替える手順

店舗の写真や商品画像を新しくしたいときの手順です。

STEP 1: 新しい画像を用意する

画像ファイルの名前は半角英数字とハイフンのみで付けてください（例: shop-front-2026.jpg）。日本語のファイル名はトラブルの原因になることがあります。ファイルサイズは1枚500KB以内を目安にすると、サイトの表示速度が保たれます。

STEP 2: GitHubの画像フォルダに新しい画像をアップロードする

画像フォルダ（多くの場合 src/assets/ または public/images/）を開き、右上の「Add file」→「Upload files」をクリックします。パソコンから画像ファイルをドラッグ＆ドロップするか、「choose your files」から選択し、「Commit changes」で保存します。

STEP 3: 古いファイルと同じ名前にすれば自動で差し替わる

ポイント: 新しい画像のファイル名を古い画像と全く同じにすると、コードを変更せずに画像が差し替わります。例えば staff-yamada.jpg という画像を更新したい場合、新しいファイルも staff-yamada.jpg という名前にしてアップロードしてください。

よくある質問

Q. ファイル名がわかりません。どこを見ればいいですか？

A. 納品時にお渡しする「更新ガイド」に「〇〇を変えたいときはこのファイル」という対応表が記載されています。まずそちらをご確認ください。

Q. 変更を保存したのにサイトに反映されません。

A. 変更が反映されるまで最大2〜3分かかることがあります。ブラウザの強制更新（WindowsはCtrl+Shift+R、MacはCmd+Shift+R）を試してください。それでも反映されない場合は、GitHubで「Commit changes」が正しく完了しているかを確認してください。

Q. 間違えて変更してしまいました。元に戻せますか？

A. GitHubはすべての変更履歴が自動で残ります。「History」ボタンから過去の状態を確認できますので、元に戻したいバージョンを参照してください。

Q. スマートフォンからでも更新できますか？

A. できます。スマートフォンのブラウザからGitHubにログインし、同じ手順で操作できます。ただし画面が小さく誤操作しやすいため、重要な変更はパソコンからの操作をおすすめします。

自分での更新が不安な方へ

「記事の手順を読んでもよくわからない」「自分で更新する自信がない」という方には、**月額保守プラン（¥1,980／月・税別）**がおすすめです。

含まれるもの内容
ホスティング維持管理サイトの安定稼働を維持します
SSL証明書（常時HTTPS）セキュリティを自動で管理します
独自ドメイン管理取得・更新・解約時の移管に対応します
軽微修正 月1回テキスト5箇所以内または画像差し替え3枚以内

自分で更新できる体制を整えつつ、「ここだけは頼みたい」という場面はプロに任せる——そのバランスで、ホームページを長く活用し続けることができます。

ご相談・お見積りは tappuri.aiのお問い合わせページ からお気軽にどうぞ。

ブログ一覧に戻る