Site Preview
Definition
A site preview is the step between finishing the files and telling people where to look. On your own computer a site is usually opened either straight from disk, with an address beginning file://, or from a small development server on localhost — and neither behaves like a real host. A preview closes that gap by serving the same files over HTTPS on a real domain, with real paths, real headers and real caching, so you can click through as a visitor would. Where a platform runs continuous deployment this is generated per branch and called a deploy preview; on a drop-and-publish host it is simply the address you were given, which you check before sharing. Either way the point is that the thing you inspect is the thing that will be served.
Why It Matters
A surprising share of launch faults exist only once the files are on a server. Case sensitivity is the classic: a file saved as Logo.PNG and referenced as logo.png loads happily on a Mac and returns a 404 on Linux, and nothing short of loading the site somewhere real will show you. The same goes for absolute paths still pointing at a folder on your own disk, for mixed content where one image is requested over HTTP on an HTTPS page and silently blocked, and for a missing 404 page nobody noticed because nobody typed a wrong address. Two minutes of checking against a correction email to a list of 3,000 people is not a close contest.
How It Works
Publish the files, open the address the host gives you, and move through the site as a stranger would. Load the root, then open a deep page directly rather than by clicking to it, because direct loads are where routing and index resolution break. Keep the browser console open and watch for 404s on stylesheets, fonts and images — these fail quietly, and a page can look nearly right while a third of its assets are missing. Look at it on a phone, since that is where most links from messages and social posts are opened. Then paste the address into a private channel or a note to yourself to see what the link card looks like, and only after all of that send it anywhere that matters.
Real-World Example
A photographer exports a portfolio from a site builder and uploads the folder to 99helpers, where it goes live at hallam-portfolio.99helpers.site straight away. The preview shows the gallery loading correctly and the contact page returning a 404, because the export wrote the file as Contact.html while the navigation links to contact.html. Renaming and uploading again fixes it inside a minute, and the address does not change — so nothing that has already been shared needs correcting. The link that eventually reaches clients is one that has already been clicked through end to end.
Common Mistakes
- ✕Checking in the tab that has been open all afternoon — cached files hide broken ones, so use a private window
- ✕Looking at the home page and stopping there — routing and relative path faults surface on deep pages, not at the root
- ✕Testing only on the machine that built the site — filename case, installed fonts and cached assets all differ elsewhere
- ✕Sending the address out before seeing how it renders as a link — the card is most of the first impression and takes ten seconds to check
Related Terms
Deploy Preview
A deploy preview is a full working copy of a proposed change, published at its own temporary address so people can look at it before it replaces the live site.
Continuous Deployment
Continuous deployment means every accepted change is published automatically, with nobody pressing a publish button. A change that passes its checks goes live on its own.
Relative Path
A relative path points at a file starting from the page that mentions it, rather than from the site root. It has no leading slash — styles.css, img/logo.png, ../fonts/inter.woff2.
Custom 404 Page
A custom 404 page is the page a site shows when someone asks for an address that does not exist, written by you rather than left to the host's default. It is returned with a 404 status code.
Mixed Content
A page loaded over an encrypted connection that pulls in at least one image, script, stylesheet or font over plain HTTP. The browser responds by removing the padlock, and for anything that can run code, by refusing to load it at all.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →