Host static sites on Cloud Foundry

Introducing new staticfile-buildpack for running static sites on Cloud Foundry.

"We need a fast way to share out HTML/CSS prototypes"

$ cf push staticfile
Starting app staticfile in org demo / space demo as admin...
-----> Using root folder
-----> Copying project files into public/
-----> Setting up nginx

We were hosting a hands-on introduction to Cloud Foundry with a client’s design team. Teaching them how to use Cloud Foundry, and how to use it early and often. Production is for week 1, not for the last week of a project.

This team produced HTML/CSS/JavaScript front ends. Locally they were dev/testing with Grunt, and using livereload to see their changes immediately in their browser.

Simple sharing

They wanted to share different branches/pull requests with internal clients/other teams. They now only need to push to their Cloud Foundry with a new app name:

touch Staticfile
cf push ourproject-branchname -m 64M

Root folder

Their build tools put their HTML/CSS/JavaScript in a subfolder dist. To target a subfolder as the root folder, add the following line to Staticfile:

root: dist

Basic authentication

They also wanted to be able to protect the sites with user:password basic authentication.


Simply create a Staticfile.auth file with each line containing user:encryptedpassword [readme] and push again. is a good site to generate the Staticfile.auth credentials.

For example, if the username & password were both bob, then Staticfile.auth would look like (see example app):


One line per user:encryptedpassword.

New buildpack

The solution for them was a new buildpack to make it very easy, and install it for everyone to share across the company.

$ cf buildpacks
Getting buildpacks...

Public Cloud Foundry?

If your Cloud Foundry, such as Pivotal Web Services does not yet support this buildpack built-in then you can specify it when you deploy/push:

cf target
cf push myproject -m 64M -b

Example apps

There are some example apps with different Staticfile included.

Learn more

Read the README to learn more.

If you are a Cloud Foundry administrator, read the installation section for uploading the latest versions.

Spread the word

twitter icon facebook icon linkedin icon