An official website of the United States government US flag signifying that this is a United States federal government website

Deploying static sites

Deploying static sites

To push static content to the web, use the Staticfile buildpack. Examples of static content are front-end JavaScript apps and static HTML content.

To get a full list of configuration options, including how to configure nginx, see the Cloud Foundry Staticfile buildpack documentation.

Basics

Create index.html:

$ touch index.html

Add some markup:

<html>
  <head>
    <title>Static Site</title>
  </head>
  <body>
    <p>Welcome to the static site!</p>
  </body>
</html>

Create a manifest.yml that uses the staticfile-buildpack:

---
applications:
- name: my-static-site
  memory: 64M
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
  env:
    FORCE_HTTPS: true

If the static content is included in a different folder, you can add a path declaration. E.g., path: dist or path: assets.

Deploy:

$ cf push

Builds

If you are using a static site generator (e.g. Jekyll or Hugo) and/or it requires dependencies to be installed at deploy-time, it’s especially recommended that you set up continuous deployment. This way, the build happens in your Continuous Integration (CI) system rather than during the deploy itself within Cloud Foundry. This helps to make your deployments more reliable, have a smaller footprint, and reduce downtime.

Jekyll

Deploying a Jekyll site requires a few things:

  • Add or update your Gemfile to include the jekyll gem.

    source 'https://rubygems.org'
    gem 'jekyll'
    
  • Add a Staticfile pointing to the root of the built site as specified above. The static buildpack will interpret with file.

    root: _site
    
  • Update manifest.yml to use the static buildpack.

    buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
    

See 18F/notalone for an example.

Redirect all traffic

If a site moves to a different domain name, you can use cf-redirect to redirect all traffic from the old domain to the new domain.

You can read more about nginx customization at the Staticfile Buildpack documentation.