How To Deploy a React App on GitHub Pages (Two Different Ways)

Publié le: 12 juin 2024
sur la chaîne: The Common Coder
1,280
37

Let's learn how to deploy a React application on GitHub Pages!

GitHub Pages is a free static site hosting service provided by GitHub. Using it however can be a little confusing when working with a project that requires a build step for deployment (React, Angular, Vue, etc). In this video, we'll walk you through two of the most common ways to deploy your React application to GitHub Pages.

When working with GitHub Pages, there are two main ways to deploy a React based project:

1. Deploy from a Branch: This method involves using a package called "gh-pages" to publish our build output to a special branch on GitHub called "gh-pages". It's quick and straightforward, and perfect for smaller projects.

2. Deploy from GitHub Actions: This method uses GitHub Actions to automate our deployment process through the use of a custom action. This option is more robust, and can help ensure your site is always up-to-date with the latest changes.

We will cover both deployment methods in this video. If you found this video helpful, please give it a thumbs up 👍 and consider subscribing for more web development tutorials!

📺 SUBSCRIBE FOR MORE!
   / @thecommoncoder  
--------------------------------------------------------------------------
✅ PREREQUISETS
Install Git: ➡️    • How to Install Git on Mac and Windows! (Be...  
Create a GitHub Account: ➡️    • How to Create a GitHub Account (For Beginn...  
Setup SSH Keys: ➡️    • The Ultimate GitHub SSH Key Tutorial (Fast...  
Create/Upload a Project on GitHub: ➡️    • How To Upload Your Project on Github Like ...  
How To Use GitHub Pages: ➡️    • How to Use GitHub Pages in 2026! (Beginner...  
--------------------------------------------------------------------------
⏱️ TIMESTAMPS
00:00 - Introduction
00:15 - Prerequisites
00:50 - GitHub Pages Deployment Methods
01:40 - Method 1: Deploy From a Branch
07:31 - Debugging Deployment Issues
10:40 - Method 2: Deploy with Github Actions
20:57 - Debugging Deployment Issues
25:51 - Final Thoughts
26:30 - Outro
--------------------------------------------------------------------------
🌎 CONNECT WITH ME!
YouTube:    / @thecommoncoder  
Facebook: https://www.facebook.com/profile.php?...
Instagram:   / the.common.coder  
X:   / the_common_codr  
LinkedIn:   / the-common-coder  
Reddit:   / thecommoncoder  
GitHub: https://github.com/the-common-coder
--------------------------------------------------------------------------
💰 AFFILIATE DISCLAIMER
Some links in this description are affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you. Your support helps keep this channel running. Thank you!

#thecommoncoder #github #githubpages


Sur cette page du site, vous pouvez voir la vidéo en ligne How To Deploy a React App on GitHub Pages (Two Different Ways) durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur The Common Coder 12 juin 2024, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 1,280 fois et il a aimé 37 téléspectateurs. Bon visionnage!