How to deploy static pages on Heroku

4 min readMar 29, 2021

This week I was trying to deploy a static page using Heroku, although it wasn’t pretty straightforward… But first things first…
Obs: I will use Visual Studio Code as my text editor, so every line when you see code . that stands for command line step to open VS Code.

What is Heroku?

As mentioned on Heroku’s webpage, “Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps — we’re the fastest way to go from idea to URL, bypassing all those infrastructure headaches.”

Try our first deployment

Let’s create a new project and connect to our repository:

This will create a new app, after that e just need to connect our repository to the app:

Now we need an index.html file, let’s create it and add some content.

$ touch index.html
$ code index.html

Only for demo proposes let’s simple add:

<!DOCTYPE html>
<html>
    <head>
        <title>Deployment Example</title>
    </head>
    <body>
        <h1>Deployment example</h1>
        <p>Simple example of static pages deployment on heroku.</p>    </body>
</html>

Now we just need to push our code into our github repository:

$ git add index.html
$ git commit -m "Index file"
$ git push

If you have setted automatic deployment when pushing to master branch (or the brand new name main branch) Heroku should start automatically build your image. This is the point where problems start to happen, an error should be reported by Heroku, something similar to the following 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

Why does that happen?

Static page deployment it’s not allowed, we need a to set some kind of server, we can use php and import the our html content, although, I’m most familiarised with NodeJS, so I will use node instead.

First we need to create a package.json file on our project:

$ touch package.json
$ code .

Now let’s add some content to our file:

{
    "name": "My Beautiful Project",
    "author": "Rui Coelho",
    "version": "0.0.1",
    "description": "My beautiful static page project",
    "scripts": {
         "start":"serve",
    }
    "dependencies": {
         "serve":"^11.3.2"
    }
}

Let’s push our code to git and see what happens:

$ git add package.json
$ git commit -m "Node server"
$ git push

Now we can see that our webpage is now available:

It’s deployed! Now you can serve your website from Heroku!

Bonus points

Since we use node to deploy our website we can do a cool trick to develop our website. If we use reload library our website will reload automatically when a file is modified. To achieve this we only need to install reload with npm:

$ npm i --save reload
$ npm run dev

The last command will start our server and watch our file changes, when a file change is detected the browser will automatically reload our page.

Ignore files before commit

Don’t forgot to avoid some files when committing to your git repository:

$ touch .gitignore

Add add the following lines:

node_module
package-lock.json

Conclusions

Even if not supported by Heroku with a little creativity, it becomes quite simple to deploy static pages and we still end up having the advantage of hot reload. It is important to note that Heroku has a simple and intuitive interface to use making it very simple to integrate with the different types of services that we want to make available to the end user.

Source Code

The code for the entire project is available on my github.