A real personal site — custom-designed, live, hosted free — in one afternoon. Three tools in sequence: Claude to pull a sharp positioning thesis out of stuff you already have, Claude Design to turn it into a site, and Claude Code + GitHub Pages to ship it. No HTML, no designer. Just an afternoon and a willingness to make decisions. ## Who this is for Run this if a real personal site would actually move something for you — a fellowship, a profile bump, a role pivot, a side venture — and you want something that doesn't look like a template, without paying for Squarespace forever or learning web design. - You've got at least one substantive thing to work from — a resume, a long bio, an essay, a fellowship submission. - You're fine copy-pasting code and following clear steps, even if you've never built a site. **Skip it** if you need ecommerce, complex forms, comments, or a real backend. This is for _credibility surfaces_ — static sites that say who you are and what you've done. ## What you'll need - A **Claude account** (Pro helps — you'll be in long conversations). - A **GitHub account**, plus **GitHub Desktop** or comfort with `git`. - One substantive piece of **source material** about yourself. - _Optional:_ a custom domain (~$9–12/yr) — or launch free on `yourname.github.io` and add one later. Total cost: **$0–$12**. Takes about an afternoon — saves you a few hundred dollars and a designer. The workflow Pull together everything you've ever written about yourself — resume, application essays from the last two years, your LinkedIn About, any thread where you've described what makes your work distinctive, notes on awards and press, and a few sentences someone _else_ wrote about you. Don't curate. Just collect. Drop it all into one document. The next step does the editing. The most important step, and the one everyone skips. Before you design anything, you need one sentence that distinguishes you. Paste your raw material into Claude with this: ```text thesis-extraction prompt I'm building a personal brand site. I've pasted all my raw material below — resume, recent essays, bio, notes about my work. Your job is to help me extract a sharp positioning thesis. Three things I need from you: 1. A one-sentence thesis statement that captures what makes me distinctive. Not what I do for a living — what I uniquely understand or argue. It should feel a little contrarian or pointed, not generic. 2. A three-pillar framework that shows the layers of credibility behind that thesis. For each pillar, name it in one word and explain why my background uniquely qualifies me to make claims at that layer. 3. A "rare operator" line — a single descriptive phrase that names me as a category before anyone else does. Something I could put under my name on the site. Ask me clarifying questions before producing the draft. After the draft, I want to iterate — push back on things that feel generic, suggest tighter wording, and help me reach something I'd actually be proud to put on the internet. Here's my raw material: [paste everything from Step 1 here] ``` Then _iterate_. The first thesis will be too safe — push back, tell it what you actually want to argue, ask for three more. You'll know you're done when reading it out loud makes you feel slightly exposed. That feeling is the signal. Brief Claude Design with everything you just produced, plus your resume content — specific enough that you don't get a generic personal site. ```text claude design brief Design a personal brand site for me. The site has one job: convince a fellowship reviewer, a hiring manager, or a potential collaborator that I'm a serious, distinctive operator — in under 30 seconds of scanning. Aesthetic direction: - Editorial, restrained, considered. Closer to a New Yorker profile page than a SaaS landing page. - Generous whitespace. Serif headings. Sans body. Numbered section labels (01 / About). - Avoid: AI-gradient purple/teal, hero illustrations, stock photography, anything that signals "template." Pages: one — a single long-scroll homepage with numbered sections. Sections, in order: 1. Hero — my name, role line, and the thesis statement 2. About — short bio + a portrait + 3 quick facts 3. Thesis — the three-pillar framework, as a numbered three-up 4. Work & Experience — roles with org, title, one-line summary, dates 5. Recognition — awards, fellowships, degrees, stacked 6. Field Notes — placeholder for future essays, labeled "coming soon" 7. Connect — LinkedIn, email, newsletter signup 8. Footer — minimal My positioning thesis: [paste from Step 2] My three pillars: [paste from Step 2] My "rare operator" line: [paste from Step 2] My bio and roles: [paste relevant resume content] Produce a complete design with real copy in every section. Don't use Lorem Ipsum. Where you don't have a fact, ask me for it rather than inventing one. ``` Then iterate — "make the hero more restrained," "try a heading font with more weight," "the work section reads like a resume, make it a story." Stop when it feels like _you_, not a template. Usually 4–8 rounds. Once the design's locked, paste the files into Claude Code and ask it to package them for static hosting: ```text claude code · export prompt I'm hosting this static site on GitHub Pages. Take the design files I just pasted and: 1. Combine everything into a single index.html with inline Tailwind via the CDN script (no build step) 2. Reference all images relatively from an /images folder 3. Add proper meta tags: title, description, OG image/title/description, Twitter card 4. Add a viewport meta tag and make it responsive at 375px width 5. Include a /404.html that matches the site's style 6. Output the final file structure I need to push to GitHub Metadata: - Site URL: https://[yourname].github.io (or your custom domain) - OG image: I'll provide /images/og.png - Title and description: [paste your thesis line] ``` You'll get a structure like this: ```text file structure my-site/ ├── index.html ├── 404.html ├── CNAME (only with a custom domain) └── images/ ├── hero.jpg ├── about.jpg └── og.png ``` Drop in your portraits and a 1200×630 OG image (Canva has a template). No headshots? A clean phone photo against a plain wall is a perfectly good v1. Create a repo named exactly `yourusername.github.io` — that exact name is what makes Pages serve it from the root domain. Drop your files in, commit "Initial site," push. On github.com → **Settings → Pages**, set Source to "Deploy from a branch" and Branch to `main / (root)`. Save, wait 2–3 minutes, visit your URL. It's live. Worth $10/year for anything you'll actually share. In your DNS panel, add four `A` records on the apex to GitHub's IPs (185.199.108–111.153) and a `CNAME` on `www`. Keep them **DNS-only** (gray cloud in Cloudflare) or SSL won't provision. In your repo → Settings → Pages → Custom domain, enter it and Save. Wait 5–15 minutes, then tick "Enforce HTTPS." If you added a custom domain after deploying, point every OG meta tag at the new domain — mismatches give you blank LinkedIn previews. Push the fix, then test at LinkedIn's Post Inspector or opengraph.xyz. A sharp thesis with so-so design beats gorgeous design with a generic message. Every time. If the first draft looks like everyone else's, push back: ask for restraint, ask for less. AI over-decorates by default. No image, blank previews. A 5-minute Canva template fixes it and gets you way more clicks. Only yourusername.github.io serves from the root. Anything else lands on a subpath and looks amateur. ## Do this next 1. **Share the link somewhere that matters** — LinkedIn About, email signature, a live application. Sites no one visits don't compound. 2. **Publish one real Field Notes post within 30 days.** "Coming soon" ages into "never." One short essay turns the placeholder into proof. 3. **Set a 90-day reminder** to revisit the copy. Your thesis sharpens with use.

Everything I've tried so far.Saved for whenever you need it.

Everything I've tried so far.
Saved for whenever you need it.