DEPLOY YOUR STATIC WEBSITE ON HEROKU

HOW TO DEPLOY YOUR STATIC WEBSITE ON HEROKU

Before starting this tutorial I may first tell you what is “Heroku”? Heroku is a cloud platform service where we can easily upload our apps which support multiple programming languages. In the beginning heroku only supported Ruby language but after that it has given support for different languages like Php, Python, Node.js, Clojure, Scala and Go. Heroku uses git repositories to deploy apps on web. After deploying your app on heroku you will get a link which would be your application domain that would be like this:

“applicationname.herokuapp.com”

In this tutorial I will teach you how to deploy your simple static Html, Css and JavaScript website or any other simple JavaScript application.

What are Git and GitHub?

To get started we must first know what Git is. Git is an open source version control system. Git is distributed revision control system which is very fast and lightweight tool. Git was developed by Linux kernel developers in 2005.

Now to our next tool which will help or we can say is mandatory in deploying our app is GitHub.

GitHub is web based tool for hosting our Git repositories. GitHub provides all the distributed revision control and source code management (SCM) features of Git as well as adding its own features with its user friendly interface. GitHub also provides desktop application service for Git and also supports mobile integration. GitHub is open source tool means its services are free for those developers who will deploy their public repository which anybody can access and download. For private repositories you have to buy premium features but their cost is also very convenient. So both Git and GitHub are powerful tools which are very essential in developing our software projects in teams so that multiple team members can work parallel on one project without creating conflicts.

Getting started

Here, first of all I want to tell you that heroku only hosts apps built on above mentioned programming language, not static websites. Here in this tutorial I will show you the trick that will make heroku understand that your static website is a PHP app just by using a single php file to do the trick. So on heroku now you can post your personal blog, a simple demo of your website for the client to see or your static portfolio.

So here we go now…

Uploading Working Repository on Github:

First of all you will need to create account using your email address on Heroku.com and Github.com. I assume you have already made the account on both platforms.After creating account you must download Git Bash from the following link:

https://git-scm.com/downloads

After installing git Bash go to command shell or Window command prompt (cmd.exe) to access git commands. Change the working directory to your website root folder.

And write the following command:

git init.

Here your initial repository is created. Then you will write:

git add .

git commit –m “Your Message”

Now all the files in that folder are staged in your repository. I assume your work is final now so we will just push it to remote github repository. Here I tell you how:

Go to http://github.com.

Click on create new repository button a ‘plus’ sign on the top of the website.

Write down the Repository name as you wish then click on the Create Repository button. Then Copy the URL of the repository from here following url address is just for sample your url would be different:

Now go back to Command window and type the following code:

git remote add origin “provide url without quotes”

git push -u origin master

Now enter your username and password of Github account so that working directory will be pushed on github repository. Now your whole project is on github.com and you are good to go on posting your first html5 and JavaScript app on Heroku.

Creating Heroku App

First of all download Heroku Toolbelt for windows from: https://toolbelt.heroku.com/ and then install the program. After installing go back to command prompt but wait if you don’t have Heroku account you must create an account using your email id first. Also when creating account I have selected php file because we will run our html5 app using php.

Here I will assume your project will just contain Html, Css and JavaScript files along with the images and other stuff. Here we don’t have any database or other fancy stuff in our application.

I hope you have created your account now we will then go to command prompt and write.

heroku login

After entering your credentials i.e. Heroku email and password now you have to perform some git commands on the command prompt.

Now go to your root directory of your working repository in command prompt and write:

touch Composer.json

Composer.json basically helps heroku to understand that the project or any website you are deploying is a php project. So in short the composer.json is just the indicator.

After doing this you will see that a new file json file will be added to your repository. See git status by writing git status command and it will show you composer.json as your non staged file so for that you have to type

After making composer.json file you will open that json file on notepad and just type:

{}

After this Now type:

touch index.php

a blank php file will be created and the important thing is that you have to rename your main html file (e.g. index.html) file to home.html, keeping in mind the new files are created or modified you have to again stage them on both repositories i.e. on remote and locally. In my directory the file was saved as index.html so I changed its name to home.html. Now open your index.php file and type the following code or just copy from here.

<?php include_once(“home.html”); ?>

Now you have to write again write

git add . 

After adding files on git now you will write

git commit –m “another message” 

here your all files are staged and you are ready to push it remote repository by typing:

git remote add origin “provide url of repo without quotes”

git push -u origin master

Now we use heroku commands to upload the repository on heroku web app.

First of all I hope you had login the heroku earlier and now you will just type:

heroku create “your app name without quotes”

So we have just deployed a dummy web app on Heroku and git remote called heroku is also created in the repository.

But wait not so fast we haven’t pushed the files on the remote Heroku. So now we must write the following command to push the git repository on Heroku.

$ git push heroku master

Application is now deployed. To check that only one instance is running type the following code on command line.

$ heroku ps:scale web=1

Hurrah! you have successfully deployed your first static website based on just Html, CSS and JavaScript and no other thing. To check your web application type the provided url earlier on your browser or just type heroku open on command line it’s a shortcut and will directly open the web app on the browser.

$ heroku open

In this tutorial we have learnt how to deploy our web app on heroku using github.com. We can easily deploy our static website on it by just creating composer.json and index.php file and just write single line of code in our php file as told earlier in this tutorial. With the help of this tutorial you have got an overview of github and you will be frequently using the github in deploying your apps on heroku.