Saving Work and Going Live | Claude Code Guide

Two problems to solve. First: don't lose your work. Second: let other people see it. Right now your website exists only on your computer. If your hard drive dies, your project folder gets accidentally deleted, or Claude makes a change that breaks everything, you have no safety net. Let's fix that. Then we'll put your site on the internet. ## The Simple Way: Zip Backups Before you make big changes or at the end of each session, create a backup: ```text Create a zip file of this entire project called my-portfolio-backup-2024-01-15.zip and save it to my Documents folder. ``` Replace the date with today's date. Now you have a snapshot. If something goes wrong, you can extract the zip and start fresh from that point. Want to automate this? Ask Claude: ```text Create a simple backup script that zips this project with today's date in the filename and saves it to my Documents folder. I want to be able to run it whenever I need a backup. ``` Claude will create a script you can run with one command. Backups don't have to be complicated. ## When to Back Up Create a backup: - Before making big design changes - After each page is finished - When everything looks good and you want to lock it in - At the end of every work session There's no such thing as backing up too often. Zip files are small. Storage is cheap. Peace of mind is priceless. ## The Professional Way: Git and GitHub Developers use something called Git to track changes over time. Think of it like "Track Changes" in Word, but for your entire project. Every time you save a snapshot, Git remembers exactly what changed. You can look back at any point in history, compare versions, or undo mistakes. **Git vs GitHub - they're different things:** - **Git** is a tool that runs on your computer. It tracks changes locally. - **GitHub** is a website where you store your Git history in the cloud. An analogy: Git is like Microsoft Word (the tool that does the work). GitHub is like Google Drive (where you store and share your files). You need Git to create the history. You use GitHub to back it up online and share it. ### Key Terms (Just Four) | Term | What It Means | |------|--------------| | **Repository** | Your project folder, tracked by Git. Often called a "repo." | | **Commit** | A saved snapshot. Like hitting "save" but Git remembers every save forever. | | **Push** | Upload your commits from your computer to GitHub. | | **Pull** | Download commits from GitHub to your computer. | That's it. Repository, commit, push, pull. Everything else is built on these four concepts. ### Setting It Up If you want to use Git: ```text Help me set up Git for this project. Walk me through: 1. Initializing a Git repository 2. Making my first commit 3. Creating a GitHub account if I don't have one 4. Pushing my project to GitHub ``` Claude will guide you through each step. You'll end up with your project backed up to GitHub, accessible from anywhere, with a complete history of every change you've made. ### Why Bother? Git seems like overkill for a simple portfolio site. But it unlocks two things: 1. **Free hosting.** GitHub Pages, Netlify, and Vercel can all deploy directly from a GitHub repository. Push your code, and it's live. No FTP, no file uploads. 2. **Fearless experimentation.** Want to try a wild redesign? Make a commit first. If the experiment fails, you can revert to exactly how things were before. No zip files to manage, no "which backup was the good one?" You don't need Git for your first project. Zip backups work fine. But when you're ready to level up, Git is how professionals work. ## Going Live: Putting Your Site on the Internet Your website needs to live somewhere people can access it. You have several good options. ### Free Hosting (Recommended for Starting Out) **Netlify, Vercel, or GitHub Pages** let you host static websites for free. You get a URL like `yourname.netlify.app` or `yourname.github.io`. The magic: connect your GitHub repository, and these services automatically rebuild your site whenever you push changes. Edit a file, push to GitHub, and within a minute your live site updates. No manual uploading. ```text Help me deploy my website to Netlify using my GitHub repository. Walk me through connecting my repo and getting a live URL. ``` ### Paid Hosting (For Custom Domains) If you want `yourname.com` instead of `yourname.netlify.app`, you need two things: 1. **A domain name** (~$10-15/year from Namecheap, Cloudflare, or Porkbun) 2. **Hosting** (can still be free - Netlify and Vercel support custom domains) Or use traditional shared hosting (Hostinger, Bluehost, SiteGround) which bundles domain + hosting together, usually with a free domain for the first year. ### Which Should You Choose? | Situation | Recommendation | |-----------|----------------| | Just want something live quickly | Netlify or Vercel (free) | | Want a custom domain, minimal fuss | Netlify/Vercel + buy domain separately | | Want traditional hosting with email | Shared hosting (Hostinger, etc.) | | Already have a domain somewhere | Connect it to whichever host you prefer | When you're ready: ```text Help me put my website on the internet. I want [your preference]. Walk me through the steps. ``` Claude will guide you through whichever path you choose. ## Keeping Your Site Updated After your site is live, the update workflow depends on your setup: **If using GitHub + Netlify/Vercel:** 1. Make changes locally 2. Test in your browser 3. Commit and push to GitHub 4. Your site updates automatically (usually within a minute) **If using traditional hosting:** 1. Make changes locally 2. Test in your browser 3. Upload changed files via FTP or your host's file manager The GitHub workflow is smoother once set up. Traditional hosting is more manual but doesn't require learning Git. ## What You've Built Take a step back. Look at what you have: - A real website with multiple pages - Consistent design and navigation - Real content about you - Backups you can restore from - A public URL anyone can visit You built this by describing what you wanted to an AI. No code bootcamp. No HTML tutorial. No CSS framework documentation. You told Claude Code what you wanted, reviewed the results, and refined until it was right. That's not cheating. That's the new skill. Knowing what to build and being able to describe it clearly is valuable whether you're directing an AI or a development team. Your portfolio site is live. Share the link. Update it when you have new projects. It's yours now. > Next up: debugging. Because even though your site is live, things will go wrong eventually. Better to learn how to fix them before they do.

Saving Your Work with Git and Going Live

The Simple Way: Zip Backups

Sign In to Unlock

Check Your Email