Digital Developer Conference: Cloud Security 2021 – Build the skills to secure your cloud and data Register free

Archived | Deploy a Hello World web page to the cloud

Archived content

Archive date: 2020-05-20

This content is no longer being updated or maintained. The content is provided “as is.” Given the rapid evolution of technology, some content, steps, or illustrations may have changed.

This tutorial shows you how to create a simple “Hello World” app to deploy a web page to the cloud using nothing but HTML and a static buildpack that is hosted on GitHub.

What you need for your app

  • An IBM Cloud account.
  • The latest version of Chrome, Firefox, Internet Explorer, or Safari.

Here’s the plan

Step 1. Create a toolchain for your new app

  1. Log in to IBM Cloud.
  2. Navigate to the DevOps dashboard.
  3. Click Create a toolchain.
  4. Select the Develop a Cloud Foundry app toolchain.

    Develop a cloud foundry app

  5. On the toolchain page, enter a name for your toolchain (usually your app name).

    Toolchain page

  6. For the Git Repos and Issue Tracking tool integration, select the Repository type of New, and enter a name for your new repo.

    Tool integration

  7. Click Create. This will open up your toolchain’s overview page.

    Toolchain overview page

Step 2. Create a simple web page

After your toolchain is created, it’s time to code! In this example, you say “Hello” to the world in a simple webpage. You can do the coding and testing in the Web IDE, completely in your browser.

  1. On your toolchain’s overview page, click the Eclipse Orion Web IDE. The Web IDE will open. A few files like .cfignore and .gifignore will be created for you automatically.
  2. In the Web IDE, select File > New > File.
  3. The file is highlighted so that you can name it. Enter index.html.
  4. In the editor area on the right, paste the following:

              Hello, IBM Cloud World!

    You should now see this:

    Web IDE page

Step 3. Create a manifest

A manifest is a file that tells IBM Cloud how to deploy the application. It’s possible to deploy using the launch configuration wizard in the Web IDE without creating a manifest, but we’ll create a very simple manifest so that your app can be easily deployed using either the Web IDE or the CF Command Line tool.

  1. In the web IDE, select File > New > File.
  2. The file is highlighted so that you can name it. Enter manifest.yml.
  3. In the editor area on the right, paste the following:

    - buildpack:
      host: simple-website-${random}
      name: simple-website-${random}
      memory: 64M
      stack: cflinuxfs2

    The host is essentially the URL of your application.

Important: The host and app name you choose must be unique across all of IBM Cloud, so replace ${random} with a unique string, such as your initials.

Each line in the manifest provides important instructions to IBM Cloud about how to deploy your app.

  • The buildpack contains the necessary framework and/or runtime support for IBM Cloud to run your application. For this application, we’re using a static file buildpack that is hosted on GitHub.
  • The host is essentially the URL of your application. The host you choose must be unique across all of IBM Cloud. We added the ${random-word} keyword so that your deployment will not collide with the deployments of others who follow this tutorial. You can customize the host to be whatever you like.
  • The memory refers to how much memory you are allocating to your app in your IBM Cloud space. Memory is not a required part of a manifest, but it is included in this example so that the app does not consume a large portion of the memory allocated to your IBM Cloud space.
  • The stack is defined by Cloud Foundry as “a prebuilt root filesystem (rootfs) which works in tandem with a buildpack and is used to support running applications.” The static file buildpack we’re using requires the cflinuxfs2 stack. IBM Cloud currently defaults to an older stack, so we need to specify the stack as cflinuxfs2. Most buildpacks will not require you to specify a stack.

Make sure to use a unique name for host and name in this image. Don’t use the value displayed in the image, create your own random string:


By default, in the delivery pipeline, the Deploy stage uses the app name specified in that stage. So, if when you run the pipeline it says the URL is already in use, you may need to update the Application name field to also use a unique name:

Deploy stage

Step 4. Deploy and open the app

Now that you have a webpage and a manifest created in your workspace, you’re ready to deploy!

  1. In the web IDE, click the Deploy button:


    Your application is now deployed to IBM Cloud. The process takes about a minute to complete. You’ll know it’s finished deploying when you see a green dot in the run bar:

    green dot

    If your deploy fails, check the launch file to make sure it has unique names, too:

    1. Right click in by the launch and then click Edit.

      Click Edit

    2. Change the launch configuration to use a unique Name for the application and for the host:

      Click Edit

    3. The file is saved automatically so try to deploy it again.

      Important: There are three places deploy information can be specified:

      • In a launch configuration file to be used for the web IDE deploy.
      • In the manifest.yml file for all values except the Application name which comes from the Deploy stage by default for the pipeline deploy.
      • In the manifest.yml file to be used for cf push commands.
  2. When your app is deployed, open it in a web browser by clicking the Open the application URL button:

    Open the app

  3. The running website opens in a new window:

    Running website

Note: You can change the host name in the launch file (which is used for deploying from the workspace in the Web IDE) so that you can have your published site running while you are testing updates to another URL.

Step 5. Commit your changes to the repo

So far, you have done all your work in the Web IDE workspace. Now you want to commit the changes to the Git Repos and the Issue Tracking repo.

  1. Click on the Git icon:

    Git icon

  2. On the commit page, enter a commit comment and click Commit:

    Commit button

  3. Click Sync to push your changes to your repo:

    Sync button

After you sync the Git repo, the delivery pipeline automatically kicks off a new pipeline so your updated app will be deployed.

Note: You can deploy your app to a different URLs from the web IDE and from the pipeline. This allows you to develop in the Web IDE while having your production version running.

Congratulations! Your application is now sending cheerful greetings to the IBM Cloud world, and is in your Git Repos and Issue Tracking repo.

Conclusion and next steps

In this tutorial, you created a simple “Hello World” web page by creating a toolchain with an empty Git Repos and Issue Tracking repo, creating index.html and manifest.yml files, and deploying the app to IBM Cloud. To continue working on this app, you can make changes to index.html or create new pages and then deploy to IBM Cloud.

Dive deeper into using IBM Cloud to try it for yourself. Check out the IBM Cloud documentation for any questions.