How to Deploy a Static Website to Heroku
What is Heroku?
Heroku is a hosting platform where you can deploy dynamic applications in Rails, PHP, Node.js and Python. If you don’t want to pay for cloud storage and don’t mind your site being ‘asleep’ during inactive hours, Heroku is a great platform for demo-ing your projects online.
Why do this?
Heroku hosts apps on the internet, not static websites. In order to run our static portfolio, personal blog, landing pages, etc., we need to trick Heroku into thinking our website is a PHP app. Most of it can be done in the terminal. I will show you how in this tutorial.
Before we get started:
- Have git installed — Click here if you need help
- Sign up for a Heroku account
- Download the Heroku CLI (Command Line Interface) — Allows us to manage our Heroku account from the terminal
Let’s begin:
Go into the root directory of your project. Check and see that you are there.
$ cd projects/my-portfolio-page
$ pwd
/path/to/project/
Your site may have some Javascript, CSS and Image files. At the very least it should have an index.html
file. We are going to rename that file to home.html
.
$ mv index.html home.html
We can trick Heroku into deploying our static site simply by adding one dynamic file. Create a new file called index.php
in the root directory, and write the following line in the file: <?php include_once("home.html"); ?>
. We can do this with one line in the terminal by using the echo
command.
$ echo '<?php include_once("home.html"); ?>' > index.php
The index.php
file will be served by Heroku before our home.html
. We need to make the browser redirect from index.php
to home.html
.
Next, create a composer.json
file in the root directory and write the following line in it: {}
. Again, we can do this with just one line in the terminal.
$ echo '{}' > composer.json
Here is why adding composer.json
is necessary:
Heroku PHP Support will be applied to applications only when the application has a file named
composer.json
in the root directory. Even if an application has no Composer dependencies, it must include an emptycomposer.json
in order to be recognized as a PHP application.
If you are happy with the state of your application we can begin deploying to Heroku. First, lets use git
to initialize or create a version of the site we want to deploy.
$ git init
Then, we will add
all the files to the git repository.
$ git add .
Next, we will commit or save all the changes for our site, with a message describing what we’ve done.
$ git commit -m "deploying static--err, dynamic site to heroku"
All that is left to do is push all our files onto the Heroku platform. To do that, we first need to login to Heroku on our terminal.
$ heroku login
Enter your Heroku credentials:
Email: <YOUR HEROKU EMAIL>
Password: <YOUR HEROKU PASSWORD>
Now lets create our site on Heroku. We can do that by:
$ heroku apps:create my-portfolio-page
Note: You can name the app whatever you want; it doesn’t have to be my-portfolio-page
. Make sure there are no spaces in the name.
If the name isn’t already taken, we can deploy to Heroku with:
$ git push heroku master
Once we see remote: Verifying Deploy...done.
, we can visit our site at https://my-portfolio-page.herokuapp.com
.
If we want to make changes to our app, the following three commands will allow us to re-deploy:
$ git add .
$ git commit -m "A helpful message"
$ git push heroku master
Note: Make sure you are always in the root directory of your site by typing pwd
in the command line.
Additional Resources:
- Using the Heroku CLI
- Deploying PHP Apps on Heroku
- If you are new to
git
this guide and this course are two of the best around to help get you familiar - If you want to give your app/site a custom domain name, follow this guide
- Use Name and Namecheap for finding great deals on domain names
I hope you find this article helpful. Thank you for reading, and git to deploying!