In our earlier article we have seen how to design and deploy a Word press Website(Create a WordPress Website in minutes with Azure Portal – #Meet Azure Edition) in Windows Azure and also we have seen how to design and deploy a website designed in Visual Studio (Create Websites with the New Windows Azure Portal – #Meet Azure Edition) to Windows Azure Environment. The steps involved in these design process is very simple where we made use of the third party application to directly install on the cloud and do the necessary setup to make the website available online with in couple of minutes.  

Now the next step is to design our website where in the first case since we have used the Word Press package directly installed to the Azure environment, now to edit the design we have to make use of the existing templates but if at all we want to edit it offline on to the code base directly we need to have a mechanism where we can upload and download the source code from local to Azure environment each and every time. So here we have been provided with an option of WebMatrix which is a Microsoft open source tool through which we can edit the and upload the websites easily.        [more]

WebMatrix downloads the latest code from the Azure environment locally and once we update the necessary changes we can upload it directly easily. Let us start with editing the website which we deployed in our earlier article, first login to http://windows.azure.com with your valid subscription and navigate to the Website section where we can see the list of available websites as shown in the screen below.

Now select the website which we want to edit and at the bottom we can see the list of options to Browse, Stop, Upload Delete and WebMatrix. In those option we need to select WebMatrix which is used to take the backup from the Azure environment, then create a local copy for editing. Clicking on WebMatrix will download the required software which takes some time as it’s a stand alone application that runs from your local machine. If Web Matrix is already installed then the application will be opened as shown in the screen below.

Once opened WebMatrix will sync the project completely to the local environment and we can see the list of files available as shown in the screen below. Navigating to each of the folder will sync the folder and will get the latest files one by one to the local environment for editing.

Now we can select and navigate to different folders and double click on the file name to open it locally, clicking on the file name will get the latest from the Azure server where its deployed and we can see the file opened in the Right Side pane as shown in the screen below.

We can edit it completely as per the requirement and click on the run button will add the page directly to the remote machine and opens the updated page in a browser of the choice we select from the list as shown in the screen below. Here we are clicking on the RUN button and select the browser.

Clicking on the Internet Explorer will first save the page to the remote machine i.e. the Azure environment, basically it syncs the latest code to the environment as shown in the screen below.

Once the file is saved successfully we can see the website is opened with the changes in Internet Explorer as shown in the screen below, we can similarly run in different browsers and test if the page works fine in all the different browsers.

If at all we want to take a local copy again, we can simply click on the DOWNLOAD button at the top ribbon menu and we can see the code will be downloaded with a wizard which helps to configure it locally as shown in the screen below.

So in this article we have seen how to edit the website which is deployed using the Open Source Application from the Gallery by editing it in WebMatrix easily. That’s it for today, we will see you in the next tutorial until then please visit the blog frequently and get the latest update on the technologies and stuffs. Happy Programming!!!