🚀 How to deploy and build a static website to Heroku
Tags: deployment, heroku, httpserver
Published: 2017-09-16 09:25:08

---
title: 🚀 How to deploy and build a static website to Heroku
published: true
description: 
tags: Deployment, Heroku, http-server
---

> It's not a trivial tutorial, but rather a story how I was able to build & deploy my static website to Heroku. 


___

Recently I was working on a side project, it was a landing page for an online hackathon platform called [**Hacker Hype**](http://www.hackerhype.com/). This time I wanted to switch from **DigitalOcean** and give **Heroku** a try. I have previously been using Heroku to deploy my open source stuff, so I had a feeling that it should not be that hard to deploy a simple static page. Okay, maybe I spoke too soon, but it took me some time before I accomplished it.

____

First of all, I hosted the source code on my private repository on a **GitHub**. In case you haven't used Heroku, it has a dead simple feature which allows you to orchestrate a deployment directly every time you push something to the repository.

In the repository I have 2 branches `master` and `develop`, obviously. I used `master` branch for automatic deploys. So every time I was finishing something, all I've needed is to merge `develop` to `master`. Okay, at this stage I have setup everything I needed to have my development workflow going.

![](http://edvinsantonovs.co.uk/content/images/2017/08/deploy.PNG)

____

Next step was to actually be able to build the `scss` and `js` files into the production-ready project using `Gulp`. From there I would need to configure [`http-server`](https://github.com/indexzero/http-server) in Heroku's `Procfile` to serve my static files. This part took me a bit of the time to figure out. Configuring `Procfile` was the actual challenge. I even posted a [question on StackOverflow](https://stackoverflow.com/questions/44733986/how-to-run-procfile-with-multiple-commands-on-heroku/44735878#44735878) as I was confused how I can run multiple commands in a `Procfile` for Heroku.

So in order to build the project, I've required next commands to be executed 

* `npm install`
* `gulp build` <small>(will generate the `/public` folder)</small>
* `http-server` <small>(will serve `/public` folder by default)</small>

I've tried several ways of configuring `Procfile`, yet nothing worked for me.

* `web: npm install; gulp build; http-server`
* `web: npm install & gulp build & http-server`


I've spent a bit of time researching and came up with the answer. By default, Heroku is installing all packages from the `package.json`, so `npm install` is no longer required. Then I needed to run `gulp build` and `http-server`. For that I've added `"postinstall" : "gulp build"` to `package.json` so my `Procfile` was a one line file with just one command - `web: http-server`. Simplifying things have solved the problem! Now I was able to deploy and build my static website on Heroku! 🎉🎉🎉

![](http://edvinsantonovs.co.uk/content/images/2017/08/hackerhype.PNG)


____

Let's summarise the process. I have a static website and its files are compiled via gulp. Then Heroku’s `Procfile` is configured in order to serve static `html`/`css`/`js` files using `http-server`. This results in a nicely synchronised development and deployment flow.

___

Originally posted on [my blog](http://edvinsantonovs.co.uk/how-to-deploy-and-build-a-static-website-to-heroku/).