LearnHow to Deploy a Static Site to Heroku

Andrew Chalkley
writes on February 1, 2016

Share with your friends


Heroku is a hosting platform where you can deploy dynamic applications in Rails, PHP, Node.js and Python web applications.


In order to deploy a site you need a couple of things:

  1. Have git installed
  2. Heroku Account – sign up here
  3. Download the Heroku Toolbelt – a command line application for managing your Heroku account
  4. Run heroku login in your terminal or command prompt and fill in your Heroku credentials

Deploying Your Site

First, you need to navigate to your project in the command prompt.

cd Projects/my-site

If you’re happy with the state of your application – create an index.php file. We can trick Heroku to deploy a static site by including 1 dynamic file.

The index.php file will be served by Heroku before your index.html. We need to make the browser redirect from index.php to index.html. We only need to include one line of PHP code.

<?php header( 'Location: /index.html' ) ;  ?>

Pro Tip: Make sure there’s no spaces before the <?php or else it won’t work!

Then we’ll use the command line tool called git to initialize or create a version of the site you want to deploy. To do that run the command:

git init
git add .

The add . means add all the files to the git repository.

Then you want to commit or save all the changes for your site. With a message describing what you’ve done.

git commit -m "My site ready for deployment."

Now you want to create your site on Heroku. If you’re already logged in (because you ran heroku login earlier), you can issue the following command:

heroku apps:create my-static-site-example

Insert your desired name instead of my-static-site-example.

If the name isn’t taken you can deploy your site using git.

git push heroku master

Once you see “remote: Verifying deploy…. done.”

You can now visit your site at https://<whatever-name-you-selected>.herokuapp.com/ or my example site here https://my-static-site-example.herokuapp.com/.

If you want to add your own domain check out the Heroku documentation.

If you need to, make changes to your site of the following 3 commands.

Add the changes…

git add .

Save the changes…

git commit -m "Add useful message"

Then deploy…

git push heroku master

If you’re new to git or want to get a better understanding check out the Treehouse course Git Basics. If you want to deploy a Node.js application we have a workshop for you too!

20 Responses to “How to Deploy a Static Site to Heroku”

  1. does any know why this is changing some of my css?

  2. Tiffany on May 17, 2017 at 2:19 am said:

    Thank you! That one line of php code is what I was looking for 🙂

  3. I have follows the same instructions but im getting this errors and my page was broken.

  4. Thank you! This really saved me a lot of time today! hero of the day!!!!!

  5. Very nice article. very helpful and easy.

  6. Thank you so very much! It worked!

  7. Very nice article. Helped us to save lot of time. Thanks

  8. Works great! Thanks!

  9. Alexis Williams on September 1, 2016 at 6:39 pm said:

    Thanks for the article. Very helpful and painless!

  10. sam north on April 16, 2016 at 3:14 am said:

    Good advice here that helped me get a site up on heroku. But now my problem is that the part of the site controlled by AJAX doesn’t work. It uses the Flickr API to get the latest photos from 3 cities. Does anyone know how to make this setup work?
    This is the link: https://glacial-journey-83612.herokuapp.com/index.html

    • Alan Hohn on June 14, 2016 at 1:23 pm said:

      Check your JavaScript console. When I visit your site I see an error relating to fetching fonts and jQuery from an insecure (HTTP) location even though your Heroku app is secure (HTTPS). Browser security rules forbid that.

      Just change “http” to “https” for those items in your index.html (and anywhere else) and you should get past this issue.

  11. The free tier on both Heroku and Netlify doesn’t really give you much.

    Neither is very good at hosting large assets (like libraries of videos).


    My vote is for Amazon at this point.

    I’m playing around with Netflix’s open source Spinnaker (but waiting for Azure support):


  12. May be netlify.com could also be a good alternative for hosting static sites.
    incl CDN / free SSL
    Drag’n Drop Interface
    Build and Deploy automatically
    Instant Cache Invalidation

  13. Don’t put large assets into your GIT repository. Host them on a dedicated service like Amazon S3 instead.

    You might also want to look at this buildpack: https://github.com/hone/heroku-buildpack-static

    • Any advice on migrating assets on existing static sites to s3 without manually doing everything? I have a couple of completed sites I’d like to move over from an old host.

  14. How do you suggest dealing with large assets? Git really doesn’t like committing videos

  15. Using a static site generator with a static site host like Github Pages is better suited for static sites. Heroku’s free dyno sleeps after 30 minutes of inactivity and must sleep 6 hours in a day (https://www.heroku.com/pricing).

    I am bit biased though, I have been building https://zammu.in/?invitation_code=TEAMTREEHOUSE which does Automatic builds and deploys of static sites.

Leave a Reply

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more