Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to deploy a static website to Heroku

Gist

This is a quick tutorial explaining how to get a static website hosted on Heroku.

Why do this?

Heroku hosts apps on the internet, not static websites. To get it to run your static portfolio, personal blog, etc., you need to trick Heroku into thinking your website is a PHP app. This 6-step tutorial will teach you how.

Basic Assumptions

  • You want to deploy some straight-up HTML, CSS, JS, maybe a few images. Nothing fancy here.
  • You are in the root directory of your site (i.e. the directory that contains all subdirectories and files for the site)
  • The root directory contains a main HTML page, e.g. index.html
  • A Heroku app and remote are set up and ready to go

Steps

  1. Add a file called composer.json to the root directory by running touch composer.json
  2. Add a file called index.php to the root directory by running touch index.php
  3. Rename the homepage (e.g. index.html) to home.html
  4. In index.php, add the following line: <?php include_once("home.html"); ?>
  5. In composer.json, add the following line: {}
  6. Run git push heroku master

Done! Visit your deployed single-page website, hosted by Heroku (as a fake PHP app ☺).

@toy5429274

This comment has been minimized.

Copy link

toy5429274 commented Aug 13, 2015

Work perfectly..Thanks

@aliciatb

This comment has been minimized.

Copy link

aliciatb commented Aug 16, 2015

that's awesome! thanks, and now I can add PHP to linked in. thank you again!

@lovebdsobuj

This comment has been minimized.

Copy link

lovebdsobuj commented Oct 20, 2015

Hi Whitney,
Can you help me, after deploy a project by following this method, how can I update my deployed website page?

@lovebdsobuj

This comment has been minimized.

Copy link

lovebdsobuj commented Oct 20, 2015

I found my solution, thank you.

First need to confirm current branch is master.

git branch

If the pointer is not pointing the master, then check out to master branch

git checkout master

Commit changes and try to push to heroku

git commit -am "Updated!"
git push heroku master

@arminsebastian

This comment has been minimized.

Copy link

arminsebastian commented Oct 23, 2015

pretty useful thanks!

@fajarmdi

This comment has been minimized.

Copy link

fajarmdi commented Nov 13, 2015

Awesome Thanks ... !!!

@manueldelreal

This comment has been minimized.

Copy link

manueldelreal commented Nov 15, 2015

works like a charm, thanks @wh1tney

@arangates

This comment has been minimized.

Copy link

arangates commented Dec 5, 2015

why iframe is not working ??....instead of displaying frame ,it just displays blank space....works when i open the file locally ..pls help !

@eriknguyen

This comment has been minimized.

Copy link

eriknguyen commented Jan 20, 2016

Awesome. Thanks alot 👍

@dwayne

This comment has been minimized.

Copy link

dwayne commented Feb 12, 2016

Thanks. And, here it is scripted:

$ echo '{}' > composer.json
$ echo '<?php include_once("home.html"); ?>' > index.php
$ mv index.html home.html
@murtaza13

This comment has been minimized.

Copy link

murtaza13 commented Mar 30, 2016

I am constantly having the error of "Failed to build"

@murtaza13

This comment has been minimized.

Copy link

murtaza13 commented Mar 30, 2016

I have followed all the steps mentioned above.

@shahadatthequint

This comment has been minimized.

Copy link

shahadatthequint commented Apr 27, 2016

Greats thanks

@libinbensin

This comment has been minimized.

Copy link

libinbensin commented May 29, 2016

Perfect. Thanks

@okay

This comment has been minimized.

Copy link

okay commented Jun 10, 2016

Thanks! :)

@obinetbits

This comment has been minimized.

Copy link

obinetbits commented Jun 26, 2016

worked thanks

@KVanSant

This comment has been minimized.

Copy link

KVanSant commented Jul 21, 2016

Found this through a Google search and it worked great for me! Thank you so much.

@StefanWallin

This comment has been minimized.

Copy link

StefanWallin commented Aug 17, 2016

Was using this via a Heroku Deploy button and needed to add this app.json:

{
  "formation": {
    "web": {
      "size": "free"
    }
  }
}
@devspider44

