Zero to Heroku
Zero to Heroku

From Zero to Heroku in Three Posts, Part 2

So you have made it through From Zero to Heroku in Three Posts, Part 1 and you are still here! If you haven’t, it was a 1000ft view of Heroku, the platform we will be working on in this post series. If you already know Heroku, you should be good anyway. Let’s get started with making a personal page. Please note, this tutorial assumes you know how to make a website with HTML, CSS, and Javascript; otherwise this series of posts would become way too broad.

So first thing is first:

  1. Sign up for Heroku! No cost and only a minimum amount of forms to wade through makes this is one low barrier of entry.

    Heroku Sign Up Page
    Single field forms? Yes please!
  2. Grab the Heroku Toolbelt for your operating system. This little command line tool provides a powerful utility for managing your instances.
  3. Download Git if you don’t already have it. This is used to push your changes to Heroku. Due to wide range of options and preferences, I can’t give a one-size-fits-all recommendation. I am going to assume that you can access your Git tool for the command line for the rest of the post.
  4. Download my server app from github. Simply open your command line and navigate to where ever you want to put the folder, then run git clone git@github.com:Bobnix/static-nodeku.git
  5. Navigate to the static-nodeku directory you just created.
  6. Run heroku login and login with your account credentials.
  7. Run heroku create. This will create an instance in heroku and set up the related Git information for you. It will spit out a phrase in the form of WORD-WORD-NUMBER. Take note of this phrase.
  8. Run git push heroku master. This pushes the code from your computer to heroku.

Thats it! You now have a live site, let’s take a look at it by going to https://THE-PHRASE-FROM-STEP-7.herokuapp.com/….

Hello world
Humble beginnings

Well, that is a bit bare. Lets fix that. Because there are so many ways to go about doing this, actually making the site will depend heavily on how you are comfortable working. I personally use Notepad++ or Sublime on windows. Some of the more seasoned may breakout VIM or Emacs. Others may turn to WISIWYG editors. The only rule (for now) is that your site stays contained within the site folder in the server app.

Once you are done with your edits:

  1. Commit your changes by running git add . then git commit -a -m "YOUR MESSAGE HERE"
  2. Run git push heroku master again.
  3. After a few seconds, verify your changes.
Personal page
Now that is more like it

If all goes well, your site should reflect your changes. Keep revising untill you are satisfied, there is no penalty for the indecisive. The third and final post will go into some more optional pieces. If you don’t feel like registering a domain name (that will cost money), feel free to spread the link to where ever you want it to appear.

Leave a Reply

Your email address will not be published. Required fields are marked *