Fastest way to add pre-existing static HTML page to a React/Gatsby site

拈花ヽ惹草 提交于 2020-03-18 05:14:08

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!