How to Deploy a Static Website to Heroku

Aditya Niloi

Follow

Aug 30, 2017 · 3 min read

What is Heroku?

Heroku is a hosting platform where you can deploy dynamic applications in Rails, PHP, Node.js and Python. If you don’t want to pay for cloud storage and don’t mind your site being ‘asleep’ during inactive hours, Heroku is a great platform for demo-ing your projects online.

Why do this?

Heroku hosts apps on the internet, not static websites. In order to run our static portfolio, personal blog, landing pages, etc., we need to trick Heroku into thinking our website is a PHP app. Most of it can be done in the terminal. I will show you how in this tutorial.

Before we get started:

1. Have git installed — Click here if you need help
2. Sign up for a Heroku account
3. Download the Heroku CLI (Command Line Interface) — Allows us to manage our Heroku account from the terminal

Let’s begin:

Go into the root directory of your project. Check and see that you are there.

$ cd projects/my-portfolio-page
$ pwd
/path/to/project/

Your site may have some Javascript, CSS and Image files. At the very least it should have an index.html file. We are going to rename that file to home.html .

$ mv index.html home.html

We can trick Heroku into deploying our static site simply by adding one dynamic file. Create a new file called index.php in the root directory, and write the following line in the file: <?php include_once("home.html"); ?> . We can do this with one line in the terminal by using the echo command.

$ echo '<?php include_once("home.html"); ?>' > index.php

The index.php file will be served by Heroku before our home.html. We need to make the browser redirect from index.php to home.html.

Next, create a composer.json file in the root directory and write the following line in it: {} . Again, we can do this with just one line in the terminal.

$ echo '{}' > composer.json

Here is why adding composer.json is necessary:

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.

If you are happy with the state of your application we can begin deploying to Heroku. First, lets use git to initialize or create a version of the site we want to deploy.

$ git init

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

$ git add .

Next, we will commit or save all the changes for our site, with a message describing what we’ve done.

$ git commit -m "deploying static--err, dynamic site to heroku"

All that is left to do is push all our files onto the Heroku platform. To do that, we first need to login to Heroku on our terminal.

$ heroku login
Enter your Heroku credentials:
Email: <YOUR HEROKU EMAIL>
Password: <YOUR HEROKU PASSWORD>

Now lets create our site on Heroku. We can do that by:

$ heroku apps:create my-portfolio-page

Note: You can name the app whatever you want; it doesn’t have to be my-portfolio-page . Make sure there are no spaces in the name.

If the name isn’t already taken, we can deploy to Heroku with:

$ git push heroku master

Once we see remote: Verifying Deploy...done. , we can visit our site at https://my-portfolio-page.herokuapp.com .

If we want to make changes to our app, the following three commands will allow us to re-deploy:

$ git add .
$ git commit -m "A helpful message"
$ git push heroku master

Note: Make sure you are always in the root directory of your site by typing pwd in the command line.

Additional Resources:

• Using the Heroku CLI
• Deploying PHP Apps on Heroku
• If you are new to git this guide and this course are two of the best around to help get you familiar
• If you want to give your app/site a custom domain name, follow this guide
• Use Name and Namecheap for finding great deals on domain names

I hope you find this article helpful. Thank you for reading, and git to deploying!