I am currently making a personal portfolio for myself in React. I have some projects I would like to add to my React sites that were created using HTML, CSS and vanilla JS. I'm looking for a way to easily add them into my project. They are not currently hosted anywhere. I know this should be rather simple but I'm not sure exactly how to express what I am trying to do. Any help would be greatly appreciated.
2 Answers
If they were created only using HTML, CSS and vanilla JS, then you can host them at GitHub Pages.
After this, use an iframe element to insert them into your React project.
Comments
I should also add it's also completely free and very easy to host static sites made with html/css/js with google's firebase. I've even deployed a couple production level applications on firebase and the clients have used them for a while without issues. The links to your projects will feel more "professional" if you host them on firebase instead of on github pages in my opinion.
Refer to this to learn how to host your site on firebase. The general rundown though is you log onto firebase with a google account of your choice, create a new firebase project (think of it as an empty space on the cloud to "host" your site), then you install command line tools for firebase (similar to when you first installed git or npm), then use the command line tool to login, select the project you created, initalize firebase in the directory of the react portfolio's index.html that you want to host, then you simply run the command firebase deploy --only hosting. It then tells you the url which your site is hosted.
You can also simply add links to your hosted projects instead of putting their entire page on your portfolio via iframe like was suggested. You could also take some nice screen shots and make a slider to showcase each and provide the link to the actual site on click. Just some ideas.
