Building a Templated Website - Push Live Code to Heroku

Locked lesson.

Upgrade

About this lesson

Push our code to a live production server at Heroku.

Exercise files

Download this lesson’s exercise file.

Building a Templated Website - Push Live Code to Heroku.docx
60.5 KB

Quick reference

Building a Templated Website - Push Live Code To Heroku

Now that our new Resume app is finished, save your code to git, push it to github, and then push it to Heroku.

When to use

You'll want to save your code to git often, but this was a short project so we can wait till we're finished.

Instructions

Since this is a new project with a new workspace, initialize git again:

  git config --global user.name "Your Name"
  git config --global user.email "Your Email"
  git config --global push.default matching
  git config --global alias.co checkout
  git init

Then login to github and add your keys if you haven't already:

  cat ~/.ssh/id_rsa.pub

Then create a new repository at github.

Save your code in the terminal:

  git add .

  git commit -am "initial commit"

Then push your code to github.com with the instructions they gave you when you created your repository.

 

Push Your Code To Heroku

Log in to Heroku from the terminal:

  heroku login

Add your SSH keys:

  heroku keys:add

Create an App:

  heroku create

Rename the index.html file to index.php, then save your code to git again (push to github.com)

Push your code to Heroku:

  git push heroku master

Finally, rename your app if you like:

  heroku rename ENTER_NAME

Hints & tips

  • Be sure to initialize git again since this is a new workspace.
  • You probably don't need to add your SSH keys to github again.
  • Don't forget to rename index.html to index.php for Heroku.
Login to download
  • 00:04 Okay, so we're basically done.
  • 00:06 So in this video I want to review saving all this stuff to git and
  • 00:09 pushing it up to Heroku one more time.
  • 00:12 And it's kind of important to go over this again because it's a lot to take in
  • 00:15 the first time.
  • 00:16 Head back over to our terminal.
  • 00:18 I'm going to assume you're running the terminal and
  • 00:20 make sure you're in your resume folder.
  • 00:23 It has all of our files and stuff or whatever you called it.
  • 00:27 And we need to setup git again.
  • 00:29 Because we're in a different directory, we've created a different project,
  • 00:33 we need to reinitialize git for this directory.
  • 00:36 So, go through the steps again, exactly the same to initialize git for
  • 00:41 the first time.
  • 00:41 So git config --global user.name and
  • 00:47 then your name, and then git config --global
  • 00:53 user.email and then your email.
  • 01:01 Git config --global push.default matching,
  • 01:09 git config --global alias.co
  • 01:14 checkout, and then git init.
  • 01:20 All right so we see we're on our master branch here.
  • 01:23 So now let's save all of our files.
  • 01:26 Let's go git add period
  • 01:30 Git commit -am 'initial commit'.
  • 01:37 And now we need to add a repository to our GitHub account.
  • 01:41 So log into your GitHub account, and click on Repositories, and New.
  • 01:48 And let's call this resume-template.
  • 01:55 And then we need to, as you remember, copy these and paste them into our terminal.
  • 02:03 Boom.
  • 02:06 And then finally git push -u origin master, copy and paste.
  • 02:14 Boom, boom, boom.
  • 02:16 Okay.
  • 02:17 Now, in order to push this to Heroku,
  • 02:19 we have to go through all the steps to connect to Heroku again, so Heroku login.
  • 02:29 Hit any key to open the web browser, log in with your credentials,
  • 02:33 already logged in.
  • 02:35 I've already been logged in so, just remember them.
  • 02:37 But if you haven't been logged in in a while you'll have to type in your login
  • 02:40 credentials again.
  • 02:42 So head back over here and remember Ctrl+C to break out.
  • 02:46 Now we don't have to add our keys again because we've already done it earlier, but
  • 02:51 if we did you would just type heroku keys:add.
  • 02:53 But like I said, we've already done that so we don't have to.
  • 02:56 So now let's heroku create to create a new app.
  • 03:01 And here's our app right here.
  • 03:05 So we can right click and copy, and head over here and paste.
  • 03:12 So next, head over to our app, and remember we have to change the index.html
  • 03:17 to index.php whenever we're dealing with Heroku.
  • 03:21 And then after we do that we need to save that change to git so
  • 03:27 git add period, git commit -am added php to index file.
  • 03:34 We can git push to push this, and then finally git
  • 03:39 push heroku master, push it up to Heroku.
  • 03:47 And remember this could take a minute, could take five minutes,
  • 03:49 it could take 30 seconds.
  • 03:51 It looks like it's taking 30 seconds, very nice.
  • 03:54 We get that warning again, we can ignore that.
  • 03:57 It's normal to get warnings and stuff.
  • 03:59 You can read through that if you want, but not important.
  • 04:03 Okay, so it looks like we're done.
  • 04:05 Head back over here and click reload.
  • 04:06 And boom, we're live.
  • 04:09 Now we have this weird URL, if you want you can change that.
  • 04:13 I'll just type in heroku rename neweresume.
  • 04:22 All right, looked like that worked.
  • 04:24 So we can type in neweresume, not much better, but it still worked.
  • 04:30 So pretty simple, very cool.
  • 04:34 And I think that's it for the course.
  • 04:36 So my name is John Elder, and thanks for watching.

Lesson notes are only available for subscribers.

Gift this course