04 — Methods / Blog

Building a Research Portfolio
Website with No Coding

Claude Code + GitHub + Cloudflare Pages — free and fully no-code

2026.04 Tomoaki Yamaguchi 日本語で読む

This website (yamarice.pages.dev) was built without writing a single line of HTML by hand. Using Claude Code — an AI coding assistant available through Claude Desktop — everything from initial creation to ongoing updates is handled by simply describing what you want in plain language. Files are managed on GitHub and hosted automatically via Cloudflare Pages, with no frameworks or monthly fees required. This guide walks you through the entire process from scratch.

What you need (all free)

01 Create a local folder and connect Claude Code

First, create a folder on your computer for the website (e.g., a folder called website on your Desktop). Then open Claude Desktop and click the "Code" tab at the top — this activates Claude Code.

  1. Create a new folder anywhere on your computer (e.g., Desktop/website)
  2. Open Claude Desktop and click the "Code" tab at the top
  3. Click "Add folder" or the folder icon, then select the folder you just created

Once connected, just describe what you want in plain English — no HTML or coding knowledge needed.

Example prompt (copy and adapt as needed)

"Please build a researcher portfolio website using HTML, CSS, and JavaScript. My name is Jane Smith, and I am an Assistant Professor at Example University. Include sections for About, Publications, and Links, with a clean, mobile-friendly design. Save the files as index.html, style.css, and script.js in this folder."

Claude Code will generate all the files directly inside the connected folder. To make changes, just describe what you want: "Change the header color to dark green" or "Add a new publication" — Claude Code handles the rest.

Claude Code reads and writes files directly, so you never need to open a text editor. You can also ask it to "review the current site" at any time and it will read all the files and give you a full overview.

02 Create a GitHub account and repository

What is GitHub?
GitHub is a cloud service for storing and managing files — think of it as "Google Drive for code." It keeps a full history of every change you make, and when connected to Cloudflare Pages, it automatically publishes your site whenever you send new files.

Creating an account (first time only)

  1. Go to github.com and click "Sign up"
  2. Enter your email address, set a password and username, then complete email verification

Creating a repository

A repository is your project folder on GitHub — it corresponds one-to-one with the local folder you created in Step 1.

  1. Log in to github.com and click the "+" icon in the top right → "New repository"
  2. Enter a repository name (e.g., my-website — letters, numbers, and hyphens only)
  3. Select Public (required for Cloudflare Pages to access it)
  4. Click "Create repository"

The repository name does not affect your site's URL. Cloudflare Pages will generate a separate URL for you.

03 Connect your folder with GitHub Desktop and push

What is GitHub Desktop?
GitHub Desktop is an app that lets you send files to GitHub using buttons — no command-line knowledge needed. Download and install it from desktop.github.com.

Key terms explained

Commit: Recording your changes as a snapshot — like creating a save point in a game.
Push: Sending those recorded changes up to GitHub (the cloud) — like syncing to the cloud.

First-time setup

  1. Open GitHub Desktop and click "Sign in to GitHub.com" — use the account you created in Step 2
  2. Go to "File" → "Add Local Repository" and select the folder from Step 1
  3. If prompted with "This folder does not appear to be a Git repository," click "Create Repository"
  4. Type a short description in the "Summary" field at the bottom left (e.g., Initial commit)
  5. Click "Commit to main" — this records your changes locally
  6. Click "Publish repository" in the top bar — this sends your files to GitHub
  7. Uncheck "Keep this code private" and click "Publish Repository"

Open github.com in your browser and you should see your files uploaded to your repository. Your local folder and GitHub are now in sync.

04 Deploy with Cloudflare Pages and get your URL

Connect your GitHub repository to Cloudflare Pages to publish the site automatically.

  1. Log in to dash.cloudflare.com (create a free account at cloudflare.com if needed)
  2. In the left menu, go to "Workers & Pages" → "Create" → "Pages" tab
  3. Click "Connect to Git" and authorize your GitHub account
  4. Select the repository from Step 2 and click "Begin setup"
  5. Leave "Framework preset" as "None", leave Build command and Build output directory blank, then click "Save and Deploy"

Deployment completes in about 30 seconds. You will receive a URL like your-project.pages.dev — that is your live website.

From this point on, every push to GitHub automatically triggers a new deployment. No manual action needed.

↻ How to update your site

Once your site is live, all future updates follow the same no-code workflow — just describe the change to Claude Code, then push.

Ask Claude Code
to make the change
→
Commit & push
in GitHub Desktop
→
Site updates
automatically in 1–2 min
Example update prompts

"Add a new publication to the Publications section. Title: ○○, Journal: △△, DOI: ××."
"Update the About section to say the following: …"
"Apply the same changes to the English version of the page."

After Claude Code edits the files, commit and push with GitHub Desktop:

  1. Confirm your changed files appear in the left panel of GitHub Desktop
  2. Type a short commit message in the Summary field (e.g., Add new publication)
  3. Click "Commit to main" → then "Push origin"

You can monitor deployment progress in the Cloudflare Pages dashboard (dash.cloudflare.com). A "Success" status means your changes are live.

+ Getting your site to appear on Google

A newly published site is not immediately visible on Google. The following steps help Google discover and index your pages sooner.

Once indexed, searching your name on Google should bring your site to the top of the results.

← Back to Methods 日本語で読む →