Responsive Portfolio Website Project

Responsive Portfolio Website [7] – Website Deployment

alright guys so we're going to deploy this website to github pages so github pages allows you to basically host any static site for free can also host react

client-side apps or angular client-side apps just anything that is that doesn't have a back-end or a server and it's free it gives you HTTPS it's it's just a really cool service so in order to do

this we have to push to a repository we're also going to install a package using NPM called gh-pages which gives us kind of a terminal CLI to deploy our application so first thing let's create

a repository so in github just go to new repository I'm gonna call this modern portfolio and will say responsive portfolio website let's create it and I've already done the init I've already

added my stuff and done my commits if you haven't done that already then you want to first initialize actually first of all create a git ignore a dot get ignore file and add

node modules ok once you do that you can get an it which will create a repository a local repository then you want to get add all ok add dot and then you want to get about fit get commit dash em and

then just whatever you want say initial commit or something like that once you do that you have it in your local repository now what you want to do is add github as a remote so if we go back

to that page here it gives us the command to put in just get remote command so let's grab that let's go back and paste that in ok we shouldn't get any response it's just gonna go to the

next line let's go back again and let's push so this is the basically the initial push to the master branch so let's go back and paste that in and run it and it should push okay if you don't

have your SSH keys set up go ahead and do that I have a video that I did about two weeks ago or so called SSH crash course and some DevOps and in that video I show you how to

create SSH keys as well as add them to github or you can just use HTTP however you want to get your repository up so if I reload this page you now have our repository we can

dismiss this that's not this is nothing so let's say risk not tolerable whatever it doesn't matter so now our project is here now to deploy it we're going to install something it's called gh-pages

so let's say npm install righ – pages and then we want to go to our package JSON file and we want to add here anywhere in here let's go right below main and let's add in home page and you

want to put HTTP our HTTP actually and then your github username so mine is Brad Travis II it's not Thomas II can't spell my own name that's embarrassing so dot

github dot slash and then the name of the repository and in my case I said modern underscore portfolio okay so that's gonna be my home page now we want to do

is create a deploy script so just like we have this a script let's go ahead and put a comma here and let's say deploy so for deploy we want to run gah – pages actually this needs to be in quotes so

gah – pages and then we want to add the D flag and then the directory so – D and the directory that we want to basically deploy – that we want to be our website is the dist folder or the dist directory

okay so we want to put that in there so let's save this and let's go down here clear this out and let's run NPM run deploy and hopefully this works okay so we get published but we should have got

some other stuff I believe let's just try it out so we'll go HTTP ass yeah let's say Brad traversée can I spell my name right this time Brad Travis e-dot github dot modern

underscore portfolio and there we go so our application is now live and let's just test things out so we have our home page we have our boat page my work and how to reach me

cool I'll test the responsiveness l which should be no different just because it's remote but we'll just test it oh good everything is stacked alright so we have this now deployed to the

internet now if you don't want to use this domain right here you can go to your Prada repository and you can go to settings and go down to where it says domain our custom domain and you can add

in a domain now obviously you have to register this domain so what I suggest for registering domain is Namecheap not named chap Jesus I cannot spell today so I bought that guy's so namecheap.com

domains are very cheap so this is where I register all my domains and if you follow the instructions whereas it's right here learn more it's going to show you how to basically point your domain

to github and then you can use that as opposed to your github io whatever but I'm not going to go through that I just wanted to get it on the Internet another thing you could do is use manage

hosting I like in-motion hosting com I actually have a video if you search for cPanel on YouTube it's like the fifth fourth or fifth video by traversing media obviously and we go through we

sign up for an account we hook up a website we add email accounts we add FTP all that stuff and I'm going to put a link in the description for in motion that actually has my affiliate so if you

guys do decide to go with in motion and use that affiliate I'd appreciate that but I have actually have a website with them a shared home account under code demos comm as you can

see there's nothing here so if I wanted to open up an FTP client like filezilla and connect to it so my host would be code demos comm and my username is code demos and password and connect and let's

go into the public HTML that's our web site root and then all I would have to do is grab my files let me grab those real quick so if we go to let's see where is it I'm just trying

to find the project that we just created where the hell is it let me just search for it real quick and you guys can't see this it's off screen let's see Modern Portfolio alright here

it is so this is our project and again the dist folder is what you want to upload so everything in the disk for let's just go ahead and let's grab everything in

here and let's drag it over and shouldn't take long at all so you can see right here things that are getting uploaded and it should now be uploaded so I'm gonna go back over here and

reload and there we go so now we have code demos uploaded to in motion so you have a lot of a lot of ways to deploy especially a static website it's very very very simple net Liffe is another

good choice there's a lot of them out there and there's a lot of managed hosting like hostgator but i like in motion it's cheap you can see 6:39 for a business account including you and you

know an email server stuff like that I believe they include a domain as well looks like they're giving free SSL's now I wasn't aware of that so unlimited disk space and so on so I will put a link if

you if you're interested in in motion and then again github pages is completely free but we do have two deployments now so you can see it's pretty easy and I think that's gonna be

it guys that's it for this this little series I hope you liked it I know some things may not have been clear especially if you're just getting into sass I know there was a couple little

times where I could have explained things a little better and I apologize for that it happens but hopefully overall you like the series if you did please leave it a like and thanks for

watching guys

In this video we will deploy to Github Pages using the gh-pages package. I will also upload to my shared hosting account with InMotion hosting. If you would like to try InMotion, please use my affiliate link below…

INMOTION HOSTING AFFILIATE LINK:
http://inmotion-hosting.evyy.net/c/396530/260033/4222

Code For This Project:
https://github.com/bradtraversy/moder…

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia