作ったWebページ、公開できずに眠ってない？｜おはようカノジョ ＃62

おはヨミを公開した記事に、こんなコメントをもらった。

KITAcoreさん、ありがとうございます。

でもこれ、「本職だからできた」わけじゃない。 GitHub Pagesを使えば、誰でも無料でWebページを公開できる。

Gitも、コマンドも、いらない。

GitHub Pagesって何？

GitHubが提供している、静的Webページの無料ホスティングサービス。

HTMLファイルをGitHubのリポジトリに置くだけで、 https://ユーザー名.github.io/リポジトリ名/ というURLで誰でもアクセスできるようになる。

必要なのはGitHubのアカウントだけ。

公開手順（Gitなし・ブラウザだけ）

① GitHubアカウントを作る

持っていなければ https://github.com で作成。無料でOK。

② リポジトリを作る

右上の「+」→「New repository」。

設定のポイント：

• Repository name：好きな名前（これがURLの一部になる）

• Public を選ぶ（⚠️ Privateだと無料プランではPages使えない）

• 「Add a README file」にチェックを入れる（これを入れないとブランチが作られず、ブラウザからファイルをアップロードできない）

③ ファイルをアップロードする

リポジトリのページで「Add file」→「Upload files」。

自分のPCにあるHTML、CSS、JSなどのファイルをドラッグ＆ドロップするだけ。

一番大事なのは index.html。これがトップページになる。

アップロードしたら、コミットメッセージ（変更の説明）を書いて「Commit changes」。

④ GitHub Pagesを有効にする

リポジトリの「Settings」タブ → 左メニュー「Pages」。

「Source」を「Deploy from a branch」にして、 Branchを「main」、フォルダを「/ (root)」に設定して「Save」。

⑤ 公開完了！

数分待つと、ページの上部にURLが表示される。

https://ユーザー名.github.io/リポジトリ名/

これで全世界に公開されている。

ファイルの修正もブラウザだけでできる

「公開したけど、ちょっと直したい」

Gitコマンドは不要。GitHubのWeb上で全部できる。

試しに、さっき公開したページの文言を変えてみよう。

リポジトリの index.html をクリック → 右上の鉛筆アイコン（✏️）をクリック。

ブラウザ上でそのままコードを編集できる。

    <h1>こんにちは！</h1>
    <p>GitHub Pagesで公開したページです。</p>

これを、こう変える。

    <h1>ようこそ！</h1>
    <p>GitHub Pagesで公開したページです。</p>
    <p>ブラウザだけで更新できました！</p>

右上の「Commit changes...」を押して、コミットメッセージを書いて保存。

数分待ってページをリロードすると、変更が反映されている。
https://ユーザー名.github.io/リポジトリ名/

他にも：

• 追加：「Add file」→「Upload files」で新しいファイルを追加

• 削除：ファイルを開いて「…」→「Delete file」

• 差し替え：同じファイル名でアップロードすれば上書き

ファイルが増えてきたり、頻繁に更新するようになったら、Git（コマンドラインツール）を導入すると効率がグッと上がる。でもまずはブラウザだけで十分。

PWAにすれば、スマホのホーム画面に置ける

ここまではWebページの公開の話。

もう一歩進んで、PWA（Progressive Web App） にすると、スマホのホーム画面にアプリとして追加できるようになる。

追加で必要なのは2つ。

manifest.json

アプリの名前やアイコンを定義するファイル。

{
  "name": "My First Page",
  "short_name": "MyPage",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#667eea",
  "theme_color": "#667eea",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

sw.js（Service Worker）

オフライン動作やキャッシュを制御するファイル。最小構成ならこれだけ。

const CACHE_NAME = 'my-app-v1';
const urlsToCache = ['./index.html'];
​
self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE_NAME).then(c => c.addAll(urlsToCache)));
});
​
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});

index.htmlの<head>内でmanifestを読み込み、<script>でService Workerを登録すれば完了。

<link rel="manifest" href="manifest.json">
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
  }
</script>

スマホのホーム画面に追加する方法

公開したURLをスマホで開いて、以下の操作をするだけ。

iPhoneの場合： Safariで開いて、共有ボタン（□に↑のアイコン）→「ホーム画面に追加」

Androidの場合： Chromeで開いて、右上のメニュー（︙）→「ホーム画面に追加」または「アプリをインストール」

これで、ブラウザを開かなくてもアプリのようにワンタップで起動できるようになる。

落とし穴

Service Workerのキャッシュ

一度公開した後にファイルを更新しても、ユーザーのブラウザに古いキャッシュが残って反映されないことがある。

対策は、sw.jsの CACHE_NAME のバージョンを上げること。

const CACHE_NAME = 'my-app-v1';  // ← これを v2 にする

更新後、ブラウザ側でService Workerが更新されるまでラグがあるのは仕様。

CORS問題：APIを呼びたいなら

GitHub Pagesで公開したページから、noteのAPIなど外部のAPIを呼び出したい場合、CORS（Cross-Origin Resource Sharing）という壁にぶつかる。

ブラウザのセキュリティ上、異なるドメインのAPIを直接呼ぶことがブロックされる仕組み。

解決するには、APIプロキシを間に挟む必要がある。Cloudflare Workersを使えば無料で構築できるが、これは別の話になるので今回は仕組みだけ紹介。

ブラウザ（GitHub Pages）
  ↓ リクエスト
Cloudflare Workers（プロキシ）
  ↓ 中継
note API

ブラウザから直接noteのAPIを叩くと🚫。
間にプロキシを挟めば✅。

これが必要になるのは「noteのデータを自動取得したい」ような場合で、静的なWebページやPWAを公開するだけなら関係ない。

まとめ

作ったWebページを公開するのに、専門知識はいらない。

1. GitHubアカウントを作る

2. リポジトリを作る（Publicで）

3. ファイルをアップロードする

4. Pagesを有効にする

これだけ。5分でできる。

眠らせてるページがあるなら、今日公開してみよう。 公開すると、フィードバックがもらえて、次に繋がる。

この記事は以下の共同マガジンに参加しています。

【むぎ屋】note×AI活用推進マガジン

AIを活用した記事作成やリサーチなど、AI×noteの実践を共有するマガジン。

👉「おはようカノジョ」は @ohayo_kanojo で毎朝7:30に投稿しています

#生成AI #AIイラスト #プログラミング
#個人開発 #開発日記
#記録 #実体験 #朝活