Deploying a Basic Static HTML Website on Heroku

Deploying a basic static HTML website on Heroku involves hosting simple web pages using Heroku’s platform by configuring the app and pushing code to the Heroku server.

• Requires creating a Heroku app and initializing a Git repository.
• Involves adding necessary files like index.html and configuration files.
• Uses Git commands to push the website to Heroku for deployment.

Prerequisites

Ensure you have the required tools and accounts set up before starting the deployment process.

• Git
• Heroku Account
• Heroku CLI

Procedure to Deploy the Website

Follow these steps to create and successfully host a simple static portfolio website on Heroku.

Step 1: Create Project Directory

Create a folder named portfolio and move into it.

$ mkdir portfolio
$ cd portfolio

Step 2: Create Static HTML File

Create a basic HTML file named home.html.

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

Step 3: Add Dummy Backend (PHP Setup)

Heroku requires a backend, so create a simple PHP file and an empty composer.json.

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

Step 4: Initialize Git Repository

Initialize your project as a Git repository.

$ git init

Step 5: Create Heroku App

Go to the Heroku dashboard and create a new app.
Example app name: your-app-name-123

Step 6: Login to Heroku

Login using the Heroku CLI.

$ heroku login

Step 7: Connect Git to Heroku

Link your local repository to the Heroku app.

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

Step 8: Deploy to Heroku

Push your project to Heroku.

$ git push heroku master

Step 9: View and Update Your Website

• Open your app in the browser: https://your-app-name-123.herokuapp.com/
• To update changes:

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