This comment has been minimized.

Copy link

devspider44 commented Aug 26, 2016

savior. Thanks.

@kfwebdev

This comment has been minimized.

Copy link

kfwebdev commented Sep 13, 2016

this worked beautifully, thank you!

@cloverharvest

This comment has been minimized.

Copy link

cloverharvest commented Nov 8, 2016

Thanks! Worked well!

@gamg

This comment has been minimized.

Copy link

gamg commented Dec 17, 2016

Css do not work, how do I?

@axjimenez89

This comment has been minimized.

Copy link

axjimenez89 commented Dec 24, 2016

CSS is not working anymore! any suggestions?

@summerpratt

This comment has been minimized.

Copy link

summerpratt commented Jan 26, 2017

My JS doesn't work anymore... any ideas?

@uxdiva

This comment has been minimized.

Copy link

uxdiva commented Jan 30, 2017

You are awesome!!! Thank you! 💃

@aleks-qq

This comment has been minimized.

Copy link

aleks-qq commented Mar 2, 2017

This didn't work for me for some reason. I had to use

<?php include_once('./home.html'); ?>

@explorer291

This comment has been minimized.

Copy link

explorer291 commented Mar 8, 2017

Deployed PHP app on Heroku using the default repository. Overwrote the defult composer.json After making added the content for mysite to the "web" folder in the defult heroku app, needed to run the following:
git add . git commit -m "test commit" git push heroku master

@mistermappy

This comment has been minimized.

Copy link

mistermappy commented Mar 15, 2017

Hi. Trying this out. I keep getting the " ERROR: Could not parse 'composer.json'; make sure it's valid!" Anyone have this issue?

@ChuongKNguyen

This comment has been minimized.

Copy link

ChuongKNguyen commented Apr 4, 2017

Heroku automatically detect my app as a Nodejs app and i got "application error" . I've try setting a build pack on my application but it seems not working either (echo '' > index.php)
Anyone have the same issue?

@shraddha18

This comment has been minimized.

Copy link

shraddha18 commented Apr 14, 2017

worked like a charm! Thank you!

@Tset-Noitamotua

This comment has been minimized.

Copy link

Tset-Noitamotua commented Apr 26, 2017

@mistermappy make sure you have only {} in your composer.json - not '{}'

@egor-sorokin

This comment has been minimized.

Copy link

egor-sorokin commented May 19, 2017

That is amazing! thank you!

@ebrensi

This comment has been minimized.

Copy link

ebrensi commented May 30, 2017

You can also deploy a static page from a subfolder (not root) of your repo.
Suppose your repo has a subfolder called Frontend. Then index.php goes in the app (static page) subfolder Frontend, and we create a Procfile in root (/) that tells Heroku where to find it.

Here it is scripted, like @dwayne did:
If your page is at Frontend/home.html, in root directory:

$ echo '{}' > composer.json
$ echo `web: vendor/bin/heroku-php-apache2 Frontend/` > Procfile
$ echo '<?php include_once("home.html"); ?>' > Frontend/index.php

I hope this helps someone!!

@sadashivakj

This comment has been minimized.

Copy link

sadashivakj commented Jun 10, 2017

This is really helpful ! Thank you !

@gernd

This comment has been minimized.

Copy link

gernd commented Jul 4, 2017

Thanks!

@crazyjdoggy

This comment has been minimized.

Copy link

crazyjdoggy commented Aug 2, 2017

I did the git push heroku master and it said fatal: Not a git repository (or any of the parent directories): .git not sure how to fix it

@stishteam

This comment has been minimized.

Copy link

stishteam commented Aug 7, 2017

Thank you

@BonbonGamo

This comment has been minimized.

Copy link

BonbonGamo commented Aug 15, 2017

This is extremely helpful. Thanks!

@hdalali

This comment has been minimized.

Copy link

hdalali commented Aug 16, 2017

Worked perfectly. Thanks :)

@kcabishek

This comment has been minimized.

Copy link

kcabishek commented Aug 20, 2017

Thanks so much. It worked :)

@dimkawp

