Rocket Logo Rocket Docs Themes Tools Blog

Routing

Rocket uses file-based routing to generate your build URLs based on the file layout of your project site/pages directory. When a file is added to the site/pages directory of your project, it is automatically available as a route based on its filename.

Static routes

Rocket Pages are Markdown (rocket.md), HTML (rocket.html) and JavaScript (rocket.js) in the site/pages directory become pages on your website. Each page’s route is decided based on its filename and path within the site/pages directory. This means that there is no separate "routing config" to maintain in a Rocket project.

# Example: Static routes
docs/index.rocket.md        -> mysite.com/
docs/about.rocket.md        -> mysite.com/about/
docs/about/index.rocket.js  -> mysite.com/about/
docs/about/me.rocket.html   -> mysite.com/about/me/
docs/posts/1.md             -> mysite.com/posts/1/

Each page essentially will become an index.html file in a specific folder. This means it will "force" a trailing slash on the URL.

This is important as a file about/index.html will work on all servers and does not leave room for interpretation.

Below is a summary of investigations by Zach Leatherman and Sebastien Lorber

Legend:

  • 🆘 HTTP 404 Error
  • 💔 Potentially Broken Assets (e.g. <img src="image.avif">)
  • 🟡 SEO Warning: Multiple endpoints for the same content
  • ✅ Correct, canonical or redirects to canonical
  • ➡️ Redirects to canonical
about.html about/index.html
Host /about /about/ /about /about/
GitHub Pages ✅ 🆘 404 ➡️ /about/ ✅
Netlify ✅ ➡️ /about ➡️ /about/ ✅
Vercel 🆘 404 🆘 404 🟡💔 ✅
Cloudflare Pages ✅ ➡️ /about ➡️ /about/ ✅
Render ✅ 🟡💔 🟡💔 ✅
Azure Static Web Apps ✅ 🆘 404 🟡💔 ✅

If you wanna know more be sure to checkout Trailing Slashes on URLs: Contentious or Settled?.

Non index.html pages

Sometimes you may still have the need to create a name.html file. This is possible via *.rocket.js files as it will handle full filename within "itself" explicitly.

docs/404.html.rocket.js           -> mysite.com/404.html
docs/about/hidden.html.rocket.js  -> mysite.com/about/hidden.html

This can also be used to create non html files like

docs/sitemap.xml.rocket.js           -> mysite.com/sitemap.xml
docs/robot.txt.rocket.js             -> mysite.com/robot.txt
docs/about/background.svg.rocket.js  -> mysite.com/about/background.svg

You still have access to all features within Rocket pages.