How to Resolve Cloudflare Trailing Slash Redirect (308)

how-to-resolve-cloudflare-trailing-slash-308-redirect.md

Fix Cloudflare 308 Trailing Slash Redirect Issue

Reference URLs:

• https://community.cloudflare.com/t/cloudflare-pages-get-rid-of-redundat-308-redirect/324582/29
• https://electricui.com/blog/switching-to-cloudflare-pages#how-to-disable-the-trailing-slash-on-cloudflare-pages

Command

# Reference: https://explainshell.com/explain?cmd=find+.%2Fdist+-name+%27index.html%27+-mindepth+2+-type+f+%5C+++++-exec+sh+%5C+++++-c+%27parent%3D%22%24%28dirname+%22%241%22%29%22%3B+mv+%22%241%22+%22%24parent%2F..%2F%24%28basename+%22%24parent%22%29.html%22%3B%27+%5C+++++find-sh+%7B%7D+%5C%3B
find ./dist -name 'index.html' -mindepth 2 -type f \
    -exec sh \
    -c 'parent="$(dirname "$1")"; mv "$1" "$parent/../$(basename "$parent").html";' \
    find-sh {} \;

# Reference: https://explainshell.com/explain?cmd=find+.%2Fdist+-empty+-type+d+-delete
find ./dist -empty -type d -delete

See:

• ExplainShell.com - 1st Command
• ExplainShell.com - 2nd Command

Purpose

This command searches for index.html files within the ./dist directory, but only at a depth greater than 1 (i.e., not directly under ./dist but further inside its subdirectories). Upon finding each index.html file, it executes a shell command to rename and move the file.

How It Works

This script works by

• converting => /blog/post-slug-name/index.html
• to => /blog/post-slug-name.html

How to Use

• Put migrate-index.sh in ./src/scripts (of my CF pages project)
• npm run build && bash ./src/scripts/migrate-index.sh

Of course you could add the migration into your npm run build directly.

#!/bin/bash

# Script Configuration
base_dir="./dist"  # Base directory to search within
log_file="script.log"  # Log file to record actions taken
dry_run=false  # Dry run mode

# Parse command-line arguments for flexibility
while getopts "d:l:n" opt; do
  case ${opt} in
    d ) base_dir=$OPTARG ;;
    l ) log_file=$OPTARG ;;
    n ) dry_run=true ;;
    \? ) echo "Usage: cmd [-d base_directory] [-l log_file] [-n (dry run)]"
         exit 1 ;;
  esac
done

# Function to log messages
log() {
  echo "$(date +%Y-%m-%d\ %H:%M:%S) - $1" >> $log_file
}

# Function to move and rename index.html files
move_and_rename() {
  local file_path=$1
  local parent_dir=$(dirname "$file_path")
  local new_name=$(basename "$parent_dir").html
  local target_path="$parent_dir/../$new_name"

  if [ $dry_run = true ]; then
    log "DRY RUN: Would move $file_path to $target_path"
  else
    if [ -e "$target_path" ]; then
      log "ERROR: Target file $target_path already exists. Skipping."
      return 1
    fi

    mv "$file_path" "$target_path" && log "Moved $file_path to $target_path" || log "ERROR: Failed to move $file_path to $target_path"
  fi
}

# Function to find and process index.html files
process_files() {
  find $base_dir -name 'index.html' -mindepth 2 -type f -print0 | while IFS= read -r -d '' file; do
    move_and_rename "$file"
  done
}

# Function to delete empty directories
delete_empty_dirs() {
  if [ $dry_run = true ]; then
    find $base_dir -empty -type d -exec echo "DRY RUN: Would delete directory {}" \; -exec echo \; >> $log_file
  else
    find $base_dir -empty -type d -delete && log "Deleted empty directories"
  fi
}

# Main script execution
log "Script started."
process_files
delete_empty_dirs
log "Script completed."