[10 Step Guide] How to deploy HTML on Heroku app the quick and easy way!

Heroku allows fast, free web-hosting, but what are the limits? One big one is that they do not natively host static websites with HTML, CSS and JS. In this post we will show you how to create and deploy HTML on Heroku. Be it a static website or just a single page for your online web app.

Deploying HTML on Heroku

You might think this is a simple case of creating a Heroku app and writing some HTML code in a file hosted there. Hold your horses… It’s not quite as simple as that. For starters you might punch up a new app and hit deploy then get this Build Log error…

!     No default language could be detected for this app.

HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.

See https://devcenter.heroku.com/articles/buildpacks!

!     Push failed

This is a standard build log error that Heroku displays when there is no coding language defined in your app. Read on to find out how to correct this error, set up a language buildpack and deploy a fully working page of HTML on Heroku.

Deploy HTML on Heroku the easy way

There are some simple stages to follow in this tutorial that will take you step by step through the process of deploying your HTML file onto your Heroku app. No need to install the Heroku CLI or any other complicated software, this can all be done in your internet browser. Just follow the steps one at a time and you’ll soon have you static HTML page hosted on a free Heroku app.

A brief rundown of how to deploying HTML on Heroku is:

1. Register free account on Github
2. Create new (private) Repository on Github
3. Create files in Github repo
4. Register free account on Heroku
5. Create new app on Heroku
6. Connect Heroku app to Github repo
7. Enable automatic deploys
8. Add PHP buildpack
9. Deploy app
10. Enjoy your HTML app!

Continue reading to see a more detailed description for each of these steps and further guidance on the process.

Step 1: Register on Github

We’ll take it for granted that you can handle registering a free account on Github, just follow the link above…

Step 2: Create New Github Repository

Once you are logged into your new account, just navigate to Repositories and click the “NEW” button in the top right corner. Don’t forget to set your repo to PRIVATE as you don’t want it to be accessible to the public here.

Step 3: Create Some Files

Now you have your new repo, you will need to create a few files to enable your static HTML page to run on Heroku. Below are the minimum three files you will need for the basics of this tutorial.

TIP: You can add any other files in your repo that you want to create a website; like CSS, JS and other HTML pages for internal linking.

1) composer.json

Create a new file as composer.json and in that you just need the simple entry of {} you can just copy and paste these two characters if you find that easiest.

2) index.php

Next you will need the file index.php and in this you need to add the following line of code:

<?php include_once("index.html"); ?>

3) index.html

This last file index.html is the core of your web page and it will contain the HTML content that you want to show on your Heroku app.

Step 4: Register on Heroku

Again, we hope you can handle registering a free account on Heroku (link above).

Step 5: Create New Heroku App

After logging into your new Heroku account, look for the “NEW” dropdown in the top right corner. Click it, then click on “Create new app”. Select a region and give your app a name… Be aware that the name you assign here will become the subdomain of your app for public access. So make it short and relevant to your web page content; eg. my-new-app.herokuapp.com

Step 6: Connect App to Repo

After creating your new app you should be taken directly to the Deploy tab in Heroku. Look for “Deployment method” and select Github. You will then be prompted to enter your repo name. Finalise the process by clicking “connect”.

Step 7: Enable Auto Deploy

This is just a time-saving feature that will mean that when you update your files in the Github Repo, they will automatically push through to your Heroku App.

Step 8: Install PHP Language Buildpack

This step is crucial to deploying your HTML on Heroku and is where you can correct the build log error mentioned above if you have already got this far. Switch to the “Settings” tab in your Heroku app and scroll down to “Buildpacks”. Click on the “Add buildpacks” button and select PHP from the available options.

Step 9: Deploy your HTML on Heroku

Finally you are ready to deploy your new HTML content on your Heroku app. Flip back to the “Deploy” tab and scroll to the bottom. Next to “Manual Deploy” click on the “deploy Branch” button.

Step 10: Enjoy your HTML page on Heroku

Now you can view your new web page on the URL you set up previously eg. my-new-app.herokuapp.com

Rapping up HTML on Heroku

We hope you found this tutorial simple and easy to use. If you have any issues or questions about how to deploy HTML on Heroku apps, just drop your thoughts in the comments below and we’ll do our best to help out.

Take a browse through our blog for other handy tutorials like this, to help you with simple coding projects; like this post on creating a Chrome Browser Extension.