I am generating a webpage. The generator takes a page title given as a string and converts it to a .html filename. For example, if the title is first
, the filename is first.html
.
I understand that a URL path segment can only contain certain characters and that all others need to be percent encoded. A title of second post
should therefore be given filename second%20post.html
.
The trouble is that pages with filenames which are percent encoded are not loaded; second%20post.html
is 404. Non-percent encoded filenames work fine; first.html
, second+post.html
, and second post.html
(with a space) will load.
When second post.html
is loaded, the address bar shows:
http://localhost:8000/second%20post.html
When second%20post.html
is loaded, the address bar also shows:
http://localhost:8000/second%20post.html
yet gives a 404.
Why does second%20post.html
not load whereas second post.html
does? Could it be related to how the files are stored on disk?
index.html
<!DOCTYPE html5>
<html lang="en">
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<link rel='shortcut icon' type="image/png" href="static/favicon.png" />
<title>Index</title>
</head>
<body>
<div id="content">
<ul>
<li><p class="post-title"><a href="./first.html">first</a></p></li>
<li><p class="post-title"><a href="./second post.html">second post</a></p></li>
<li><p class="post-title"><a href="./second%post.html">second post</a></p></li>
</ul>
</div>
</body>
</html>
first.html
<!DOCTYPE html5>
<html lang="en">
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<link rel='shortcut icon' type="image/png" href="static/favicon.png" />
<title>First post</title>
</head>
<body>
<div id="content">
<p>First post<p>
</div>
</body>
</html>
'second post.html'
<!DOCTYPE html5>
<html lang="en">
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<link rel='shortcut icon' type="image/png" href="static/favicon.png" />
<title>Second post</title>
</head>
<body>
<div id="content">
<p>Second post, with a space<p>
</div>
</body>
</html>
second%20post.html
<!DOCTYPE html5>
<html lang="en">
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<link rel='shortcut icon' type="image/png" href="static/favicon.png" />
<title>Second post</title>
</head>
<body>
<div id="content">
<p>Second post, percent encoded<p>
</div>
</body>
</html>