问题
I have a simple project working nicely using JSX / React / Gatsby.
I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.
I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.
I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX? Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure? Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?
Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?
回答1:
That totally works! Just make sure not to create another page within Gatsby that overwrites your page :-)
回答2:
As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static
folder.
According to the docs, the /public
folder is meant to be generated automatically when building the site and should be added to .gitignore
.
Files added to the /static
folder will be copied to /public
when building the site so it should have the same effect. More info here.
来源:https://stackoverflow.com/questions/50895443/fastest-way-to-add-pre-existing-static-html-page-to-a-react-gatsby-site