How to deploy static website on Heroku

A simple to-go guide on deploying your first static website.

What is Heroku ?

Heroku is container based cloud Platform as a Service (PaaS) which means it provide its platform for services like deploying, managing as well as scaling the web apps. It is based on git protocol and is free of cost for starters.

You can install Heroku-cli from this link.

In this article I’ll show you how you can publish your static webpage on heroku for free.

Some prerequisites..

Before going any further make sure you have these things off your checklist.

1. Install git on your system.
2. Signup for a Heroku account.

1. Make a website using HTML

Design your personalized website accordingly and save it inside a folder.

After your are done with your website part, add a new file index.php to your folder and paste the following code in the file.

<?php header( ‘Location: /html_file_name.html’ ) ; ?>

Why do we need to do this ?

Heroku provide its platform for the web apps only not for the static websites. So in order to upload our site we need to play a trick. We have to make Heroku believe that it is a php app and we can do that by importing this file in our folder.

NOTE: No need to add a composer.json file as this will automatically add an empty composer.json file to recognize it as php application.

Now we are done with the first phase as the further steps are completely on the terminal.

2. Setting up Heroku

• Run the following command to check whether Heroku is installed on your system or not.

heroku version

Checking Heroku Version

Once you see this on your terminal you are good to go further.

3. Deploying the website

• Navigate to your folder and enter git init to initialize an empty git repository.
• After that, type heroku login and enter your credentials to login to your account.
• The next task needs to give your website a name.

heroku create

This command will give your website a random generated name. But if you want to give a custom name to your website then you can use this command.

heroku create app_name

The thing to remember is that in this case you need to provide a unique app name for the website. After selecting a unique name press enter and you will be provided with a url and a remote git repository of your app.

http://appname.herokuapp.com
https://git.heroku.com/appname.git

You can also rename your app using this command.

heroku apps:rename new_name

• Now it’s time to add our files to the repository. Enter the following codes in the same order.

git add . 
git commit -m “commit message”
git push heroku master

Look out for this confirmation remote: Verifying deploy… done. for a successful deployment.

Job done! Now you can go to the url provided to see your website on any devices available.

If you update anything on your folder, then use the above three commands to reflect them to your website.

4. Deploy HTML on local server

You can do that by navigating to the directory in the terminal or cmd prompt and type following command

python3 -m http.server

Thanks for reading.

Happy Coding !