This is my first Medium post so bare with me on my writing skills (in a great desperate need for improvement).
Heroku allows web-hosting but what do you know? They do not host static websites straight up with HTML, CSS, and JS.
Initial attempt of trying to do so, I was hit with the following Build Log error:
! No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
! Push failed
After the anticipated relief of deploying a day’s worth of hard work, the
push failed log showed up. So what did we do wrong this time? What is a buildpack? Buildpacks are composed of a set of scripts depending on the programming language used. These scripts are responsible in transforming the deployed code to be excuted on a dyno manager. (The scripts gather the dependencies, which then outputs generated code. When pushing onto Heroku, the code is received by the slug compiler which transforms the repo into a slug and off to a dyno for execution).
Don’t worry, it’s an easy fix for your portfolio or personal blog. A small little trick to get Heroku to recognize the files of your static website is to trick it into being a PHP app. That’s right, PHP.
I’ll assume the Heroku app is all set up and the final step is the deployment process. Here’s the simple but yet “not going to argue with you” solution:
- Head to root directory of the repo that contains index.html which dictates the main HTML page.
touch composer.jsonto create a file called composer.json.
- Add the following line:
touch index.phpto create a file called index.php.
- Add the line:
<?php include_once("index.html"); ?>inside.
- Now update the repo on Github if it’s connected to your account or Heroku command
git push heroku master. Wait for the automatic deploy to work its magic and tada!
Now you have access to your Heroku website up and running on ****.herokuapp.com