Building a Resume Website - Push Live Code to Heroku

Quick reference

• 00:05 We've got our website.
• 00:06 It works locally in our web browser here if you're following along using Sublime.
• 00:11 And now we want to actually push this online and make it actually live.
• 00:15 So to do that, you need something called a web host.
• 00:18 And there are zillions of web hosts out there.
• 00:21 I'm going to recommend something called Heroku,
• 00:23 simply because they have a free option.
• 00:25 And we're going to sign up and use the free tier.
• 00:28 But literally, you can use any kind of web host.
• 00:30 And the web host that you use will determine how you
• 00:33 actually push your code up there.
• 00:34 But we're going to use Heroku and that's at heroku.com.
• 00:38 So go ahead and head over there and sign up for a free account.
• 00:40 Now in order to do these we need to download a little piece of software so
• 00:44 that we can connect our Git Bash terminal to Heroku.
• 00:49 And the thing we need is called the Heroku Toolbelt.
• 00:51 Just go to Google and type in Heroku Toolbelt.
• 00:55 And down here, here it is.
• 00:56 It's devcenter.heroku.com/articles/heroku-CLI.
• 01:03 And they have a version for Mac, Linux or Windows, we're on Windows we want this
• 01:07 one, likely you're on a 64 bit machine so go ahead and click that.
• 01:11 Now we could save this anywhere.
• 01:12 I'm just going to save it to my desktop.
• 01:14 And as soon as this downloads, you can click here to install it and
• 01:17 just keeps all the defaults and click next and then go ahead and click install.
• 01:21 Now I'm not going to do it because I've already installed it but
• 01:23 you can go ahead and finish that.
• 01:26 So next, head over to our GitBash terminal and
• 01:28 you want to make sure that you closed this terminal.
• 01:30 Come up here and click the little x and
• 01:33 restart it because it needs to be restarted for the Heroku toolbelt to work.
• 01:37 And make sure you're in your directory, c/basic-html.
• 01:41 And just type in heroku --version, and
• 01:44 if you get anything at all here, it means it was installed correctly.
• 01:50 If you get an error message, it means it doesn't, try restarting git bash.
• 01:53 So now, we need to connect to Heroku.
• 01:55 So type in heroku login, and this will ask you to hit another key so go ahead and
• 02:02 hit enter, and it will pop up your web browser and ask you to log in there.
• 02:05 So go ahead and do that, and
• 02:07 just use whatever email address you use to sign up for heroku, go ahead and log in.
• 02:13 All right, and now you're logged in, go ahead and close that and
• 02:16 head back over the terminal and you could see it says we're logged in but
• 02:18 it's kind of hanging so hit the control and
• 02:20 the C key on your keyboard at the same time to break out of that.
• 02:25 Okay, so now we're logged into Heroku.
• 02:27 Now we need to add our SSH keys.
• 02:29 Remember those SSH keys we created way back at the beginning of the course when
• 02:33 we setup Git in GitHub.
• 02:34 We need to add those to heroku, so type in heroku keys : add.
• 02:40 And it's found our keys, do we want to add them?
• 02:42 Yes, and again it's sort of just hanging so
• 02:45 hit the Ctrl+C keys on your keyboard at the same time to break out of that, okay?
• 02:51 So now, we need to create an app on Heroku.
• 02:55 So type in heroku create, and it's creating an app, and
• 02:59 it's given us this URL.
• 03:01 So go ahead and copy this and head back over to your web browser and
• 03:05 just paste this in.
• 03:07 And you can see, we have this cool little default page.
• 03:10 And that's cool.
• 03:12 And now we need to actually push our code up to Heroku.
• 03:14 But before we do that, we need to make a real quick change.
• 03:17 So head over to our code.
• 03:18 And our index page, we just need to rename it.
• 03:21 And instead of .html, it needs to be .php.
• 03:25 And it's just because Heroku requires PHP.
• 03:27 Now that we've done that, we need to save that change to git, so git add .,
• 03:32 git commit -am changed index to php.
• 03:41 And I git push, push that up to the GitHub.
• 03:48 Now we need to get our code up to Heroku and
• 03:51 to do that we type git push Heroku master.
• 03:58 And this can take a minute or two, sometimes a little longer,
• 04:01 sometimes a little less.
• 04:06 And you can see we're getting a warning, we can kind of ignore that and
• 04:09 it's compressing, launching and it looks like it's done.
• 04:12 So, now we head back over to our web browser to this URL, and
• 04:17 we can click reload, and boom, now this is live.
• 04:21 It's actually online.
• 04:23 Recall now, this is the free tiers, not very powerful, not
• 04:25 very many people can come to this website at the same time before it crashes.
• 04:29 If you want more powerful, you have to actually pay.
• 04:32 But, you know, this is a really nice, just for a hobby project or
• 04:35 a little website like that, completely free, very cool.
• 04:38 Now this is not that great.
• 04:41 It's kind of weird so we can rename that if we want Head back over here and
• 04:45 type in heroku rename and pick a name let's go elders resume.
• 04:51 If it's been taken it'll tell you, hey that name is already taken.
• 04:55 You could see that name is already taken, so rename cool resume I don't know.
• 05:02 Oops, heroku rename coolresume,
• 05:07 that's a very cheesy name.
• 05:12 But okay, now, it's been changed to that so now, we can confirm that by typing in
• 05:16 coolresume.herokuapp.com, and sure enough that works.
• 05:21 Now, you can actually buy a domain name and point it to your Heroku app.
• 05:26 It's really easy.
• 05:27 All you do is head back over to Heroku and login.
• 05:32 And then find your app, here it is, cool resume, click on it, and
• 05:36 then go over to settings and scroll down until you see and domain.
• 05:42 So if we owned coolresume.com, we would just type that in,
• 05:47 click Save and now you're good to go.
• 05:49 Now wherever you bought that resume, coolresume.com, it's called a registrar.
• 05:54 And you'll have to go to your registrar and
• 05:55 ask them how to point the domain name to your Heroku app.
• 05:59 Usually they have a tutorial.
• 06:01 I like Namecheap registrar.
• 06:03 That's where I get all my domain names.
• 06:05 So you could just go to Google and type in namecheap.
• 06:07 And then heroku, and you'll likely find, see right here
• 06:12 a support article showing you exactly how to point your domain name to a heroku.
• 06:16 Every registrar is different.
• 06:17 So I can't really tell you how to do that.
• 06:19 But I mean, this is literally like a half a page of stuff and
• 06:22 it shows you exactly how to do it.
• 06:24 Whichever domain registrar you have, will have a page like this.
• 06:26 That'll explain it.
• 06:27 And it's just that easy, so very cool, very easy to push our code up and
• 06:31 make it live online.
• 06:33 And yeah, that's all there is to it, so in the next section,
• 06:36 we're going to start to look at HTML templates.

Lesson notes are only available for subscribers.