DEV Community

Cover image for How to deploy a Static Site to Heroku for free?
Kevin M. Mansour
Kevin M. Mansour

Posted on

How to deploy a Static Site to Heroku for free?

First: What is Heroku Platform?

Heroku is a hosting platform where you can deploy dynamic applications in Rails, PHP, Node.js and Python web applications.

Prerequisites:

In order to deploy a Static Site you need a couple of things:

  1. Have git installed.
  2. A Heroku Account – Sign up here.
  3. Download the Heroku CLI – A command line interface for managing your Heroku Apps from Terminal.
  4. Run heroku login in your Terminal or Command prompt and fill in your Heroku Account Credentials.

Deploying your Site:

First, You need to navigate to your project in the command prompt.

cd Projects/my-site

We can trick Heroku to deploy a static site by including 1 dynamic file.

The index.php file will be served by Heroku before your index.html. We need to make the browser redirect from index.php to index.html. We only need to include one line of PHP code.

<?php header( 'Location: /index.html' ) ; ?>

Notice: Make sure there is no spaces before the <?php otherwise it won’t work!

Then we will use the command line tool called git to initialize or create a version of the site you want to deploy. To do that run the command:

git init

Then,

git add .

The add . means add all the files to the git repository.

Then you want to commit or save all the changes for your site. With a message describing what you have done.

git commit -m "My site ready for deployment."

Now you want to create your site on Heroku. If you are already logged in (because you ran heroku login earlier), you can issue the following command:

heroku apps:create my-static-site-example

Insert your desired name instead of my-static-site-example.

If the name is not taken you can deploy your site using git:

git push heroku master

Once you see “remote: Verifying deploy…. done.”
So, Congratulations. You can now visit your site at https://<whatever-name-you-selected>.herokuapp.com/.

If you want to add your own domain check out the Heroku Documentation.

If you need to make changes to your site:

Add the changes.

git add .

Save the changes.

git commit -m "Add useful message"

Then deploy.

git push heroku master

Then your edits are published.

Top comments (0)