04 — 解析手法 / ブログ

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

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

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」と表示されればサイトに反映完了です。

+ ファイル管理と公開範囲の補足

サイトのファイルは GitHub に保存されるため、意図しない情報が外に出ないよう、最初から仕組みを整えておくと安心です。ここでは「アップロードしないファイルを指定する」と「リポジトリを Private に切り替える」の二つを紹介します。

.gitignore でアップロードしないファイルを指定する

.gitignore はリポジトリのフォルダに置くテキストファイルで、ここに書いたファイルやフォルダは GitHub に送信されません。OS が作る隠しファイルやエディタの設定など、共有する必要がないものを除外しておくのが定番です。

機密情報は絶対にコミットしない。 APIキー、パスワード、未公開の研究データ、被験者情報などは、リポジトリが Public でも Private でも、最初からコミットしないことが鉄則です。一度コミットすると履歴に残り続け、後から Private に切り替えても流出のリスクは消えません。

フォルダ直下に .gitignore という名前のファイルを作り、以下のような内容にしておくと安心です（Claude Code に「.gitignore を作って」と頼めば一発で生成できます）。

.gitignore の例

# OS のファイル .DS_Store Thumbs.db # IDE / エディタ .vscode/ .idea/ # ログ・キャッシュ *.log .cache/ node_modules/ # 機密情報（必要に応じて） .env secrets.txt

リポジトリを Private に切り替える

コードを公開する必要がない場合は、リポジトリを Private にすれば、自分と招待した人以外には中身が見えなくなります。公開サイト（pages.dev の URL）は誰でも閲覧可能なままで、ホスティング側の挙動には影響しません。

Cloudflare Pages との連携は OAuth ベースの GitHub App で行われているため、Public のまま連携を済ませたあとに Private へ切り替えても、自動デプロイはそのまま動き続けます。安全のため、Cloudflare で初回デプロイが正常に走ったことを確認してから Private に切り替えるのがおすすめです。

  1. GitHub のリポジトリページを開く（例：github.com/ユーザー名/リポジトリ名）
  2. 上部の「Settings」タブをクリック
  3. ページ最下部の「Danger Zone」にある「Change repository visibility」→「Change visibility」
  4. 「Make private」を選び、リポジトリ名を入力して確定

切り替え直後に Cloudflare Pages のダッシュボードでビルドが正常に走るかを確認してください。万一「リポジトリにアクセスできない」というエラーが出る場合は、GitHub の Settings → Applications → Cloudflare Workers and Pages のリポジトリアクセス設定で、対象リポジトリを許可リストに含め直すと解決します。

※ 最初から Private で運用したい場合は Step 02 の「Public」を「Private」に読み替えてください。その際、Cloudflare 連携時に GitHub App から対象リポジトリへのアクセスを明示的に許可する必要があります。

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

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

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

← 解析手法一覧に戻る Read in English →