Trailing Slash Guide
Have trailing slash problems after deploying a static website in production?
This repo explains factually the behavior of:
We also suggest some possible solutions
Intro
Let's get more familiar with trailing slash issues.
Common problems:
- SEO/perf issues: when browsing
/myPath
, your host redirects to/myPath/
- 404 issues: relative link such as
<a href="otherPath">
are resolved differently (/otherPath
or/myPath/otherPath
depending on the presence/absence of a trailing slash - UX issues: your host adds a trailing slash, and later your single-page-application frontend router removes it, leading to a confusing experience and flickering url
Causes:
- static site generators can emit different files for the same path
/myPath
:/myPath.html
or/myPath/index.html
(the later can lead to an additional trailing slash) - host providers all have a different behavior when serving static files, there is no standard
Summary
Considering this static site:
static
│
├── file.html
│
├── folder
│ └── index.html
│
├── both.html
└── both
└── index.html
Behavior of various static hosting providers:
Host | Settings | Url | /file | /file/ | /file.html | /folder | /folder/ | /folder/index.html | /both | /both/ | /both.html | /both/index.html |
---|---|---|---|---|---|---|---|---|---|---|---|---|
GitHub Pages | link | |||||||||||
Netlify | Default | link | ||||||||||
Netlify | Pretty Urls on | link | ||||||||||
Netlify | Pretty Urls off | link | ||||||||||
Vercel | Default | link | ||||||||||
Vercel | cleanUrls=false trailingSlash=undefined | link | ||||||||||
Vercel | cleanUrls=false trailingSlash=false | link | ||||||||||
Vercel | cleanUrls=false trailingSlash=true | link | ||||||||||
Vercel | cleanUrls=true trailingSlash=undefined | link | ||||||||||
Vercel | cleanUrls=true trailingSlash=false | link | ||||||||||
Vercel | cleanUrls=true trailingSlash=true | link | ||||||||||
Cloudflare Pages | link | |||||||||||
Render | link | |||||||||||
Azure Static Web Apps | link |
Help Wanted
Let's keep this resource up-to-date, and make it exhaustive together.