Deploy to Netlify (Optional)

GitHub Pages is great, but Netlify offers some extra features:

Custom domains with automatic HTTPS
Form handling without a backend
Continuous deployment from Git
Deploy previews for branches

Step 1: Create a Netlify Account

Go to netlify.com
Click “Sign up”
Sign up with your GitHub account (easiest!)

🖼️

[Screenshot: Netlify signup]
Netlify homepage with "Sign up" button and GitHub login option

Step 2: Connect Your Repository

Click “Add new site” → “Import an existing project”
Choose GitHub as your Git provider
Authorize Netlify to access your repositories
Select your project repository

🖼️

[Screenshot: Netlify import project]
Netlify interface showing GitHub repository selection

Step 3: Configure Build Settings

For a simple HTML/CSS/JS project:

Build command: Leave empty (or echo "No build needed")
Publish directory: . (or the folder with your index.html)

🖼️

[Screenshot: Netlify build settings]
Build settings form with fields for build command and publish directory

Click “Deploy site”!

Step 4: Wait for Deployment

Netlify will:

Clone your repository
Run any build commands (if specified)
Publish your site

✅ Checkpoint

Your site should be live at something like random-name-12345.netlify.app

Step 5: Change Your Site Name

The random URL isn’t great. Let’s change it:

Go to Site settings → Site details → Change site name
Choose something memorable (e.g., my-portfolio)
Your URL becomes: my-portfolio.netlify.app

🖼️

[Screenshot: Netlify site name settings]
Site settings page with "Change site name" option

Automatic Deployments

The best part: Netlify automatically redeploys whenever you push to GitHub!

Push to GitHub → Netlify detects changes → Site updates automatically

No manual steps needed after initial setup.

Adding a Custom Domain

Want to use your own domain (like yourname.com)?

Go to Site settings → Domain management
Click “Add custom domain”
Enter your domain name
Follow the DNS configuration instructions

Netlify provides free HTTPS certificates automatically!

Netlify Forms (Bonus Feature)

Netlify can handle form submissions without a backend!

Just add the netlify attribute to your form:

<form name="contact" netlify>
  <label>
    Name: <input type="text" name="name">
  </label>
  <label>
    Email: <input type="email" name="email">
  </label>
  <label>
    Message: <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>

Submissions appear in your Netlify dashboard!

GitHub Pages vs Netlify

Feature	GitHub Pages	Netlify
Price	Free	Free (with limits)
Custom domain	Yes	Yes
HTTPS	Yes	Yes (easier setup)
Form handling	No	Yes
Deploy previews	No	Yes
Build tools	Limited	Extensive
Ease of setup	Easier	Slightly more steps

Bottom line: Both are great! GitHub Pages is simpler, Netlify has more features.

Troubleshooting

”Page not found” after deploy

Check your publish directory is correct
Make sure index.html exists in that directory
Check for case sensitivity in filenames

Build failing

Check the deploy log for error messages
For simple HTML sites, leave build command empty
Make sure all file paths are correct

Changes not appearing

Check the Deploys tab to see if deployment succeeded
Hard refresh: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)
Check that you pushed to the correct branch