This comment has been minimized.

Copy link

dimkawp commented Sep 29, 2017

@josephcorbin91

This comment has been minimized.

Copy link

josephcorbin91 commented Sep 29, 2017

You have to set the buildpack to php.

@mochila83

This comment has been minimized.

Copy link

mochila83 commented Oct 6, 2017

Hey there, I have a site with html, css, javascript. I do not have PHP installed on my local machine. I added the necessary files and was able to push to heroku but now when I open the app on heroku I get a "403 Forbidden You don't have permission to access / on this server." Anyone have any suggestions of other steps I should take? Thanks.

@rohanpanda001

This comment has been minimized.

Copy link

rohanpanda001 commented Nov 12, 2017

its really cool..

@TiagoSilvaPereira

This comment has been minimized.

Copy link

TiagoSilvaPereira commented Nov 27, 2017

Cool, thank you!!

@alexlepore

This comment has been minimized.

Copy link

alexlepore commented Dec 12, 2017

thank you.

@leonorpan

This comment has been minimized.

Copy link

leonorpan commented Dec 14, 2017

Works great, thank you :)

@OmalPerera

This comment has been minimized.

Copy link

OmalPerera commented Jan 14, 2018

Thanks! worked

@AnthonyChamberlin

This comment has been minimized.

Copy link

AnthonyChamberlin commented Jan 23, 2018

Brilliant, worked first time!

@neves-io

This comment has been minimized.

Copy link

neves-io commented Feb 22, 2018

Have used this method for years. Having this error suddenly this morning:

remote: Compressing source files... done.
remote: Building source:
remote:
remote: !   The requested API endpoint was not found. Are you using the right HTTP verb (i.e. `GET` vs. `POST`), and did you specify your intended version with the `Accept` header?
remote:
To https://git.heroku.com/name-of-app.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/name-of-app.git'

Any ideas!?

@cjagercom

This comment has been minimized.

Copy link

cjagercom commented Feb 22, 2018

Also occurs via web interface when integrating with github

@cjagercom

This comment has been minimized.

Copy link

cjagercom commented Feb 22, 2018

@arthurdeugov

This comment has been minimized.

Copy link

arthurdeugov commented Apr 6, 2018

Is this method still working ?

@sayak123

This comment has been minimized.

Copy link

sayak123 commented Apr 7, 2018

git push heroku master
fatal: 'heroku' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

@sayak123

This comment has been minimized.

Copy link

sayak123 commented Apr 7, 2018

help me please

@Mohamad-Ilham-Ramadhan

This comment has been minimized.

Copy link

Mohamad-Ilham-Ramadhan commented May 3, 2018

Thanks! It works.

@iceberg53

This comment has been minimized.

Copy link

iceberg53 commented May 22, 2018

Thank you very much!!

@amylumpkin

This comment has been minimized.

Copy link

amylumpkin commented May 30, 2018

screen shot 2018-05-30 at 6 28 33 pm

Any idea why this is what I see rather than the website I've created?

@tyler-fishbone

This comment has been minimized.

Copy link

tyler-fishbone commented Jun 19, 2018

So awesome! Thanks for letting us know about this : )

@SihemBouhenniche

This comment has been minimized.

Copy link

SihemBouhenniche commented Jun 21, 2018

why when i deploy i got a blank page ?

@tvpsh2020

This comment has been minimized.

Copy link

tvpsh2020 commented Jun 25, 2018

Awesome! Thanks

@HHiggins2

This comment has been minimized.

Copy link

HHiggins2 commented Jul 11, 2018

Awesome, thank you for posting!

@BiggaHD

This comment has been minimized.

Copy link

BiggaHD commented Jul 14, 2018

That's a truly great hack. Cheers man 🥇

@canuxsistemas

This comment has been minimized.

Copy link

canuxsistemas commented Jul 27, 2018

Gracias! desde Venezuela.

@sviji06

This comment has been minimized.

Copy link

sviji06 commented Jul 27, 2018

I'm still getting a blank page. Any idea why?

@pilarfc

This comment has been minimized.

Copy link

pilarfc commented Jul 27, 2018

