Deploy Your Personal Website
Learning Objectives
By the end of this session, students should be able to:
- Fork a production-ready Vercel template through natural-language requests, without ever cloning a repo with their own hands or running
git clone. - Describe website content in plain English — bio, projects, links, theme — and watch Cursor translate that description into clean, committed source changes.
- Trigger a Vercel deploy by prompt, read the deployment's build log when something goes wrong, and recover by describing the failure to the AI.
Core Topics
- How a Vercel template becomes your own site in one conversation.
- The "describe content in English, let AI write the MDX/TSX" pattern that powers Weeks 2–6 of this course.
- The deploy-preview loop: every commit triggers a preview URL you can review before promoting to production.
- Why the first site deploy should be boring on purpose — we'll add the exciting AI bits next week.
Tools / Stack
| Tool | Role this week |
|---|---|
| Cursor | The one chat window where everything happens. |
| Vercel MCP | AI creates the project, deploys, reads logs, sets env vars. |
| GitHub | Every commit pushes; Vercel rebuilds automatically. |
| Next.js 14 | The framework the Magic Portfolio template ships on. |
| Tailwind CSS | Styling; AI edits classes when you describe visual changes. |
| Magic Portfolio | Vercel template we fork as the starting point. |
Session Plan
| Time | Activity |
|---|---|
| 0 – 15 min | Recap & Check-in. Who got their first Vercel URL working in Week 1? Show of hands. Anyone still stuck — 2 minutes pairing with a classmate. |
| 15 – 40 min | Concept Teaching. The "template-first" pattern. Why forking a good template beats starting from scratch. How next.js templates are structured (content vs code). What the AI should touch (content files, config) and what it shouldn't (build plumbing). |
| 40 – 75 min | Live Demo. Instructor asks Cursor one prompt: "Fork Magic Portfolio, make it about me, deploy it." Class watches the whole flow — fork, clone, edit, commit, deploy — happen as a single conversation. |
| 75 – 105 min | Hands-On Lab. Each student ships their own personal portfolio URL. Everyone picks a different accent colour so the classroom has variety to critique. |
| 105 – 120 min | Q&A + Wrap. Show-and-tell: three students paste their live URLs and the class reacts. |
Hands-On Lab
Task. By the end of class you should have a yourname-portfolio-*.vercel.app URL that features your photo, short bio, two real projects (or study projects), and your email — all on a responsive, dark-mode-capable site.
Phase 1 — Fork & scaffold
Please fork the Vercel template called Magic Portfolio (the Next.js one) into a new public GitHub repo on my account called
my-portfolio. Clone it into this workspace, install dependencies with pnpm, and start the dev server. When the server is ready, openhttp://localhost:3000in my browser. Do not change any code yet — I just want to see the template running first.
- Browser opens
http://localhost:3000and shows the Magic Portfolio demo site. - A
my-portfoliorepo appears on your GitHub account. - Your file-tree pane now has a
my-portfoliofolder with Next.js structure.
Phase 2 — Content customisation
Now I want to make this site about me. Here's who I am — read this carefully and replace all the demo content (name, bio, "about" page, social links, photo credit) with my real details:
- Name: [your full name]
- One-line bio: [one sentence — e.g., "CS student at [university] learning to ship AI products."]
- Longer bio: [3–4 sentences — who you are, what you're interested in, what you're building this term]
- Email: [your email]
- GitHub: [your GitHub URL]
- LinkedIn (optional): [your LinkedIn URL]
- Accent colour: [pick one — e.g., "deep teal #0e7490" or "soft coral #fb7185"]
Update the theme config to use my accent colour. Use any of the template's existing image placeholders — I'll swap real photos in a later step. Commit the change with a clear message.
- Your name, bio, and email now show up on the homepage and About page.
- The accent colour (buttons, links, hover states) matches what you asked for.
git logshows a commit Cursor wrote with a sensible message.
Phase 3 — Add project cards
The Projects section is still showing demo projects. Replace them with these two real projects of mine:
- [Project 1 name] — [one-sentence description]. Link: [URL or GitHub repo]. If you have a thumbnail image, place one from the existing placeholders.
- [Project 2 name] — [one-sentence description]. Link: [URL or GitHub repo].
If I only have one real project, make the second a study project from this course — for example, "Hello TECHNEST — my first AI-driven deploy" with the live URL from Week 1. Commit and push.
- Projects section on your homepage shows your two projects with links that actually work.
- The commit is pushed to GitHub — check your repo in the browser.
Phase 4 — Production deploy
Now deploy this to Vercel as a production site. Use the Vercel MCP. Link the project to my
my-portfolioGitHub repo so every future push auto-deploys. When the deployment finishes, open the production URL in my browser and give me the URL to copy.
If Vercel asks you to authorise its GitHub App on the repo (only happens the first time for a new repo), approve it in the browser window that pops up.
Why manual: GitHub's App-install consent screen requires a human click — no CLI can accept repo permissions for you.
- A production URL like
my-portfolio-*.vercel.appopens in your browser. - Your name, bio, accent colour, and projects all render correctly on the live site.
- Visit the URL on your phone — it should look fine on mobile too.
The production build failed with an error I don't understand. Can you read the Vercel build log through the MCP, find the root cause, fix whatever needs fixing in the source, commit and push again, and confirm the next deploy succeeds?
Phase 5 — Polish via conversation
The site looks fine but a bit generic. Please do three small polish passes:
- Increase the hero title weight and give it a tiny bit more letter-spacing so my name feels more confident.
- Add a subtle fade-in animation on the project cards when the page loads — nothing fancy, just enough that the site feels alive.
- Add an OG image / favicon using the same accent colour so when I share the URL in a chat, the preview looks intentional.
Commit each pass as a separate commit so I can read what changed.
- Refresh the live site and confirm each of the three polish passes shipped.
- Your repo now has three new commits with descriptive messages.
- Paste the URL into a Slack / WhatsApp / WeChat chat — the preview card should show your name and the accent colour.
If you have a headshot and two project screenshots on your laptop, drag them into Cursor's chat and say: "Use these three images — headshot for the About page, screenshots for the two project cards. Compress them to reasonable web sizes before committing." Cursor will place the files in public/ and wire them into the right components.
Weekly Assignment
Build / Implement.
- Your live portfolio URL, featuring your real name, bio, two projects, and contact info.
- The URL must render correctly on both desktop and mobile.
Requirements.
- The repo must be on your GitHub.
- At least four commits, all authored by AI at your direction.
- The production URL must be served from Vercel (i.e., a
*.vercel.appdomain, or a custom domain pointing at Vercel). - A screenshot of the Cursor conversation where you described your bio (Step 3) — this proves you didn't hand-edit the source.
Submission. Post the URL + screenshot in the course Slack channel before the start of Week 3.
Resources
| Docs | Videos | Repos |
|---|---|---|
| Vercel template: Magic Portfolio | Instructor demo: "From template to live URL in 20 minutes" | vercel/templates/magic-portfolio |
| Vercel CLI — project management | ai-programming-teaching-project/docs/website/ | |
| Next.js 14 App Router — basics |
Real-World Application
Every engineer, designer, and founder you'll interview with in 2026 expects a personal site within the first five seconds of Googling your name. Your portfolio is not a nice-to-have — it's table stakes. The good news: it's also the single highest-ROI artefact you can build in two hours, and you're going to upgrade it every week for the rest of the term.
After class: copy your live URL and add it to your LinkedIn headline and your GitHub profile README. Tag @TECHNEST on LinkedIn when you post — your instructor will reshare the first five students to do this.
Challenges & Tips
- "The template looks good but I want a totally different vibe." Ask Cursor "Replace the current design with something inspired by [reference site]." Let the AI propose, then iterate. Resist hand-editing CSS.
- "Vercel says 'Build error: module not found'." Paste the full error into Cursor (use the
[RECOVER]pattern from Week 1). 90% of first-deploy errors are a missing package Vercel can't find — Cursor fixes them in one prompt. - "My photo looks stretched." Ask Cursor "Crop my hero photo to a square and re-export at 600 × 600. Don't lose quality." Describe the outcome, not the CSS.
- "Vercel shows 'Unauthorized' when I try to deploy." Your token from Week 1 may have expired. In Cursor, say "My Vercel MCP token is expired. Walk me through generating a new one and updating your config."
- "The preview URL looks different from the production URL." Preview deploys and production deploys can use different env vars. Ask Cursor to diff them: "Compare the env vars on my preview vs production deployment and list any differences."
Ask: "Is Vercel's GitHub integration still connected? Check the last deploy time and the webhook delivery log." If the webhook is broken, Cursor will walk you through re-linking.