How to deploy static website to Heroku

In my previous articles, I showed you some free services/platforms to deploy your static websites. So in this article, I am showing you how to deploy a static website to Heroku for free.

What is Heroku is?

Heroku is a hosting platform where you can deploy dynamic applications in Rails, PHP, Node.js and Python. If you don’t want to pay for cloud storage and don’t mind your site being ‘asleep’ during inactive hours, Heroku is a great platform for demo-ing your projects online

Prerequisites

* GitHub Account

Before Starting make sure that you have a GitHub account. If not, you can simply obtain a GitHub account from here.

* Git installed, and configured on your machine

Git is a version controlling system that tracks each and every change you did you to files in a project. It keeps records on what the changes were did to files (what was added? what was removed), who made the changes, notes and comments about the changes by the changer and also it keeps records on the time which the changes happened.

* Heroku account and Heroku CLI installed, and configured on your machine

If you haven't a Heroku account, you can obtain a account from here. To install install Heroku CLI on your machine follow the steps given here.

Deploying your site

Navigate to your project directory

If you have already finish with your Static site, you should rename your index.html to file like home.html. Either you can do it manually or using terminal. To rename your index.html to home.html using commanf line use below command.

mv index.html home.html

Now you should create an index.php file that the root directory of your application. This file uses to call other static html file. Inside this index.php file paste below code.

Initilize git repository
Then we’ll 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
git add .

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

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

Now you want to create your site on Heroku. If you’re already logged in, use the following command:

heroku apps:create animated-bulb

Insert your desired name instead of animated-bulb.

If you are not already logged run below command in your terminal

Heroku login

Deploy application Now run below command to deploy your site to Heroku.

git push heroku master

Conclusion

You can now visit your site at https://whatever-name-you-selected.herokuapp.com/ and you can see my example site here.