How to deploy a static website to Heroku

deploy-static-site-heroku.md

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

Thanks you!

my man got a star and a follow!

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

Thanks

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

I followed 6 steps rules. Heroku was successfully build.

But deployed heroku app doesn't work for me.

How can I solve this problem?

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

@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")

@kiefer136 nope, that's not mine

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

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.

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.

Does anyone know how to do this but with an HTML document produced by another language? I have an RMarkdown script that I can render into HTML in a job scheduled on Heroku, but I don't have a way of displaying the HTML.

I follow these exact steps, but the page for me is showing blank. How can I solve this?

@ber9795 just add /home.html at the end of the URL

Thanks

Hello World 🤓 !For anyone simply looking to deploy a static site, it's probably more convenient these days to use digitalocean's app platform. It's free and you can push directly from github for continuous deploys. You can also connect to custom domains without issues. I highly recommend you follow that if all you need is a static site. Instructions are here

Thank you! Em seg., 27 de jun. de 2022 20:38, ccedacero(Cristian Cedacero) < ***@***.***> escreveu:

…

***@***.**** commented on this gist. ------------------------------ Hello World 🤓 !For anyone simply looking to deploy a static site, it's probably more convenient these days to use digitalocean's app platform. It's free and you can push directly from github for continuous deploys. You can also connect to custom domains without issues. I highly recommend you follow that if all you need is a static site. Instructions are here <https://www.digitalocean.com/community/tutorials/how-to-deploy-a-static-website-to-the-cloud-with-digitalocean-app-platform> — Reply to this email directly, view it on GitHub <https://gist.github.com/2ad13aa5fbdd83f6a489#gistcomment-4214239>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHTMVWFHIHXUFS6O63ZWRNDVRI3OVANCNFSM4HKZHQCA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Wonderful. Thanks!

@kiefer136 nope, that's not mine

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

Same