How to Deploy a Basic Static HTML Website to Heroku?

Heroku is a simple and one-stop solution to host any website or server. This article revolves around how you can host your own Static HTML webpage on Heroku. To demonstrate this we are going to build a simple webpage and host it.

How-to-Deploy-a-Basic-Static-HTML-Website-to-Heroku

Prerequisites

  • Git
  • Heroku Account
  • Heroku CLI

Let’s create a directory named “portfolio” for our project. We will connect this directory to our Heroku app so that whenever we update the local HTML file, changes reflect on the hosted website.

Step 1:

Create a directory with the name “portfolio” and change the working directory to it.

$ mkdir portfolio
$ cd portfolio

Step 2:

Create your own static HTML website and name it “home.html” (We are going to create a simple file with just “My portfolio” as text)



$ echo "<h1> My Portfolio </h1>" > home.html 

Step 3:

Heroku by default does not allow you to deploy an application that does not have a backend. So we need to create a dummy backend or dynamic PHP file. We need to use a trick and tell Heroku that our website is a PHP application. To do this simply copy and paste the following commands in your terminal. composer.json has been included to provide support for PHP application on Heroku. If an app has no composer dependencies, we must include empty composer.json  to recognize the PHP application.

$ echo '<?php include_once("home.html"); ?>' > index.php
$ echo '{}' > composer.json

Step 4:

Initialize the repository as a git repository.

$ git init

Step 5:

Create your Heroku app using the new button on the top right side of Heroku dashboard. We are going to name this app as “your-app-name-123″

Step 6:

Login to your Heroku account using the Heroku CLI

$ heroku login

Step 7:

Now that we have created our app, we just need to connect the local git repository to the Heroku app. To do this we add the remote of the Heroku app to the git repository. (Don’t forget to replace “your-app-name-123” with your own app name)

$ heroku git:remote -a your-app-name-123

Step 8:

Push the changes to your Heroku app.

$ git push heroku master

Step 9:

Your app is now live on Heroku. To view your app, click on the link that appears at the end of the previous step, which looks like https://your-app-name-123.herokuapp.com/ . To commit and save all the changes to your home.html file, execute the following commands from your “portfolio” directory.

$ git add . 
$ git commit -m "your commit message" 
$ git push heroku master

full-stack-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.