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 toy5429274 commented Aug 13, 2015

Work perfectly..Thanks

@aliciatb

This comment has been minimized.

Copy link

@aliciatb 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 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 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 arminsebastian commented Oct 23, 2015

pretty useful thanks!

@fajarmdi

This comment has been minimized.

Copy link

@fajarmdi fajarmdi commented Nov 13, 2015

Awesome Thanks ... !!!

@manueldelreal

This comment has been minimized.

Copy link

@manueldelreal manueldelreal commented Nov 15, 2015

works like a charm, thanks @wh1tney

@arangates

This comment has been minimized.

Copy link

@arangates 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 eriknguyen commented Jan 20, 2016

Awesome. Thanks alot 👍

@dwayne

This comment has been minimized.

Copy link

@dwayne 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 murtaza13 commented Mar 30, 2016

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

@murtaza13

This comment has been minimized.

Copy link

@murtaza13 murtaza13 commented Mar 30, 2016

I have followed all the steps mentioned above.

@shahadatthequint

This comment has been minimized.

Copy link

@shahadatthequint shahadatthequint commented Apr 27, 2016

Greats thanks

@libinbensin

This comment has been minimized.

Copy link

@libinbensin libinbensin commented May 29, 2016

Perfect. Thanks

@okay

This comment has been minimized.

Copy link

@okay okay commented Jun 10, 2016

Thanks! :)

@obinetbits

This comment has been minimized.

Copy link

@obinetbits obinetbits commented Jun 26, 2016

worked thanks

@KVanSant

This comment has been minimized.

Copy link

@KVanSant 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 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 devspider44 commented Aug 26, 2016

savior. Thanks.

@kfwebdev

This comment has been minimized.

Copy link

@kfwebdev kfwebdev commented Sep 13, 2016

this worked beautifully, thank you!

@cloverharvest

This comment has been minimized.

Copy link

@cloverharvest cloverharvest commented Nov 8, 2016

Thanks! Worked well!

@gamg

This comment has been minimized.

Copy link

@gamg gamg commented Dec 17, 2016

Css do not work, how do I?

@axjimenez89

This comment has been minimized.

Copy link

@axjimenez89 axjimenez89 commented Dec 24, 2016

CSS is not working anymore! any suggestions?

@summerpratt

This comment has been minimized.

Copy link

@summerpratt summerpratt commented Jan 26, 2017

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

@uxdiva

This comment has been minimized.

Copy link

@uxdiva uxdiva commented Jan 30, 2017

You are awesome!!! Thank you! 💃

@aleks-qq

This comment has been minimized.

Copy link

@aleks-qq 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 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 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 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 shraddha18 commented Apr 14, 2017

worked like a charm! Thank you!

@Tset-Noitamotua

This comment has been minimized.

Copy link

@Tset-Noitamotua 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 egor-sorokin commented May 19, 2017

That is amazing! thank you!

@ebrensi

This comment has been minimized.

Copy link

@ebrensi 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 sadashivakj commented Jun 10, 2017

This is really helpful ! Thank you !

@gernd

This comment has been minimized.

Copy link

@gernd gernd commented Jul 4, 2017

Thanks!

@crazyjdoggy

This comment has been minimized.

Copy link

@crazyjdoggy 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 stishteam commented Aug 7, 2017

Thank you

@BonbonGamo

This comment has been minimized.

Copy link

@BonbonGamo BonbonGamo commented Aug 15, 2017

This is extremely helpful. Thanks!

@hdalali

This comment has been minimized.

Copy link

@hdalali hdalali commented Aug 16, 2017

Worked perfectly. Thanks :)

@kcabishek

This comment has been minimized.

Copy link

@kcabishek kcabishek commented Aug 20, 2017

Thanks so much. It worked :)

@dimkawp

This comment has been minimized.

Copy link

@dimkawp dimkawp commented Sep 29, 2017

@josephcorbin91

This comment has been minimized.

Copy link

@josephcorbin91 josephcorbin91 commented Sep 29, 2017

You have to set the buildpack to php.

@mochila83

This comment has been minimized.

Copy link

@mochila83 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 rohanpanda001 commented Nov 12, 2017

its really cool..

@TiagoSilvaPereira

This comment has been minimized.

Copy link

