04 — Methods / Blog

研究者のためのポートフォリオサイト
構築・公開ガイド

Claude Code（ノーコード）+ GitHub + Cloudflare Pages で無料で始める

2026.04 Tomoaki Yamaguchi Read in English

このサイト（yamarice.pages.dev）は、HTMLを一行も自分で書かずに作られています。AIコーディングアシスタント「Claude Code」（Claude Desktopから使用）に日本語で指示するだけで、サイトの作成・編集・更新がすべてノーコードで完結します。ファイルの管理にはGitHub、公開にはCloudflare Pagesを使い、フレームワークや月額費用は一切不要です。このページでは、同じ構成のサイトを一から作って公開するまでの手順と、その後の更新方法を解説します。

必要なもの（すべて無料）

01 ローカルフォルダを作り、Claude Code に接続する

まず、PC上にサイト用のフォルダを作成します（例：デスクトップに website フォルダ）。次に Claude Desktop を起動し、上部の「Code」タブを選択すると Claude Code が使えるようになります。

  1. PC上の任意の場所にフォルダを作成する（例：デスクトップ/website）
  2. Claude Desktop を起動し、上部の「Code」タブをクリック
  3. 「Add folder」またはフォルダのアイコンから、作成したフォルダを選択して接続

接続が完了したら、あとは日本語で指示するだけです。HTMLやCSSを書く必要はありません。

指示の例（そのままコピーして使えます）

「研究者のポートフォリオサイトをHTML・CSS・JavaScriptで作ってください。名前は山田太郎、〇〇大学△△学部の助教です。About・Publications・Linksのセクションを作り、モバイル対応のシンプルなデザインにしてください。ファイルは index.html・style.css・script.js の3つに分けてこのフォルダに保存してください。」

Claude Code が接続したフォルダ内に index.html・style.css・script.js を自動生成します。デザインや内容を変えたいときも「ヘッダーの色を濃い緑にしてください」「論文を追加してください」と日本語で伝えるだけで修正してくれます。

Claude Code はファイルを直接読み書きするため、テキストエディタを開いてコードを確認する必要もありません。「現在のサイトを確認して」と言えばどんな状態かも把握してくれます。

02 GitHubのアカウントを作り、リポジトリを用意する

GitHubとは？
GitHubは、ファイルをクラウド上で管理できるサービスです。「コード専用のGoogleドライブ」のようなもので、ファイルの変更履歴をすべて記録できます。Cloudflare Pagesと連携して、プッシュ（送信）するだけでサイトを自動で公開・更新できます。

アカウントの作成（初回のみ）

  1. github.com にアクセスし、「Sign up」からアカウントを作成
  2. メールアドレス・パスワード・ユーザー名を設定してメール認証を完了

リポジトリの作成

リポジトリとは、GitHub上のプロジェクト用フォルダのことです。Step 1で作ったローカルフォルダと1対1で対応します。

  1. github.com にログインし、右上の「＋」→「New repository」をクリック
  2. 「Repository name」に任意の名前を入力（例：my-website。英数字とハイフンのみ）
  3. 「Public」を選択（後でCloudflare Pagesと連携するために必要）
  4. 「Create repository」をクリック

リポジトリ名はサイトのURLには影響しません。Cloudflare Pages側でURLが別途発行されます。

03 GitHub Desktopでフォルダを連携し、GitHubに送信する

GitHub Desktopとは？
GitHub Desktop は、GitHub への送信操作をボタン操作だけで行えるアプリです。コマンドラインの知識は不要です。desktop.github.com からインストールしてください。

用語の説明

コミット：「この変更を記録する」操作。ゲームのセーブポイントをつくるイメージ。
プッシュ：記録した変更をGitHub（クラウド）に送信する操作。「同期」に相当。

初回セットアップ

  1. GitHub Desktop を起動し、「Sign in to GitHub.com」から Step 2 で作ったアカウントでサインイン
  2. 「File」→「Add Local Repository」→ Step 1 で作ったフォルダを選択
  3. 「This folder does not appear to be a Git repository. Create a repository here instead?」と表示されたら「Create Repository」をクリック
  4. 左下の「Summary」欄に変更の説明を入力（例：最初のコミット）
  5. 「Commit to main」をクリック（これがコミット＝記録）
  6. 上部の「Publish repository」をクリック（これがプッシュ＝GitHubへ送信）
  7. 「Keep this code private」のチェックを外して「Publish Repository」をクリック

GitHub を開くと、Step 1 で作ったフォルダの中身がそのままアップロードされているのが確認できます。これでローカルとGitHubが連携された状態になりました。

04 Cloudflare Pagesでデプロイ＆URLを取得

GitHubと連携してサイトを自動公開します。

  1. dash.cloudflare.com にログイン（アカウントがない場合は cloudflare.com で登録）
  2. 左メニュー「Workers & Pages」→「Create」→「Pages」タブ
  3. 「Connect to Git」→ GitHubアカウントを連携
  4. Step 2で作ったリポジトリを選択して「Begin setup」
  5. 「Framework preset」は「None」のまま、「Build command」と「Build output directory」は空欄のまま「Save and Deploy」

数十秒でデプロイが完了し、your-project.pages.dev というURLが発行されます。これがサイトのURLです。

以降、GitHubにプッシュするたびにCloudflare Pagesが自動でデプロイします。手動での操作は不要です。

↻ サイトの更新方法

公開後の更新も、Claude Code への日本語指示だけで完結します。慣れれば数分で反映できます。

Claude Code に
日本語で変更を依頼
→
GitHub Desktop で
コミット＆プッシュ
→
1〜2分で
サイトに自動反映
更新指示の例

「Publications に新しい論文を追加してください。タイトルは〇〇、雑誌名は△△、DOIは××です。」
「Aboutのテキストを〇〇という内容に変更してください。」
「英語版のページも同じ内容で更新してください。」

Claude Code がファイルを修正したら、GitHub Desktop で変更をコミット＆プッシュします。

  1. 変更したファイルが GitHub Desktop の左側に表示されていることを確認
  2. 左下のSummary欄に変更内容を一言入力（例：論文を追加）
  3. 「Commit to main」→「Push origin」をクリック

プッシュした直後にCloudflare Pagesのダッシュボード（dash.cloudflare.com）でデプロイのログを確認できます。「Success」と表示されればサイトに反映完了です。

+ Google検索に表示させるには

公開直後はGoogleに認識されていないため、検索結果に表示されません。以下の設定をしておくと早期にインデックスされます。

インデックス登録後、「自分の名前」で検索するとサイトが上位に表示されるようになります。

← Methods 一覧に戻る Read in English →