Streaming live at 10am (PST)

Remove .html on exported site

Hi!

How do I remove .html in the URL on exported sites?

Thanks!

Take a look at this! :slight_smile:

Yes I have tried that but dont get it to work.

I created a GitHub Action to fix this undesirable, broken behavior of Webflow’s export:

Fixes all the paths in all the files and then commits them

1 Like

Awesome - this exact item was on my action list to sort next week!

Thanks for sharing this, I’ll definitely be going through this properly soon.

1 Like

So I got round to looking at this today, and ran it on a site I had at the time. It’s certainly really helpful so thanks again for sharing.

It’s not something I have any experience in, so I may have to look a little closer at this but I’m interested in knowing whether this can also 1) restructure the files into the relevant directory names, 2) change the files to index and 3) whether the original index.html can be handled in such a way that it’s left alone and the links point to root?

Or have I missed a trick here?

Thanks

@iratefox not sure I’m understanding what you mean… do you mean that you want to create directories matching the filenames and add the files to them?

Eg:

about-us.html → about-us/index.html

This is not a part of the script - my free host Netlify (highly recommended) will serve the about-us.html file as /about-us/

But if your host does not do this and you cannot switch to one that does, then you can modify the script on / after these lines here (these lines do a find and replace in all files to fix the paths). Each line that you write after these lines will be run as a “bash script”. So in case you don’t know what that is, you can google for how to do the thing you want in bash :slight_smile:

1 Like

Thank you - I was working on this just now and concluded that there’s more to it at host side. I am now using this in combo with a .htaccess file which is a good combo and handles everything as expected.

Great, glad to hear it! Mind posting the relevant parts of the .htaccess file that you’re using?

Sorry for the delay, yes so there are a few parts to it to make it work flawlessly for how we set things up but may need tweaks depending on site structure for you. We mostly use Apache so it’s based on this setup.

In the .htaccess file in the root httpd directory with all the files we use this:

# Ensure that directory listings are disabled
Options -Indexes

# Prevent mod_dir appending a slash to physical directories
DirectorySlash Off

# Remove trailing slash on URL-path when the corresponding ".html" file exists - change status code from 302 to 301 when confident all is working
RewriteCond %{DOCUMENT_ROOT}/$1.html -f
RewriteRule (.*)/$ /$1 [R=302,L]

# Rewrite request to append ".html" extension if it exists
RewriteCond $1 !\.\w{2,4}$
RewriteCond %{DOCUMENT_ROOT}/$1.html -f
RewriteRule (.*) $1.html [L]

# Show custom error document
ErrorDocument 404 /404.html

So this strips slashes, removes .html, handles pages that have the same name as directories, and pages within those directories etc. and this works great until you hit a 404 error in a directory somewhere, because it’ll be looking for that 404 document’s files which only exists in the root directory when Webflow exports. So to combat that and avoid messing around with duplicating pages we use a quick and dirty rewrite in the 404 content to change the relative paths to absolute which is pointed at root, then you can get the style/images/js etc intended for this page.

This is placed before the body tag in the Webflow 404 page:

<script>
$(document).ready(function() {
		$host_name = window.location.origin + '/';
	
		$("link[href^='css']").attr('href', function(i, oldcss) {
			return $host_name + oldcss;
		});
	
		$("link[href^='images']").attr('href', function(i, oldimage) {
			return $host_name + oldimage;
		});

		$("script[src^='js']").attr('src', function(i, oldjs) {
			return $host_name + oldjs;
		});
		
		$("img[src^='images']").attr('src', function(i, oldimg) {
			return $host_name + oldimg;
		});
	
		$('a').each(function() {
			var oldhref = $(this).attr('href');
			$(this).attr('href', $host_name + oldhref);
		});

});
</script>

As before, you may need to tweak slightly if you have an unusual site structure, or if you use Nginx. I’ve seen similar variants of this setup on this forum, indeed this very thread, but there have always been issues when you have a bigger site (such as the directories or the 404 functionality) and this has been a complete solution for us as far as we can see.

Hope it helps somebody!

1 Like