Search code examples
javascripthtmlreact-reduxgithub-pages

Site coded in React, displaying blank page on GitHub Pages


I have received code from a friend to be able to use as a template for my portfolio website. The website is coded in javascript, react, html and css.

I uploaded the code to a repository on GitHub to see what it looks like. I have published the website at ruben-olmos.github.io. However upon navigating to the website address all I see is the meta data in the tab and a blank page. It seems that the index.html file is read but the rest is not. I think this might have to do with the fact that it was coded in javascript.

The javascript portion of the code does not seem to be read by the site. I have gone through the code and everything seems to be fine with the code. Here is a link to the repository. https://github.com/ruben-olmos/ruben-olmos.github.io.

I have previously launched websites but they have not given me this problem. Any ideas?


Solution

  • Your friend may not have done you a great favor.

    React code is not immediately uploadable; it must be processed by a packaging system (like webpack or parcel) where the javascript code creates the HTML/CSS that is then rendered onto the web page. Usually, it is used in tandem with a GIT (code versioning) system.

    The advantage of React (as the name suggests) is that this coding system (intended for collaborative (group/team) coding) can react quickly and efficiently to multiple streams of data happening in multiple places on a web page. The disadvantage is that it is not your grandmother's html/css/js Notepad++ coding template. Learning react is not rudimentary - it takes time and effort.

    If you are looking to become a professional developer and wish to study one of the hottest, most advanced development systems currently in use, by all means dig into React or Angular or Vue or etc. But don't expect it to be a quick study, or to have a great portfolio website in a few hours or days (unless, of course, you have a React adept sitting beside you and guiding you through the learning process).

    But if you want a quick, free, website template, may I suggest that you look at the much simpler Bootstrap templates on W3Schools. The Company Theme tutorial takes about 20 minutes to complete and an hour or two to customize into a final product.

    By contrast, you could spend many days (MANY days) learning React.


    Update:

    Here is an article that may help you understand some of the javascript concepts to brush-up on before jumping into React:

    https://blog.logrocket.com/javascript-concepts-before-learning-react/