So last week I covered trying to host my portfolio on GitHub pages with limited success. This week I am happy to say that I tried something different, and my portfolio is now successfully hosted on GitHub pages! 🥳
I last left off waiting for my portfolio to hopefully show up, instead of the readme file; alas that dream didn’t come true at the time. So more research (i.e. ‘Googling’) was needed.
Thankfully, I found another article that did the trick! I cannot say thank you enough to Chris Achinga for writing this article! It allowed me to stop pulling out my hair and wondering why it wasn’t working, to actually see my hard work turn into results!
There were a few differences in this article that weren’t in my initial approach, however, a lot of the steps are largely the same. But we all know it’s those small differences that can make the difference between something working and not working.
All credit for these below steps goes entirely to Chris; I just followed along. So let’s get to it and cover his steps below:
- Install the gh-pages package as a dev-dependency of your application
npm install gh-pages --save-dev - Define your homepage in package.json
“homepage”: “http://{username}.github.io”Note: be sure to use your GitHub username at {username} - Add a predeploy and deploy script in package.json under “scripts”
“predeploy”: “npm run build”,
"deploy": "gh-pages -d build" - Deploy your application!
npm run deploy - Commit these changes and push them up to GitHub!
git add .
git commit -m 'gh-pages deploy'
git push
Congratulations!! Your React application should now be able to be viewed on your homepage URL!!
With this set of steps, we don’t have to create a whole separate branch and then set that new branch as the source for our page. Instead, we installed the gh-pages package and committed the deployed application to our GitHub. Overall this seems to be a simpler process that was much more straightforward, and for me, this was ultimately worked in being able to deploy my portfolio!
