Websites & Static Assets

Attach an index.html to a function and hostfunc serves it as a live web page at the function's run URL — static sites and dynamic pages, not just JSON APIs.

Step-by-Step Guide

1.Add an index.html

Attach an index.html file to a function — drop it into the editor file tree, or start from the HTML page template. A browser request to the function URL renders the page instead of running main().

  • The page is served at the function's run URL — /run/:orgSlug/:fnSlug.
  • A function with no index.html still runs main(), so API-only functions are unchanged.
bash
# A function 'site' in the 'acme' org renders its index.html here:curl https://run.hostfunc.io/run/acme/site

2.Add CSS, JS, and images

Attach as many sibling assets as you need. Each is served by sub-path, and hostfunc injects a <base> tag so relative links resolve without hardcoding the run path.

  • A style.css asset is served at /run/:orgSlug/:fnSlug/style.css.
  • Reference assets with relative paths like ./style.css — the injected <base> makes them resolve.
  • Supported types: HTML, CSS, JS, JSON, SVG, PNG, JPEG, GIF, WebP, ICO, and web fonts.

3.Mix a website with an API

A static page and a dynamic handler can live in the same function. A browser GET renders index.html; a POST runs main(). For dynamic HTML, main() can return a standard web Response instead of a JSON value.

typescript
export async function main(input, request) {  // Return a web Response for full control of status, headers, and body.  return new Response("<h1>Hello from hostfunc</h1>", {    headers: { "content-type": "text/html" },  });}

4.Deploy

Assets are bundled into the deployed worker at deploy time, so the page is served straight from the edge with no extra infrastructure to configure. Re-deploy to publish changes.

  • Editing an asset updates the draft — deploy again to make it live.
  • Small text assets (HTML, CSS, JS) always travel inside the worker bundle.

Related Documentation