Forums

Creating Web Sites in Windows Azure (OS X)

Download lab assets/Fork on GitHub/Report an issue

Overview

In this hands-on lab you will learn how to create a new web site in Windows Azure by using a template from the pre-packaged applications gallery. Once created, you will edit the site using a text editor and update the site using FTP.

Objectives

In this hands-on lab, you will learn how to:

Create a new Web Site in Windows Azure by using a pre-packaged application from the templates Gallery
Update your Web Site by editing files using a text editor and update the site using FTP

Prerequisites

The following is required to complete this hands-on lab:

A Windows Azure subscription with the Web Sites Preview enabled - sign up for a free trial

Note

Note: This lab was designed to use Mac OS X Operating System

Exercises

This hands-on lab includes the following exercises:

Exercise 1: Creating a Windows Azure Web Site using the Applications Gallery
Exercise 2: Customizing a Web Site on OS X using a text editor and update the site using FTP

Exercise 1: Creating a Windows Azure Web Site using the Applications Gallery

During this exercise you will create a new web site using the pre-packaged web applications from the Applications Gallery.

Go to the Windows Azure Management Portal and sign in using the Microsoft credentials associated with your subscription.

Log on to Windows Azure Management Portal
Click New on the command bar.

Creating a new Web Site
Click Web Site and then From Gallery.

Creating a new web site from the gallery
In the Blogs category select the WordPress application.

WordPress application from gallery
In the Configure Your App page, type an available Url (for example, wpressSample) and select Create a new MySQL database from the Database drop-down list.

Configuring Web Site
In the Create New Database page, type the database name or use the default name given by the portal. Select the checkbox to accept the legal terms, then click the confirmation button to complete the creation of the Web Site.

Configuring Database Settings
Once the web site is created, you will see it listed on the Web Sites section.

WordPress Web Site
Click the web site to open its Dashboard, and then click the Site Url link to browse to the new site.

WordPress Web Site Dashboard
Now you will configure WordPress for running on Windows Azure. Complete the Site Title, Username, Password and E-mail fields. Then, click Install WordPress.

Installing the WordPress Application
The WordPress installation will start. Once the process is completed, a screen will be opened showing the final status. Click Log In to access the Word Press application.

Installation Successful
Enter the Username and Password previously configured, then click Log In to open the administration site.

WordPress Login
To open the WordPress blog, on the administration site you can click on the link with the site's name, located on the upper-left corner of the page, in our case WordPress Sample.

WordPress Admin Site
A sample "Hello World" blog post will be shown. On the next exercise you will learn how to customize blog pages by using the FTP publishing feature.

WordPress "Hello World" sample post

Exercise 2: Customizing a Web Site on OS X using a text editor and update the site using FTP

During this exercise you will use the FTP publishing feature to update the web site by adding the Facebook's Like button to blog posts.

Go to the Windows Azure portal dashboard and copy the FTP HOSTNAME.

Obtaining the FTP deployment hostname
Go back to the command prompt and connect to the FTP publishing service by running the following command (replace the hostname with the value obtained from the portal).
```
ftp waws-prod-blu-001.ftp.azurewebsites.windows.net
```
`

Connecting to the FTP server

Note
Note: Replace the first waws-prod-blu-001.ftp.azurewebsites.windows.net value with the one obtained from the portal. Also remove the ftp:// prefix as depicted above.
Provide the User Name and Password of your deployment credentials. Make sure that the User Name is prefixed by the Web Site name (e.g. wpressSample\admin)

Providing FTP credentials

Note
Note: Deployment credentials are other than the Live ID associated with your Windows Azure subscription and are valid for use with all Windows Azure web sites associated with your subscription. If you don't know your deployment credentials you can easily reset them using the management portal. Open the web site Dashboard page and click the Reset deployment credentials link. Provide a new password and click Ok.

Entering the username and password
Go to the wp-content | themes | twentyeleven folder, download single.php using the GET ftp command.
```
get site/wwwroot/wp-content/themes/twentyeleven/single.php single.php
```
`

Downloading single.php
Open single.php in a text editor.

Opening single.php
Add the following code just before the <div id="content" role="main"> element. Save the file.
```
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450"></fb:like>
```
Note
Note: With this code you are including the JavaScript SDK (JS SDK), enabling you to use Facebook social plugins. You can read more about Facebook Like button here.

Adding Facebook's Like Button
Upload the single.php file using the PUT ftp command.
```
put single.php site/wwwroot/wp-content/themes/twentyeleven/single.php
```
Uploading the single.php file
Now, open the WordPress blog to see the Facebook's Like Button you've just added.

Facebook's Like Button

Summary

In this hands-on lab you have learned how to create a new web site in Windows Azure by using a template from the pre-packaged applications gallery. Once created, you updated the site using a text editor and updated the site files using FTP.