How to deploy a Simple Static HTML Website on Heroku

Heroku is one of the most popular cloud as a service provider, providing hosting facilities for applications built with technologies like JavaScript, PHP, Ruby and Python only to mention but a few. Heroku unlike most hosting services is relatively cheaper and very easier to get started with.

Heroku image

As a developer, Heroku makes hosting of your demo and enterprise applications fun, as most applications are hosted for free.

In this tutorial, we will discuss how to deploy a simple static html application on Heroku.

To get started the following prerequisites are essential

A Github account with Git installed on your PC

A Heroku account with Heroku CLI installed on your PC

This tutorial assumes that you have the above prerequisites, thus we proceed.

NB: Heroku only hosts and supports applications and not static pages, hence in order to deploy our untended static html page to Heroku, we need to trick Heroku a little into thinking that out website is a PHP application.

Most of this tricks will be performed by punching some Heroku commands on the terminal.

To get started, from the terminal, navigate to the root directory of your static application. In my case, the website I am about to deploy is `Constech`

C:\projects\Constech>

Ensure that you are in the correct directory.

Your website may have some Javascript, CSS and Image files like mine. At the very least it should have an index.html file.

To get started, we will rename the index.html in our website to home.html. This can be done from the terminal using the command

 C:\projects \Constech> mv index.html home.html

To trick Heroku, we will add a single dynamic PHP file, and from this PHP file, call other static html file.

Thus create this single PHP file with the name ‘index.php’ in the root directory of your application. This can also be done from the terminal using the PHP echo command as shown in the code snippet below:

C:\projects \Constech> echo ‘<?php include_once(“home.html”); ?>’ > index.php

The above code snippet will create an ‘index.php’ file and inside this file append the the code <?php include_once(“home.html”); ?>

What we simply did is to server the index.php file first, and then redirect to our static pages.

Next, we create a composer.json file, which Heroku requires of any PHP application hosted on it to have.

This should be created in the root directory of our website. It could be left empty, but in order to avoid some warning from Heroku, we will just insert empty parenthesis {} in this created composer.json file. All this can be done from the terminal using the command:

C:\projects \Constech> echo ‘{}’ > composer.json

This is necessary because:

Heroku PHP Support will be applied to applications only when the application has a file named composer.json in the root directory. Even if an application has no Composer dependencies, it must include an empty composer.json in order to be recognized as a PHP application.

At this point, we can proceed with the deployment process. Most of this will be done from the terminal, so kindly follow along.

We will initialize git in our project using the following command

C:\projects \Constech> git init

Then, we will add all the files to this git repository.

C:\projects \Constech> git add .

Next, we will commit or save all the changes we have made so far our website, with a commit message describing what we’ve done.

C:\projects \Constech> git commit -m “deploying my first static site on heroku”

At this point the only thing remaining is to move these files to Heroku, thus in order to do this, we will login to Heroku from the terminal.

C:\projects\Constech>Heroku login
Enter your Heroku credentials:
Email: <YOUR HEROKU EMAIL>
Password: <YOUR HEROKU PASSWORD>

Now let’s create our site on Heroku. We can do that by:

C:\projects \Constech> heroku apps:create constech-website

Our application name could be any name of choice, if then chosen name have been taken, Heroku will prompt us and we will rerun the command using another name. In a situation when no name was given to Heroku, it creates our application a random name.

Now, after a success creation of our application by Heroku, we will deploy using the command

C:\projects \Constech> git push heroku master

The above command will move our files to Heroku, which will automatically dectect the type of application we deployed, compile it and make it accessible over the internet.

In my case I can view my application live at https://constech-website.herokuapp.com.

If we make changes to the website, just follow the steps above to redeploy the static webite. The redeploy process is summarized in the snippet below.

git add .
git commit -m “A message describing the changes made”
git push heroku master

Hurray, we are done, we have successfully deployed our static website on heroku.

I believe this brief tutorial will be of much help. Do not forget to share this tutorial your friends, follow me on twitter and do visit my corner for more updates.

Don’t forget to leave your comments below, if you have any. Love Leads!!!

This wonderful article was first published on my corner at vivvaa’s corner, you can check it out for other enriching updates.