Host static website on Heroku

This article describes how to host a static website on Heroku with custom domain name.

This can be interesting for small websites like portfolio or blogs.

Prerequisite:

• A Heroku account
• A website to deploy online, usually an index.html file and possibly some folders associated, JavaScript files, CSS files, images …
• Git installed
• The Heroku CLI installed

1. Preparation

• In a terminal navigate to the root of the website, where the index.html file is
• Create a file there: composer.json
  its content should be: {}
• Create another file named: index.php
its content should be: <?php include_once("home.html"); ?>
• Rename index.htmlinto home.html
• Initialize Git: execute

git init

2. Heroku

• Login to Heroku

heroku login

• Create an app with Heroku CLI

heroku apps:create my-app-name

• Check the link is created between Git and Heroku

git remote -v

The command above should return something. If nothing is returned, link your Heroku app manually with Git:

heroku git:remote -a my-app-name

3. Push to Heroku

The last thing is to push the website to Heroku:

git add --all
git commit -m "any comment"
git push heroku master

Then the website can be accessed online at the address my-app-name.herokuapp.com

4. Optional: Add custom domain

By default the address available for your app/static website will be like www.my-app-name.herokuapp.com . You can associate a personal custom domain to it like www.my-app-name.com however it will be charged approximatively 7$/month.

Here is the way to define a custom domain name in Heroku:

• Update the Heroku CLI, to be sure the latest version is installed:

heroku update

• The following commands should be executed:

heroku ps:resize web=hobby
heroku certs:auto:enable
heroku domains:add www.my-domain-name.com

• Now it is necessary to add a CNAME entry in the domain registrar website, where the personal domain name was bought.
  To know the value for the CNAME, this is the command to execute in the terminal:

heroku domains

The DNS target, among other things, ending with .herokudns.com will be displayed.

• In the domain registrar for the custom domain, a CNAME entry with the following values should be added:

Host name: www
Type: CNAME
TTL: 3600
Data: the DNS target ending with .herokudns.com previously retrieved

After a few minutes, the time for changes to be taken into account, the website will be reachable at the address of the custom domain