How to Host Angular App on GitHub | Host a Website on GitHub Free using GitHub pages (2024)

hello everyone welcome to this video in this video I'm going to show you that how can you actually make your angular application Live on a web for free using GitHub pages so GitHub pages is a feature provided by GI and once they are live we can share their link with anyone on the internet and anyone who visits that link can be uh able to see our work now one question that might come to your mind is what is the purpose of this if we are not uh purchasing a dedicated domain or something so this is usually uh used by some of the Freelancers or uh aspirants uh or recent college graduates just to Showcase their skills just to build a portfolio suppose you're a web developer you want to showcase your skills of a web developer so you can simply build your website host it on GitHub pages and share its link with the world so that they can test what all features you have actually included and that adds The credibility to your resume some uh same thing like this you can make it as a virtual resume to share it with the world so the these are just the few examples let's see how the process is done so actually what do you need to do first for this is you need to have an angular application so in this video I'm going to tell you all the steps that is the first step is how to create an angular application so here uh I have opened the command prompt and I just go to this desktop folder and to create the angular application I run the command NG new demo so the name of my application would be demo and let's just wait for a few seconds uh till this application is created so now the angular application has been created uh once you run this command you would be asked for routing which I selected no and which CSS file uh you wouldd like to use I selected CSS now once you have created the angular application uh we need to go to that particular folder which is demo in our case and just enter this command code dot to open the vs code this will only run if you have vs code available in your system now our vs code will open it may take a few seconds once it opens you need to go to these three dots and click on Terminal and click on new terminal to open up a new terminal once this new terminal opens up uh then what we need to do is we need to run this application just to make sure that we are aware of what we are putting on the internet so for this the command is NGS minus o that is NG serve and minus o is because we want it to open up in a browser once it's done compiling so let's just continue the video when its compilation is done so now uh our app is running and this is how we are getting this is a default angular page for the angular app uh which we don't want to put directly on the internet so let us make some changes to make the changes you need to go to SRC folder uh in SRC you'll get app and in this there is this app. component. HTML folder so let's just remove the content and write a simple uh let's say H1 tag and in this we can write um hello this is a test page that's it once we save it it automatically compiles and we can go to our web page on the port Local Host 4200 to see the changes now once we are happy with the changes we can move on to the next step which is uh pushing our app into the remote repository so for this firstly what we need to do is we need to open our GitHub so let me just quickly open my GitHub so here I'm on my GitHub and uh I'm just going to create a new repository so this also I'm just going to name demo hyphen app uh for me I'm not going to provide any description um the repository is going to be public and let's just create the repository next Once the repository is created we need to upload the files so for this uh what do we need to do is uh we need to run these uh commands that are given to us firstly is get in it so let's just copy it go to visual studio code and get a new terminal over here we just need to uh run this command then uh we had this add read me. M uh MD file which is not needed so let's just run this one first commit okay so these are the changes okay then we run this uh Branch uh then we run this Branch main command to set up the branch next command it asks us is the remote origin and finally it asks us to push these changes so in case you are uh still wondering what is the purpose of these commands so I'd suggest you not to worry because these are the commands that are given to us by the git itself so even if you don't understand it fully that um doesn't matter at this stage but what happens over here is is we are basically creating a branch main to uh actually uh in the remote kit Hub to basically make sure that the changes that we're doing here are available on the remote now once these changes are done we need to run the command to allow us to uh make sure that we are running it on the GitHub Pages the website the app is available on the GitHub pages so for this the command is NG uh small b double hyphen output path uh so this is going to be same the name docs is going to be same then we are going to make some changes over here so you need to write base href and within two slashes you need to write the name of your repository so in our case it's going to be demo hyphen app and you press enter Then it is going to take a few seconds to build this particular uh app so basically it is building our angular app uh to be connected to the demo app repository and after that we will be getting a link through which we can visit this so let's just wait for a few seconds till this gets created okay so now after a few seconds the build has completed and once it has completed you will get to see some of these files so these are actually the build files automatically generated by angular we don't have to change anything over here so now what we need to do is just simply add all these files on the remote repository so the command is get add dot for all these files then we do a get commit so get commit and the message is let's say V are live something like this then finally we do a get push now this is going to take a few seconds the changes have been pushed to GitHub now what we do is we go back to our GitHub uh we refresh this page then what we need to do is we need to go to settings to get the URL or the link uh where from which we can access our uh website so in the settings we need to go to pages so okay it's going to take a few seconds to show it up over here uh so let's just wait for a few seconds and after a few seconds you will get the link over here and we will continue the video once we get the link now once you have done the changes uh or seen the changes in your profile then what you need to do is uh you need to come back to your demo app repository go to settings again in this and here again there is this Pages option so once it asks you for Source uh you just select deploy from a branch in the branch select uh your branch name which is Main and instead of the root folder just select the docs folder and click on Save now once you do that then uh if you want any custom domain you can just add the custom domain otherwise a default domain would be provided to you so that is also going to take a few seconds so let's just wait for that much time and then we will show you how your website is going live now once your website is uh deployed you will get this message that your site was last deployed to the GitHub Pages environment so once you click on this GitHub Pages you will get the link uh so uh once you click on this link you will get that your website the exact content that you uploaded is now available on the website now uh you can share this link to anyone you can add it to your LinkedIn profile to your social media anywhere and anyone who has access to the internet can access this link and view your website this can act as your portfolio this can be used to Showcase your skills and for many other countless reasons so uh uh what happens if you want to make any changes to it so let us just make a uh normal change let me just change it like this I saved the change I deployed this uh basically I committed the change so the commit message is going to be change okay and we push this change to the remote repository now let's see what happens if we come to the website we refresh it then you can see these changes are automatically live so that's it for this video thanks for watching

Channel: ProgrammingKnowledge

Views: 1,565

Keywords: How to share angular project on GitHub?, How to create an angular app GitHub?, How do I publish using GitHub pages?, How to deploy a angular application?, How to publish Angular library to GitHub?, How to push Angular project to GitHub from Visual Studio Code?, How do I run an Angular project online on GitHub?, How do I run an Angular app downloaded from GitHub?

Id: IxIYO74kUVU

Length: 9min 49sec (589 seconds)

Published: Thu Apr 11 2024