Recently, I was working on a GatsbyJS website and wanted to port over a few HTML pages with Javascript in them without converting them to React to get a prototype of the site up faster. However, after some trial and tribulation, I learned that this simple idea was not so straightforward in reality.
The Static directory
This doc explains that GatsbyJS provides a static directory where one can put files that are not part of the module system. Sounds perfect for our HTML pages!
Resulting file structure:
/src
/static
----/<we would like our HTML pages to go here>
The Problem
As this Github issues mentions, there is a bug in GatsbyJS that makes it so accessing HTML pages gives a 404 page.
The Workaround
When I was investigating this problem, I noticed that GatsbyJS wasn't serving HTML pages specifically. When I tried to access a JPG file or a PHP file located in the static folder, they were all served without a hitch.
After researching other ways to display HTML pages in a web browser, and after reading comments Github issue which reported the problem, I decided to convert my page to XHTML so GatsbyJS could serve it properly.
Now, you might be wondering why I didn't just covert the pages to React since I have decided that their original format won't work anyways. Well, converting to XHTML is much easier than converting to React. In fact, sites such as (this one)[http://www.it.uc3m.es/jaf/html2xhtml/simple-form.html] will convert the pages for you! Just be sure to check that all your Javascript functionality is copied over too. A few of my onclick function calls were removed, but copying and pasting them back in worked flawlessly.
Final file structure:
/src
/static
----/approve-event.xhtml
Conclusion
Converting my HTML pages to XHTML and putting them in the static folder was a quick way to port over pages to a website generated with GatsbyJS.
If anyone knows why GatsbyJS won't serve HTML pages, I would love to hear about it.
How are you using GatsbyJS? Leave a comment below!
Cover image by Andrew Martin from Pixabay
Top comments (0)