How to Build Your Homepage Using AI

🌐 Overview

The idea is simple: give Claude Code your CV and a reference theme, and it builds, tests, and publishes a working Jekyll homepage for you.

📄 Your CV
a .pdf in an empty folder

→

💻 VS Code + Claude Code
builds the Jekyll site

→

🌐 Live Homepage
published on GitHub Pages

🛠 Step-by-Step Workflow

Follow these steps to build and publish your homepage.

Create a project folder and add your CV

Create an empty folder on your computer and place your CV inside it as a .pdf file. This is the only material Claude needs to get started — it will read your education, publications, teaching, and research interests directly from it.

Example folder structure:

my-homepage/
└── cv.pdf — your CV

Create an empty GitHub repository

On github.com/new, create a new public repository named exactly <your-username>.github.io (e.g., jsmith.github.io). GitHub Pages only serves a repository at your root domain when it has this exact name.

⚠ If you already created the repository under a different name, that’s fine — just tell Claude the repository’s URL, and ask it to rename the repo for you using the GitHub CLI (gh repo rename).

Open the folder in VS Code and log in to the GitHub CLI

File → Open Folder... → select your my-homepage folder. Then open a terminal in VS Code and make sure you’re authenticated:

terminal

gh auth status

Then open the Claude Code extension panel in the sidebar.

Pick a Jekyll theme you like

Browse jekyllthemes.org (or any Jekyll theme gallery) and copy the URL of a theme you like. You’ll paste this into your prompt to Claude in the next step.

Give Claude the context, role, command, and output

In the Claude Code panel, describe what you want built. Structuring your prompt into four parts — Context, Role, Command, and Output — helps Claude understand exactly what to build and how.

📝 Example Prompt Template

Context

I need to develop a homepage for my repository based on my CV.
My homepage URL is https://github.com/<username>/<username>.github.io
Currently the homepage is empty (with a dummy README.md).
This folder includes my CV.
The homepage needs to be developed using Jekyll.
Please use the following template: <theme URL>

Role

You are a web developer who builds websites from a CV.

Command

Install all the requirements (e.g., Jekyll and Git) if not already installed.
Develop the homepage using the CV and the specified template, on the provided GitHub repository.

Output

A homepage with the following navigation bar:

About
Members
Research
Publications
Courses

💡 Adjust the navigation bar to whatever sections make sense for you — e.g., a personal site might only need About, Publications, and Contact.

Let Claude build and test the site

Claude will typically: read your CV, fetch and adapt the reference theme, write the Jekyll pages and layouts, run bundle install and jekyll build, and serve the site locally so it can check the result in a browser before you see it.

ℹ If Claude reports a rendering issue (e.g., broken navigation, unstyled pages), just ask it to fix that specific issue — it can rebuild and re-check the page itself.

Review the site yourself

Ask Claude to start a local preview server:

terminal

bundle exec jekyll serve

Open http://localhost:4000 in your browser and click through every page. If something looks off or you want text changed, describe it to Claude in plain language.

Push to GitHub and publish

Once you’re happy with the result, ask Claude to commit and push the changes:

prompt

Commit these changes and push them to the repository.

GitHub Pages builds automatically after the push. Your homepage will be live at https://<username>.github.io/ within a minute or two.

💡 Ask Claude to check the build status with gh api repos/<username>/<username>.github.io/pages/builds/latest so you know the moment it’s live.

💬 Example Follow-up Requests

Once the first version is live, keep iterating with simple, direct requests.

Add a Page

Add a New Section

Ask Claude to add a page and wire it into the navigation.

Add a Talks page listing my invited talks from the CV, and add it to the navigation bar.

Restyle

Change the Look

Ask Claude to adjust colors, fonts, or layout.

I like the theme, but can you make the accent color dark green instead of blue, and widen the content area a bit?

Update Content

Sync With a New CV

Ask Claude to refresh the site after your CV changes.

I updated cv.pdf with a new publication and a new talk. Please update the Publications and Talks pages to match.

Fix a Bug

Report a Visual Issue

Describe what’s wrong and where — Claude can check it in a browser itself.

On the Publications page, the paper titles are not bold and the venue text overlaps the date. Please fix the styling.

🌟 Tips for a Smooth Build

A few things that make this workflow much more reliable.

Use a repo named <username>.github.io

GitHub Pages only serves at your clean root URL (https://<username>.github.io/) when the repository has exactly this name. Any other name publishes under a sub-path instead.

Give Claude a real theme reference

Pointing to an actual theme (its homepage or source repository) gives Claude a concrete look-and-feel and layout to adapt, rather than inventing one from scratch.

Always review before publishing

Ask Claude to build and serve the site locally first (jekyll serve) and check every page yourself before it pushes anything public.

Iterate in small, specific requests

Instead of "make it better," describe exactly what’s wrong and where (page, section, color). Specific requests get fixed faster and more accurately.

Keep your CV as the single source of truth

When your CV changes, ask Claude to re-sync the site from it instead of hand-editing pages — this keeps everything consistent.