All Projects → slorber → trailing-slash-guide

slorber / trailing-slash-guide

Licence: MIT license
Understand and fix your static website trailing slash issues!

Programming Languages

HTML
75241 projects
shell
77523 projects

Projects that are alternatives of or similar to trailing-slash-guide

snipcart-hugo-integration
Hugo Website Tutorial with a Live Static E-Commerce Example
Stars: ✭ 38 (-85.1%)
Mutual labels:  static-site-generator, hugo, netlify, jamstack
Gatsby Starter Netlify Cms
Example gatsby + netlify cms project
Stars: ✭ 1,932 (+657.65%)
Mutual labels:  static-site-generator, gatsby, netlify, jamstack
Actions Gh Pages
GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
Stars: ✭ 2,576 (+910.2%)
Mutual labels:  static-site-generator, hugo, gatsby, nuxt
Atlas
The Hugo boilerplate we use for our projects.
Stars: ✭ 232 (-9.02%)
Mutual labels:  static-site-generator, hugo, netlify, jamstack
Jamstackthemes
A list of themes and starters for JAMstack sites.
Stars: ✭ 298 (+16.86%)
Mutual labels:  hugo, gatsby, netlify, jamstack
Gatsby Starter Lumen
A constantly evolving and thoughtful architecture for creating static blogs.
Stars: ✭ 1,797 (+604.71%)
Mutual labels:  static, gatsby, netlify, jamstack
Bael Template
Brutalist Blog theme for Netlify CMS
Stars: ✭ 187 (-26.67%)
Mutual labels:  static-site-generator, nuxt, netlify, jamstack
nuxt-starter-netlify-cms
Example nuxt + netlify cms project. Nuxt port of Gatsby starter app.
Stars: ✭ 13 (-94.9%)
Mutual labels:  static-site-generator, nuxt, netlify, jamstack
Next.js
The React Framework
Stars: ✭ 78,384 (+30638.82%)
Mutual labels:  static-site-generator, static, ssg, vercel
twenty-twenty-hugo
Twenty Twenty Hugo is forked from WordPress Twenty Twenty theme. It's fully functional like the WordPress theme.
Stars: ✭ 48 (-81.18%)
Mutual labels:  static-site-generator, hugo, jamstack
11straps
11straps is a static website boilerplate. It combines Eleventy with Bootstrap 5. 🎉
Stars: ✭ 85 (-66.67%)
Mutual labels:  static-site-generator, netlify, eleventy
liva-hugo
Liva is a personal blog template powered by Hugo.
Stars: ✭ 192 (-24.71%)
Mutual labels:  static-site-generator, hugo, jamstack
eleventy-plugin-cloudinary
An Eleventy shortcode that allows you to add an image from your cloudinary account
Stars: ✭ 28 (-89.02%)
Mutual labels:  static-site-generator, ssg, eleventy
Post Scheduler
Schedule posts & content updates for static websites (Jekyll, Hugo, Gatsby, Phenomic etc)
Stars: ✭ 184 (-27.84%)
Mutual labels:  static-site-generator, hugo, gatsby
contentful-hugo
A CLI tool that pulls data from Contentful and turns it into markdown files for Hugo and other static site generators. It also includes an express server that can be used for local development and content previews
Stars: ✭ 31 (-87.84%)
Mutual labels:  static-site-generator, hugo, jamstack
Netlify Cms
A Git-based CMS for Static Site Generators
Stars: ✭ 14,776 (+5694.51%)
Mutual labels:  static-site-generator, static, jamstack
Emacs Easy Hugo
Emacs major mode for managing hugo
Stars: ✭ 235 (-7.84%)
Mutual labels:  static-site-generator, hugo, netlify
axiom
Axiom - A Hugo Theme. GitTip: https://gitcoin.co/tip?username=jhauraw
Stars: ✭ 67 (-73.73%)
Mutual labels:  hugo, netlify, vercel
exo
EXO, the empathy-first framework for an accessible world.
Stars: ✭ 75 (-70.59%)
Mutual labels:  netlify, jamstack, vercel
grammer-blog
My personal blog about programming or random stuff. Made using Vue JS 2 and Gridsome as a jamstack framework for Vue JS. Hosted on vercel
Stars: ✭ 14 (-94.51%)
Mutual labels:  static-site-generator, jamstack, vercel

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 💢 404 ➡️ /folder/
Netlify Default link ➡️ /file ➡️ /folder/ ➡️ /both
Netlify Pretty Urls on link ➡️ /file ➡️ /folder/ ➡️ /both
Netlify Pretty Urls off link
Vercel Default link 💢 404 💢 404
Vercel cleanUrls=false trailingSlash=undefined link 💢 404 💢 404
Vercel cleanUrls=false trailingSlash=false link 💢 404 💢 404 ➡️ /folder ➡️ /both
Vercel cleanUrls=false trailingSlash=true link 💢 404 💢 404 ➡️ /folder/ ➡️ /both/
Vercel cleanUrls=true trailingSlash=undefined link 💢 404 💢 404
Vercel cleanUrls=true trailingSlash=false link ➡️ /file ➡️ /file ➡️ /folder ➡️ /folder ➡️ /both ➡️ /both ➡️ /both
Vercel cleanUrls=true trailingSlash=true link ➡️ /file/ ➡️ /file/ ➡️ /folder/ ➡️ /folder/ ➡️ /both/ ➡️ /both/ ➡️ /both/
Cloudflare Pages link ➡️ /file ➡️ /file ➡️ /folder/ ➡️ /folder/ ➡️ /both ➡️ /both/
Render link
Azure Static Web Apps link ➡️ /file

Help Wanted

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].