Prototyping UI with Static Websites: Deployment!

In this article, you’ll learn how to share the website you made from scratch with the world.

I want to share a website.

A great way to share a static website is to deploy the source files to a server where it will be hosted at a URL that you can share.

Another way to share your site is to share the files directly. In this case, collaborators would download the HTML, CSS and Javscript of your site directly or remotely through a service like GitHub or BitBucket.

What is a web server?

Web Servers provide remote access. They’re connected to the internet so that other machines can access files stored on a server via HTTP requests.

When you deploy a website to a URL you copy over (push) the files from your local directory to the web server that’s setup to serve those files.

It’s easier to host a website on a server because it’s on all the time, so when your computer shuts down it doesn’t take down your site with it.

How do I iterate on my website after it’s been deployed?

A typical workflow involves updating your site locally regularly where only you can see the changes and deploying periodically whenever you make a significant change that you want to share.

Local Site — visible to only you
Deployed Site — visible to anyone with the URL
What are deployment web services?

Deployment web services provide web infrastructure. This is useful because purchasing a service is way easier than buying, maintaining and managing server hardware on your own.

Why Pivotal Web Services?

Pivotal Web Services has the added advantage of making it easy to deploy multiple apps at once. So for instance, you could have multiple versions of a design hosted at different URLs such as myproject-firstprototype.cfapps.io and myproject-secondprototype.cfapps.io.


Getting Started with Pivotal Web Services (PWS)

  1. Sign up for an account here: https://run.pivotal.io/
  2. Install Cloud Foundry’s Command Line Interface (CLI) on your machine to push and manage apps on PWS: https://console.run.pivotal.io/tools
  3. Login to your account and create an Org from the drop-down menu, pick a name relevant to your project, this name won’t be publicly contained within the URL.

Using the CLI: Logging In

Open a command prompt and cd to your project’s directory.

$ cf login

Sample CLI Login Interaction

$ cf login
API endpoint: https://api.run.pivotal.io
Email> youremail@email.com
Password> *yourpassword*
Authenticating...
OK
Select an org (or press enter to skip):
1. your_org
Org> 1
Targeted org your_org
Targeted space development
API endpoint:   https://api.run.pivotal.io  (API version: 2.451.0)
User: youremail@email.com
Org: your_org
Space: development
What is a Buildpack?

Cloud Foundry runs your web application using Buildpacks.

When you push to Cloud Foundry, it scans your Project directory to detect what buildpack to use. Since we’re making a simple static website we’ll create a StaticFile so that Cloud Foundry can detect that it should use the StaticFile Buildpack.

Using the CLI: Creating a Staticfile

First we’ll create a Staticfile to signal to Cloud Foundry that our application requires the Staticfile Buildpack.

Creating a Staticfile for the Staticfile Buildpack

By default, the Staticfile buildpack will serve index.html just like our local python server did before once we deploy our site.


There are only two hard things in Computer Science: cache invalidation and naming things.
— Phil Karlton

You’re almost ready to push (and deploy!) your site to PWS. All you need to do is pick a unique app name and then issue this command after you’ve logged in to cf:

$ cf push uniqueAppName

Special Thanks

Thanks to Michelle Kang, and Sung-Yoon Kim for their contributions to this article.