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.html
intohome.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