Fix Invalid Filename Deployment Error in Hugo
This tutorial will show you how to fix 'Invalid Filename: Deployed filenames cannot contain # or ? characters' Deployment Error in Hugo.
Problem
When you add tag like C#,F# in your post, Hugo will generate static files in public folder according to the tags such as tags/c#/index.xml,tags/f#/index.xml.
However, it is not allowed because you will get 'Invalid Filename: Deployed filenames cannot contain # or ? characters' error.
Besides that, the path of the file above will be translated to url [site]/tags/c/ and you will get 404 page not found message.
Solution
The solution is to use C-Sharp tag on your post then override the html file so that we will see C# tag on the page but it will generate tags/c-sharp/index.xml static files in public folder.
After this, we will also see the generated to be [site]/tags/c-sharp/.
Please follow below steps:
1. Use C-Sharp tag instead of C#
tags: ["C-Sharp"]
2. Override HTML file
This example uses ghostwriter theme. However, it doesn’t matter if you use other theme. You can follow How to Create Hugo Site tutorial if you still don’t have Hugo site.
Copy html file that generate list of posts that contain the tag in your theme’s layout folder then paste it in layout folder at your site root.
In ghostwriter theme, the html file’s name is post-footer.html.
Next, replace code like this:
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">{{ . }}</a>
to be:
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">{{ replace . "-Sharp" "#" }}</a>
Conclusion
The point of this tutorial is you cannot use C# tag as is.
First, because you will get deployment error.
Second, since # has special meaning in the URL you must make a workaround like above steps so that you can still show C# tag.
Some posts on this website also use this technique like Func and Action Equivalent in Java.