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 ).

@septianpujis
Copy link

septianpujis commented Apr 22, 2021

Thanks a lot. It works for me

@AugustoCarmona
Copy link

AugustoCarmona commented Apr 27, 2021

Thanks a lot!! Works perfect!

@mrcaption49
Copy link

mrcaption49 commented Apr 28, 2021

It works 💪 Perfectly!!!
Just follow 3 files
1.composer.json
2.index.php
3.home.html
And push code on github use heroku then!!!

@c01dc0ffee
Copy link

c01dc0ffee commented May 8, 2021

Thanks! 👍

@sravanpabolu
Copy link

sravanpabolu commented May 17, 2021

thanks 🙏

@mayankd07
Copy link

mayankd07 commented May 19, 2021

composer.json giving syntax error

@mightypaasta
Copy link

mightypaasta commented Jun 6, 2021

thanks alot :)

@syamsundar-123
Copy link

syamsundar-123 commented Jun 14, 2021

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

Simply update ingithub and make sure that auto deploy is on inheroku

@doniwirawan
Copy link

doniwirawan commented Jun 23, 2021

cool

@NeoDaenium
Copy link

NeoDaenium commented Jul 21, 2021

Works perfectly when I tested it. Thanks a million!

@tachyon83
Copy link

tachyon83 commented Jul 27, 2021

Beautiful. Just Beautiful!

@glaksmono
Copy link

glaksmono commented Sep 4, 2021

Thanks for sharing this!

@masterjoseph914
Copy link

masterjoseph914 commented Sep 24, 2021

Wow!, works like a charm. Thanks for this @wh1tney

@PeterEssien
Copy link

PeterEssien commented Sep 24, 2021

Works perfectly as of 2021

@gabrielareia
Copy link

gabrielareia commented Oct 11, 2021

It works but when I open the app I get an error, I need to manually type the path on the url /home.html to see my web page, is there a way to make home.html be the default page of my application, so when I click on "open app" it will open directly on home.html?

My php file:
<?php include_once(“home.html”); ?>

I also tried with "./" befor home.html:
<?php include_once(“./home.html”); ?>

and my composer.json:
{}

@chaika-sv
Copy link

chaika-sv commented Oct 16, 2021

It works but when I open the app I get an error, I need to manually type the path on the url /home.html to see my web page, is there a way to make home.html be the default page of my application, so when I click on "open app" it will open directly on home.html?

My php file: <?php include_once(“home.html”); ?>

I also tried with "./" befor home.html: <?php include_once(“./home.html”); ?>

and my composer.json: {}

I have exactly the same issue. Please let me know if you were able to resolve it.

@kanthalaHarivardhanReddy

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

@kanthalaHarivardhanReddy

please help me out!!

@kanthalaHarivardhanReddy

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

###Solution

The error can be solved by renaming your composer.json file to app.json
and in app.json write this
{ "formation": { "web": { "size": "free" } } }

then push it to heroku it works
and go to the link and at the end of the url type this ./home.html
and your static app is here!!!

@Ashley440
Copy link

Ashley440 commented Nov 6, 2021

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

Now login to heroku.
Create an application and go to it's settings.
3rd option is buildpack.
Select it and add php in the options.

@best-lucky1030
Copy link

best-lucky1030 commented Nov 13, 2021

I followed 6 steps rules.
Heroku was successfully build.
image

But deployed heroku app doesn't work for me.
image

How can I solve this problem?

@Cipher-GF
Copy link

Cipher-GF commented Dec 17, 2021

Thanks you!

my man got a star and a follow!

@kiefer136
Copy link

kiefer136 commented Jan 11, 2022

For those getting a blank page check in the .gitignore that it does not include * or it will exclude all files. Re git add, commit, push. Then go to "your-app-url.com"/home.html to see your files

@Nasah-Kuma
Copy link

Nasah-Kuma commented Mar 4, 2022

Thanks

@airspeed
Copy link

airspeed commented Apr 11, 2022

It even works without steps 2., 3. and 4.

@bernardoadc
Copy link

bernardoadc commented Apr 28, 2022

I followed 6 steps rules. Heroku was successfully build. image

But deployed heroku app doesn't work for me. image

How can I solve this problem?

@best-lucky1030 I had the same problem, my index.php had home without quotes

@kiefer136
Copy link

kiefer136 commented Apr 28, 2022

@bernardoadc I visited your site @ https://aloomic-animation.herokuapp.com/home.html and I was able to view your website.

Your main file being served is set to home.html.
I set mine to be accessible from the "/" by changing home.html to be named index.html, & changing the index.php include_once("./index.html")

@bernardoadc
Copy link

bernardoadc commented Apr 29, 2022

@kiefer136 nope, that's not mine

Anyway, I've followed @airspeed tip (no index.php and home.html) and it worked, so, even better!

@maswerdna
Copy link

maswerdna commented May 6, 2022

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

###Solution

The error can be solved by renaming your composer.json file to app.json and in app.json write this { "formation": { "web": { "size": "free" } } }

then push it to heroku it works and go to the link and at the end of the url type this ./home.html and your static app is here!!!

Awesome! You saved my day.

@Aabha1
Copy link

Aabha1 commented May 21, 2022

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

###Solution

The error can be solved by renaming your composer.json file to app.json and in app.json write this { "formation": { "web": { "size": "free" } } }

then push it to heroku it works and go to the link and at the end of the url type this ./home.html and your static app is here!!!

The above solution really works. I was trying for 4hours and was stuck. Thank you very much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment