Deployment module
Deployment Lab and Final Checklist
Deploy the same tiny site through one or more workflows, compare the experience, use the deployment checklist, and apply the process to Black Swan Bistro.
Learning Objectives
By the end of this lesson, you'll be able to:
- Deploy a small website through at least one workflow
- Compare manual, GitHub Pages and Netlify or Vercel options where practical
- Use the Markdown checklist and branded PDF checklist appropriately
- Apply the process to Black Swan Bistro Part 5
Why This Matters:
A small lab turns deployment from an idea into evidence.
Before You Start:
You should be familiar with:
- Continuous Improvement and Deployment Workflows Review here
Deployment Lab Project
deployment-test/
├── index.html
├── styles.css
└── script.jsUse the tiny site from the upload lesson, or create a similarly small page. Small is the point. If something breaks, there are only a few files to inspect.
Starter Files
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deployment Test</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<h1>Deployment Test</h1>
<p>If you can read this online, the HTML deployed.</p>
<button id="status-button">Test JavaScript</button>
<p id="status">JavaScript has not run yet.</p>
</main>
<script src="./script.js"></script>
</body>
</html>/* styles.css */
body {
font-family: system-ui, sans-serif;
margin: 0;
padding: 2rem;
}
main {
border: 2px solid #4b88a2;
max-width: 42rem;
padding: 1.5rem;
}// script.js
document.querySelector('#status-button').addEventListener('click', () => {
document.querySelector('#status').textContent = 'JavaScript is running online.';
});Choose at Least One Lab Option
Complete at least one deployment method. If time allows, complete two and compare the feedback each one gives you. The goal is not to collect accounts; the goal is to notice how each workflow moves files from local project to live URL.
Deployment Checklists
Download the GraphiteEdge Deployment Checklist
Use the branded PDF as a reusable deployment workbook. Use the Markdown checklist below as a lightweight in-lesson resource.
Printable Markdown Checklist
Copy, download or print this lightweight checklist for your project notes.
Preview the full deployment checklist
# Deployment Checklist
Use this checklist before and after deploying a website.
## Project details
| Item | Details |
|---|---|
| Project name | |
| Deployment method | |
| Hosting service | |
| Live URL | |
| Repository URL | |
| Build command | |
| Output or public folder | |
| Domain registrar | |
| DNS provider | |
| Renewal date | |
| Date deployed | |
## Files and folders
- [ ] The homepage is named `index.html`.
- [ ] `index.html` is directly inside the public web root or publish directory.
- [ ] CSS, JavaScript, images and fonts are inside the project folder.
- [ ] Paths are relative, not local paths from one computer.
- [ ] File and folder names are simple, consistent and lowercase.
- [ ] ZIP files have been extracted when required.
- [ ] For Vite projects, the production build has been created.
- [ ] For Vite projects, the output folder matches the host settings.
## Live testing
- [ ] The live URL opens in a normal browser window.
- [ ] The live URL opens in a private browser window.
- [ ] CSS loads on the live site.
- [ ] JavaScript interactions work on the live site.
- [ ] Images load on the live site.
- [ ] Main navigation links work.
- [ ] The browser console has no obvious errors.
- [ ] Updates appear after deployment, or caching has been checked.
## Improvement log
| Date | Change | Reason | Deployment method | Result | Follow-up |
|---|---|---|---|---|---|
| | | | | | |
Do not write passwords in this checklist.Reflection Questions
- Which method was easiest?
- Which method gave the clearest feedback?
- Which method would be easiest to update?
- Which method would be most appropriate for a client?
- Where are the domain, DNS and hosting accounts managed?
- What could go wrong if account ownership is unclear?
Next, apply this process to Black Swan Bistro Part 5: Prepare for Deployment .
Deployment Lab Knowledge Check
Before moving forward, can you answer these?
- What evidence proves the lab deployed successfully?
- Why is a tiny lab useful before deploying a larger project?
- What should students record after the lab?
Check Your Answers
- The live URL loads the HTML, CSS and JavaScript from another browser/device or private window, with no obvious console errors.
- It isolates the deployment workflow so problems are easier to diagnose.
- The deployment method, live URL, account/platform location, source repository or folder, DNS/domain details if used, result and follow-up tasks.
How confident are you with this concept?
Still confused | Getting there | Got it | Could explain it to a friend
Ready for the Next Deployment Step
Key Takeaways:
- Deployment is a publishing workflow, not just a button.
- The live URL is where deployment evidence is gathered.
- The right hosting path depends on files, update workflow, support needs and ownership.
- Troubleshooting starts with the first meaningful error.
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- Deploy the same tiny site through one or more workflows, compare the experience, use the deployment checklist, and apply the process to Black Swan Bistro. Check!
If you can name which part of the system you are changing, test the live result and record the outcome, deployment is becoming a repeatable workflow.
Think & Reflect:
Deployment evidence
- What would prove this site works for someone else?
Next action
- What should be recorded so this deployment can be repeated later?
Looking Ahead:
Next: apply the workflow to Black Swan Bistro Part 5.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Black Swan Bistro — Part 5 (Prepare for Deployment)Related Topics
Explore these related tutorials to expand your knowledge: