Host static website on heroku

3 min readOct 2, 2020

What is Heroku?

From Heroku’s official website — “Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.”

Heroku is basically a hosting platform, which supports/deploys dynamic applications which are written in a variety of programming languages like Php, Rails, NodeJs, Python, Scala, Go, Java and many others.

I would strongly prefer the heroku for the purpose of demoing your projects/sites.

Drawback of Heroku

Heroku doesn’t deploy the static website or pages. So, to do that we need to trick the heroku by creating our static website into a php project. (Or you can create into a NodeJs Project, as well)

Prerequisite

Install Git:

sudo apt install git

Configuring Git:

git config --global user.name "Your Name"
git config --global user.email "youremail@yourdomain.com"

Install Heroku:

sudo snap install --classic heroku

Now we’re almost ready to host our first static site on heroku, from our local machine.

Let’s make our Project ready to Host

Be sure, that you are inside your project’s root directory. Now, Create a Php file named, index.php and paste the below line in that file.

<?php include_once("home.html"); ?>

Now, heroku will first serve our index.php file, which will redirect us to our home.html

But, to run the Php project on Heroku we would need another file, called composer.json which will also take place in project’s rood directory. We can simply leave this file as blank. But I would suggest to put blank object {}, instead. Otherwise, you may get some warning messages from Heroku.

Now, your project’s root directory will look something like below.

Before move forward to hosting I want to quote some lines from Heroku’s official website, it’s about our composer.json file.

WHY, composer.json is required?

The 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 at least an empty ({}) composer.json in order to be recognized as a PHP application.

Let’s Host the Site 🚀

Initialise GIT inside project folder.

$ git init

Add your file change to git repository.

$ git add .

Commit your changes & give an appropriate message.

$ git commit -m "Deploying static site on heroku"

After all above exercise, you just need to login to Heroku from your terminal.

$ heroku login

After running this command, you will get below screen.

After successfully login, now you can create a project on heroku by running the below command, from your terminal.

$ heroku apps:create static-site

You can choose any name, whatever floats your boat. But make sure, site-name shouldn’t contain blank space.

If your site-name isn’t already taken on Heroku by someone else, you can deploy your app by executing the following command.

$ git push heroku master

Once you will get this below message on your terminal, You rock! you’ve successfully deployed your static site on heroku server.

Success message on terminal. Credit

Now, you can visit your site at https://static-site.herokuapp.com

Hope you guys find this article helpful. I’ve tried to explain in the easiest & simplest way I can. But If still you have any doubt, feel free to drop a comment. Thanks for the reading.