Super helpful! Thanks!

@jaimedeverall

This comment has been minimized.

Copy link

jaimedeverall commented Oct 27, 2018

Thank you! It worked perfectly!

@viswesvar

This comment has been minimized.

Copy link

viswesvar commented Dec 11, 2018

Wow, this works flawlessly, thank you saved my day.

@suce126

This comment has been minimized.

Copy link

suce126 commented Jan 11, 2019

Super! Thanks!

@TancsicsGergely

This comment has been minimized.

Copy link

TancsicsGergely commented Jan 12, 2019

@wh1tney I can't deploy the app, but I have received the following error:

`-----> PHP app detected

! ERROR: Basic validation for 'composer.json' failed!
!
! It must be a valid JSON document compatible with Composer.
!
! You most likely created or edited the file by hand, and it now
! contains a syntax error. Please refer to the documentation at
! https://getcomposer.org/doc/ for information on the format.
!
! You can run 'composer validate' locally on your computer for
! further diagnosis. Remember to also always k
-----> PHP app detected

! ERROR: Basic validation for 'composer.json' failed!
!
! It must be a valid JSON document compatible with Composer.
!
! You most likely created or edited the file by hand, and it now
! contains a syntax error. Please refer to the documentation at
! https://getcomposer.org/doc/ for information on the format.
!
! You can run 'composer validate' locally on your computer for
! further diagnosis. Remember to also always keep your lock file
! up to date with any changes according to the instructions at
! https://getcomposer.org/doc/01-basic-usage.md

! Push rejected, failed to compile PHP app.

! Push failed`

@aguila-erik

This comment has been minimized.

Copy link

aguila-erik commented Feb 10, 2019

Works perfect!

Even trough a Github reposity.

THANKS!

:D

@Chiphyr

This comment has been minimized.

Copy link

Chiphyr commented Feb 17, 2019

I am constantly having the error of "Failed to build"

I know i'm 2 years late, but for anybody else having this issue, make sure to add the PHP buildpack. To do this, login to heroku in the terminal and run this: heroku buildpack:add heroku/php. Now, just commit and push as usual and it should work.

@TimmDay

This comment has been minimized.

Copy link

TimmDay commented Mar 9, 2019

heroku buildpacks:add heroku/php

buildpacks -> don't forget the 's' on the end :)

@codemonza

This comment has been minimized.

Copy link

codemonza commented Mar 26, 2019

Thank you!

  1. Put ./ in front of home.html in index.php like @aleks-qq suggested:
    <?php include_once('./home.html'); ?>
  2. Add buildpack like @TimmDay suggested:
    heroku buildpacks:add heroku/php

Worked for me :D

@mmcguff

This comment has been minimized.

Copy link

mmcguff commented Apr 11, 2019

Thanks for sharing this. Question for others that may be running into this. If I have an /img directory that has images I would like to be included, is there something special I need to do to ensure these assets are included in my deployment? Currently my hero image that I have inside of /img/heroimage.jpg is not being included when I deploy. If there is full documentation about this please include a link. Thanks!

@ashutoshanand13

This comment has been minimized.

Copy link

ashutoshanand13 commented May 4, 2019

Works like a charm!!

@Ritz97

This comment has been minimized.

Copy link

Ritz97 commented May 8, 2019

Thank You Very Much. It worked absolutely spot-on!
It means a lot that you provide help to so many people who were and would be in need of this trick.

@donaldvaneupen

This comment has been minimized.

Copy link

donaldvaneupen commented Jun 8, 2019

Thanks a lot, worked like a charm!

@patarapolw

This comment has been minimized.

Copy link

patarapolw commented Jul 4, 2019

My static is built in /public, and that also includes CSS and JavaScript. Only HTML is rendered.

Used https://now.sh instead -- https://github.com/patarapolw/polvcode/blob/master/now.json

@BurhanH

This comment has been minimized.

Copy link

BurhanH commented Aug 4, 2019

Thanks! It works!

@ggalari

This comment has been minimized.

Copy link

ggalari commented Nov 3, 2019

Perfetto! Thx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.