Ship a Static HTML Site for Free
Not every website needs a framework. A landing page, portfolio, documentation site, or internal tool can be pure HTML, CSS, and JavaScript — and it is faster to build, easier to maintain, and free to host on PandaStack's static CDN.
This guide walks through deploying a plain HTML website from zero to a live HTTPS URL in under five minutes.
Prerequisites
- A GitHub account
- PandaStack CLI:
npm install -g @pandastack/cli - Your HTML files (or follow along to create them)
Step 1 — Create Your HTML Project
mkdir my-static-site && cd my-static-siteCreate index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Static Site</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello from PandaStack</h1>
<p>This static site is served from a global CDN.</p>
<script src="app.js"></script>
</body>
</html>Create styles.css:
body {
font-family: system-ui, sans-serif;
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
color: #1a1a1a;
}
h1 {
font-size: 2rem;
}Create app.js:
console.log('Site loaded successfully');Step 2 — Configure pandastack.json
For a plain HTML site with no build step, the configuration is minimal:
{
"type": "static",
"outputDir": "."
}The outputDir: "." tells PandaStack to serve the current directory as-is. No buildCommand is needed because there is nothing to compile — your files are already in their final form.
If you use a build tool like Parcel or a simple bundler, add the build command:
{
"type": "static",
"buildCommand": "npx parcel build index.html --dist-dir dist",
"outputDir": "dist"
}Step 3 — Organise Multi-Page Sites
For sites with multiple pages, use a clean folder structure:
my-static-site/
├── index.html
├── about.html
├── contact.html
├── styles.css
├── app.js
├── images/
│ └── hero.png
└── pandastack.jsonPandaStack serves each .html file at its corresponding URL path:
index.html→https://my-site.pandastack.io/about.html→https://my-site.pandastack.io/aboutcontact.html→https://my-site.pandastack.io/contact
Step 4 — Push to GitHub and Deploy
Initialise a Git repository and push:
git init
git add .
git commit -m "Initial static site"
gh repo create my-static-site --public --source=. --pushDeploy with the PandaStack CLI:
panda deployYou will be prompted to log in and link a project. After that, the deployment completes in seconds.
Alternatively, open [dashboard.pandastack.io](https://dashboard.pandastack.io), click New Project, connect your GitHub repository, and PandaStack reads pandastack.json to determine what to serve.
Step 5 — Continuous Deployment
Every push to your default GitHub branch triggers a new deployment:
# Update a file
echo "<p>Updated content</p>" >> index.html
git add . && git commit -m "Update homepage" && git push
# PandaStack deploys the update automaticallyNo manual steps. No build pipeline to configure. Just push and your changes are live.
Step 6 — Custom Domain (Optional)
Add a custom domain from the PandaStack dashboard under Settings → Domains. PandaStack provisions a TLS certificate automatically via Let's Encrypt — your site gets HTTPS without any manual certificate management.
Add a 404 Page
Create a 404.html file in your project root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>404 — Page Not Found</title>
</head>
<body>
<h1>404 — Page Not Found</h1>
<a href="/">Go home</a>
</body>
</html>PandaStack automatically serves 404.html for any path that does not match a file.
Optimising Static Assets
For production, compress your assets. Parcel, Vite, and most modern bundlers do this automatically. For a plain HTML site without a bundler, use a simple compression script to shrink CSS and JS before pushing:
# Install a lightweight minifier
npm install -g minify
# Minify CSS and JS
minify styles.css > styles.min.css
minify app.js > app.min.jsThen update your HTML to reference the minified files. PandaStack's CDN also serves assets with gzip and brotli compression enabled by default, so your visitors receive the smallest possible payloads without any extra configuration.
Summary
Static HTML hosting on PandaStack is free, fast, and zero-maintenance. Push HTML/CSS/JS to GitHub, add a pandastack.json with type: "static", and PandaStack handles the rest. More at [docs.pandastack.io](https://docs.pandastack.io).