@TiagoSilvaPereira TiagoSilvaPereira commented Nov 27, 2017

Cool, thank you!!

@alexlepore

This comment has been minimized.

Copy link

@alexlepore alexlepore commented Dec 12, 2017

thank you.

@leonorpan

This comment has been minimized.

Copy link

@leonorpan leonorpan commented Dec 14, 2017

Works great, thank you :)

@OmalPerera

This comment has been minimized.

Copy link

@OmalPerera OmalPerera commented Jan 14, 2018

Thanks! worked

@AnthonyChamberlin

This comment has been minimized.

Copy link

@AnthonyChamberlin AnthonyChamberlin commented Jan 23, 2018

Brilliant, worked first time!

@neves-io

This comment has been minimized.

Copy link

@neves-io 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 cjagercom commented Feb 22, 2018

Also occurs via web interface when integrating with github

@cjagercom

This comment has been minimized.

Copy link

@cjagercom cjagercom commented Feb 22, 2018

@arthurdeugov

This comment has been minimized.

Copy link

@arthurdeugov arthurdeugov commented Apr 6, 2018

Is this method still working ?

@sayak123

This comment has been minimized.

Copy link

@sayak123 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 sayak123 commented Apr 7, 2018

help me please

@Mohamad-Ilham-Ramadhan

This comment has been minimized.

Copy link

@Mohamad-Ilham-Ramadhan Mohamad-Ilham-Ramadhan commented May 3, 2018

Thanks! It works.

@iceberg53

This comment has been minimized.

Copy link

@iceberg53 iceberg53 commented May 22, 2018

Thank you very much!!

@amylumpkin

This comment has been minimized.

Copy link

@amylumpkin 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 tyler-fishbone commented Jun 19, 2018

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

@SihemBouhenniche

This comment has been minimized.

Copy link

@SihemBouhenniche SihemBouhenniche commented Jun 21, 2018

why when i deploy i got a blank page ?

@tvpsh2020-zz

This comment has been minimized.

Copy link

@tvpsh2020-zz tvpsh2020-zz commented Jun 25, 2018

Awesome! Thanks

@HHiggins2

This comment has been minimized.

Copy link

@HHiggins2 HHiggins2 commented Jul 11, 2018

Awesome, thank you for posting!

@BiggaHD

This comment has been minimized.

Copy link

@BiggaHD BiggaHD commented Jul 14, 2018

That's a truly great hack. Cheers man 🥇

@canuxsistemas

This comment has been minimized.

Copy link

@canuxsistemas canuxsistemas commented Jul 27, 2018

Gracias! desde Venezuela.

@sviji06

This comment has been minimized.

Copy link

@sviji06 sviji06 commented Jul 27, 2018

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

@pilarfc

This comment has been minimized.

Copy link

@pilarfc pilarfc commented Jul 27, 2018

Super helpful! Thanks!

@jaimedeverall

This comment has been minimized.

Copy link

@jaimedeverall jaimedeverall commented Oct 27, 2018

Thank you! It worked perfectly!

@viswesvar

This comment has been minimized.

Copy link

@viswesvar viswesvar commented Dec 11, 2018

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

@suce126

This comment has been minimized.

Copy link

@suce126 suce126 commented Jan 11, 2019

Super! Thanks!

@TancsicsGergely

This comment has been minimized.

Copy link

@TancsicsGergely 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 aguila-erik commented Feb 10, 2019

Works perfect!

Even trough a Github reposity.

THANKS!

:D

@alecks

This comment has been minimized.

Copy link

@alecks alecks 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 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 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 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 ashutoshanand13 commented May 4, 2019

Works like a charm!!

@Ritz97

This comment has been minimized.

Copy link

@Ritz97 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 donaldvaneupen commented Jun 8, 2019

Thanks a lot, worked like a charm!

@patarapolw

This comment has been minimized.

Copy link

@patarapolw 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 BurhanH commented Aug 4, 2019

Thanks! It works!

@ggalari

This comment has been minimized.

Copy link

@ggalari ggalari commented Nov 3, 2019

Perfetto! Thx

@AvilaAi

This comment has been minimized.

Copy link

@AvilaAi AvilaAi commented Dec 20, 2019

It works! Thank you!

@ankushverma784

This comment has been minimized.

Copy link

@ankushverma784 ankushverma784 commented Jan 10, 2020

app not working .

@kevinyooky

This comment has been minimized.

Copy link

@kevinyooky kevinyooky commented Jan 31, 2020

If anyone has followed all the suggestions above and is still experiencing a blank page, make sure that your home.html file is not named home.html.html.

  1. Check your folder to see if it is named as home or home.html
  2. Go to your code editor and check that it is named "home.html" not "home.html.html"
@Azrorz

This comment has been minimized.

Copy link

@Azrorz Azrorz commented Feb 12, 2020

Worked beautifully, thank you!

@steph-crypt

This comment has been minimized.

Copy link

@steph-crypt steph-crypt commented Feb 16, 2020

Awwwwwwesome! Thank you!

@dontdoitwalter

This comment has been minimized.

Copy link

@dontdoitwalter dontdoitwalter commented Feb 24, 2020

You are so wonderful. Thank you

@mishailovic

This comment has been minimized.

Copy link

@mishailovic mishailovic commented Mar 16, 2020

Nice, thanks a lot 👍

@Dewalade1

This comment has been minimized.

Copy link

@Dewalade1 Dewalade1 commented Mar 23, 2020

It works perfectly. Thanks! 👍

@ShivashishY

This comment has been minimized.

Copy link

@ShivashishY ShivashishY commented Apr 23, 2020

works fine , thank you :)

@barnabas21

This comment has been minimized.

Copy link

@barnabas21 barnabas21 commented Jun 7, 2020

Ah cool! ça marche.👍
Simple comme bonjour.

@SedemQuame

This comment has been minimized.

Copy link

@SedemQuame SedemQuame commented Jun 13, 2020

Works fine, awesome thanks.

@suyashsorte

This comment has been minimized.

Copy link

@suyashsorte suyashsorte commented Jun 14, 2020

Still getting blank page even though my file name is home.html and not home.html.html.

@omprakash201194

This comment has been minimized.

Copy link

@omprakash201194 omprakash201194 commented Jun 30, 2020

Still getting blank page even though my file name is home.html and not home.html.html.

Make sure the index.php file and composer.json file has the right content committed and pushed

@PratikAnjay

This comment has been minimized.

Copy link

@PratikAnjay PratikAnjay commented Jul 22, 2020

I have just a html report that has to be pushed by certain code , but from my application that html report is not generating after deployment in heroku. Can anybody help me on this ?

@mitchell-frost

This comment has been minimized.

Copy link

@mitchell-frost mitchell-frost commented Aug 23, 2020

Worked so well. Thank you so much <3

@wimpywarlord

This comment has been minimized.

Copy link

@wimpywarlord wimpywarlord commented Sep 1, 2020

thanks a lot

@MelvN17

This comment has been minimized.

Copy link

@MelvN17 MelvN17 commented Sep 22, 2020

I managed to do it but how do I update it?
When i do the git push heroku master it gives me an error

error: src refspec master does not match any
error: failed to push some refs to 'heroku'

My app is connected to Github

I'm sorry I'm new to this.

@midnightmadwalk

This comment has been minimized.

Copy link

@midnightmadwalk midnightmadwalk commented Sep 23, 2020

can i add deploy button?

@FajarSJ

This comment has been minimized.

Copy link

@FajarSJ FajarSJ commented Oct 7, 2020

I just got blank page and ERROR: Basic validation for 'composer.json' failed!, the problem is that i generate my index.php and composer.json using CLI.

My solution is delete index.php and composer.json, and then create a new one manually after you done that insert the code as instructed above

@Kinglemar

This comment has been minimized.

Copy link

@Kinglemar Kinglemar commented Oct 26, 2020

old but gold..........it worked like a charm

@LiyuanDou

This comment has been minimized.

Copy link

@LiyuanDou LiyuanDou commented Nov 17, 2020

help :
error: src refspec master does not match any ...

@LiyuanDou

This comment has been minimized.

Copy link

@LiyuanDou LiyuanDou commented Nov 17, 2020

I managed to do it but how do I update it?
When i do the git push heroku master it gives me an error

error: src refspec master does not match any
error: failed to push some refs to 'heroku'

My app is connected to Github

I'm sorry I'm new to this.

Hey did you solve this question? I met the same problem now

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.