Hosting a static website on Heroku – The easy way

Do you want free hosting for your demo website? Do you want to deploy your webapp for free? Then look no further. You can do that and more with Heroku.  Read more to deploy your first static website on Heroku.

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Heroku has a genorous free plan allowing students/hobbyist to deploy their apps on the cloud for free.

In this post you are going to learn the following –

• Basics of git
• Adding files necessary to host static HTML on Heroku
• Pushing code to your git repo
• Creating a new app on Heroku and connecting it with your GitHub account

What you’ll need –

1. A GitHub account ( if you are a student, apply for a student pack here)
2. A Heroku account ( if you are a student , avail your benefits here)

1. Git

What is Git?

Git is a version control tool. Think of it like a backup of your code, but instead of backing up all your code, it just backs up the changes. Watch the following video to learn more about git and github.

For the purpose of this blog post, I am going to use a sample website from microsoft sample html project. Considering you are already registered on GitHub, go to the page and click on fork. This will copy all the code to your account so that you can make changes to it.

Once that is done, you need to download and install git on your machine. After installing git, head over to your cmd prompt and copy/paste the following

git clone https://github.com/< username >/project-html-website

Make sure you replace the < username > with your own github username, and that you have already forked the project.

Once you run the above command, the project will be copied to your local directory. Go ahead and check it out.

2. Adding files necessary to host static HTML on Heroku

• Add a file called composer.json in the directory. If you want to learn more about why we are adding a composer.json file to the directory – click here. 
• Inside the composer.json file add the following line –

• { }

• Add another file called index.php. If you want to know more about index files – click here.
• Inside index.php add the following line –

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

• You can replace index.html with the name of the html file you want to server as your home page.

Your folder structure should now look like this

Let us now push these local changes to our github repo. To do that change directory into the folder using – cd directory and perform the following commands.

3. Pushing code to your git repo

If everything goes well you should have the same output as I have in the above screen shot. Let’s go over the commands one by one

• cd project-html-website

• is to change the directory of the terminal into the project folder
• Once we are in the project folder, we add/propose changed to git by

• git add *

• git commit -m "commit message"

• And finally the

• git push

• To push all the local changes to the github server.

4. Creating a new app on Heroku

• Go to your Heroku dashboard and create a new app.
• 
• Give the app a suitable name and click on Create app.
• Once that is done, you will be redirected to the deploy page for your new app.
• Click on GitHub and connect your app to your GitHub repo.
• 
• Once you are connected, scroll down and click on the deploy brach button.
• Once it is deployed, you can see the website with its own unique Heroku url.
• 
• View my app here