How to host a static site (HTML/CSS/JS) on Bluemix, without the Comp Sci degree

TL;DR

(Too long; didn't read)

If you're a designer who wants to code for design at IBM, it can be hard to host your static sites. Here's how, in an "explain-it-like-I'm-5" format (assuming you're a 5-year-old who knows basic HTML/CSS).

Recently, I wanted to see if Bluemix could optimize its CSS font stack, so I was given the challenge to make a static site to test font stacks. Partly, I was okay with the challenge – I do know some basic HTML and CSS from building my portfolio site, and a few other fairly basic projects. But partly, I was intimidated. How would I figure out how to host it on IBM Pages or Bluemix, so I could actually share it at work?

See that degree? That's for Graphic Design, not Computer Science (And yes, that is from my Instagram feed, where you can also see my lettering exploits). I'm still getting used to all this internet technology. Until last week, I'd only ever hosted things on personal hosting sites, like GoDaddy and HostGator. I've needed and tried to host things on Bluemix before, and it wasn't easy. In fact, at those times I just had to turn to the front-end devs on my team and ask them to do it for me.

Why is it so hard to host things at IBM? Because to do so, you need to learn about scary new tools like Git and the Command Line, at least to a basic level. And you're already busy blasting away at wireframing, visual comps, and wrangling Notes and w3 – aint nobody got time for that. To make matters worse, whenever you ask a front-end dev for help, they seem to drop technical terms and link you to even more technical web tutorials. They're not being diliberately unhelpful; they just don't remember how hard it was to learn these tools the first time. They're awesome, but they've got the curse of knowledge.

On the contrary, I just learned how to do this 3 days ago, and I saved the Sametime chats and websites that got me there. So, here are the steps for hosting a static site on Bluemix.

(If any steps are confusing or seem to be missing, please Email or Sametime me to let me know at snixon@us.ibm.com).

The Actual Tutorial

Enough preamble. Here's how to do something useful:

  1. I / Git

    1. Download Git, if you haven't yet. Install it on your system.

      • for Mac OSX

        This installer should allow you to install Git onto your Mac just like any other app that you'd find online. Just be sure to right-click the package and click "Open," then accept that you want to open it, even though it's from an unidentified developer.

      • for Windows

        (Even though this tutorial is largely aimed at Mac users, this may still be helpful for someone out there).

    2. Create the folder you want to use as the root folder for your static site

      I happen to put these root folders into a folder for code experimentation, called "Playground."

    3. Open your Terminal.

      This is also called the command line, and is used to access Command Line Interfaces (CLI).

    4. Navigate to your static site's root folder by typing: cd your-folder-name

      FYI "cd" stands for "Change Directory," because directory is the more-computery term for folder.

      Press ENTER on your keyboard to submit each command in the terminal. You may need to cd a couple of times to get to the proper level.

    5. In your command line, type: git init

      This will create a hidden file in this folder, allowing you to do awesome Git things with it (like committing versions)

      Success! Now you're ready to tell this folder when you want it to add file updates to the repo, and when you want to commit those (mark a checkpoint with a message). More on this in the "For Each Update" section below.

  2. II / cf + bmix

    The second big thing you have to get configured is the Cloud Foundry and Bluemix connection.

    Preliminary Steps

    1. If you don't have one, get an IBM Bluemix account.
    2. If you haven't done so yet, you'll need to download the Cloud Foundry CLI on your computer. You can get the latest release on GitHub.

      (When you're on that page, click the "Installer" that matches your computer OS).

    Cloud Foundry and Bluemix App Setup

    1. First, log into bluemix through the command line:
      1. Type: cf login

        This will prompt you to enter your email - do that

        You will then be prompted to enter your password. Copy and paste it in. It won't show up (for security purposes), but press ENTER as usual and it'll respond.

      2. If you have multiple Spaces in Bluemix, you'll be asked to select a space. Enter the number of the space you want this app to be in, and you'll be sorted.

      3. The command line may tell you that the API endpoint is Stage 1 Bluemix.

        If so, type: cf api https://api.bluemix.net

        This should point your updates at the "Prod" (publicly available) version of Bluemix.

    2. Before doing anything in the Bluemix web UI, you need to use the command line to create your app in Bluemix.

      In the command line, while you're still in your site root directory, type: cf push example-app-name -m 64M -b https://github.com/cloudfoundry-community/staticfile-buildpack.git

      (Where example-app-name is replaced with what you want your app name to be. Make a name with no spaces or uppercase letters. It has to be a unique name that no one else has claimed yet, so try to grab you favorite celebrity's first name if you want some cachet.)

    3. Now, you need to create a simple file to tell Bluemix this app will be a static site.

      1. Still in that same CLI, and in the same folder/directory Go into your command line and type: touch Staticfile

        This creates an empty file called "Staticfile." This completes a magical incantation.

        The CLI looks like nothing happened, but trust me: magic happened.

      2. Next, type: cf push

        This pushes the magic to your app in Bluemix.

  3. III / Hello World

    1. Make a basic index.html file and save it in your root folder for this site.

      1. Open your text editor of choice and type a message (If you want, take the old standard, "Hello World.")

      2. Save this as index.html in your site root folder.

    2. Push it and test it!

      1. In the CLI, type: cf push example-app-name

        Remember to replace example-app-name with the name of your own app.

      2. You should see a bunch of activity in the terminal. Wait for it to give a "running" status for you app.

      3. Go into the Overview of your app in the Bluemix web UI. From here, you can click the link labeled "Routes" just below your app name, and that will open your site in another tab.

      4. Success – you now have a live site!

        It's at http://example-app-name.mybluemix.net/index.html

        You may have to go onto the Bluemix web UI and choose another URL for your site.

  4. IV / For Each Update

    Now that you're all hooked up, updating your code and pushing it live is pretty simple.

    1. Do some coding on your own machine, as usual (previewing in the browser, etc). Get to a place that feels like a checkpoint. Now, you should make a Git commit by doing the following:

      1. Stage the changes by typing: git add .

        This stages the files and lines things up to be committed.

      2. Commit the changes by typing: git commit -m "Write what the change is here"

        (Make sure to include the message with the commit, or the command line gets weird)

    2. Once you have committed the changes in your Git repo, they can be sent to Bluemix.

      Push them to Bluemix by typing: cf push example-app-name

You did it! It's beautiful. Such internet! Very share.

(Hopefully). And if you got to this point and it didn't work, seriously, please let me know, so I can improve this article and help you get your site live. Email or Sametime me at snixon@us.ibm.com.

Additional Resources

This tutorial has only covered the bare-bones basics about using Git and pushing to Bluemix, in large part because I'm still learning these things, myself. To learn more about Git, here are a couple of great resources: