slorber/trailing-slash-guide

Understand and fix your static website trailing slash issues!

HTML

436

61 commits

updated Nov 19, 2024

See the code

README

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:

Help Wanted

Let's keep this resource up-to-date, and make it exhaustive together.

eleventy
gatsby
gh-pages
hugo
jamstack
jekyll
netlify
nextjs
nuxt
react
ssg
ssr
static
static-site-generator
vercel
vitepress

Contributors

slorber

54 commits

fmalcher

2 commits

Strift

2 commits

Josh-Cena

1 commits

slorber/trailing-slash-guide

Understand and fix your static website trailing slash issues!

HTML

436

61 commits

updated Nov 19, 2024

See the code

README

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:

Help Wanted

Let's keep this resource up-to-date, and make it exhaustive together.

eleventy
gatsby
gh-pages
hugo
jamstack
jekyll
netlify
nextjs
nuxt
react
ssg
ssr
static
static-site-generator
vercel
vitepress

Contributors

slorber

54 commits

fmalcher

2 commits

Strift

2 commits

Josh-Cena

1 commits

Languages

HTML

98.6%

Shell

1.4%