Deploying Umbraco 7 to an Azure Website using Bitbucket

So the other week I posted a blog post called How to deploy Umbraco 7 to an Azure Website using Visual Studio Online which, apart from having a very long title has also proved to be quite a popular article!

Earlier this week someone got in touch asking if it’s possible to do a similar thing with Bitbucket, but he was wanting to install Umbraco to his Azure Website from the Azure Gallery, and then bring it down into a Bitbucket repository, make changes locally and then commit/push it back up to Bitbucket, which would deploy the new version to his Azure Website.

I said it was probably very similar, but didn’t know for sure. But however, now I know because I tried it myself! So here’s how you do a similar thing to that other thing, but using Bitbucket instead of Visual Studio Online:

First we’re going to set up a new Azure Website using a pre-defined Umbraco image from the Azure App Gallery.

1. In the Azure Management Portal, choose to create a new website, and select the “From Gallery” option:

deploy-umbraco-to-azure-websites-using-bitbucket-1

In the next screen, choose “CMS” from the left hand menu, and select “Umbraco CMS” from the list of available CMS applications:

deploy-umbraco-to-azure-websites-using-bitbucket-2

Next, configure your Umbraco installation by choosing where you want your database to live. For this example I’ve chosen the free 20Mb database that comes with the Azure Websites. If I was going to use this as a proper website I would probably go for a 1Gb database to start with (you have to pay for that). It’s also worth noting that the closest data centre to the UK is in the ‘North Europe’ region in Azure (I think it’s hosted in Dublin), rather than the ‘West Europe’ as you would expect.

deploy-umbraco-to-azure-websites-using-bitbucket-3

The next screen is another database set up screen, this time it’s setting up a new database server (if you chose to put your database on an existing database server you won’t see this screen):

deploy-umbraco-to-azure-websites-using-bitbucket-4

That’s it – click the “Finish” button and in a few minutes you will have a brand new shiny Umbraco installation!:

deploy-umbraco-to-azure-websites-using-bitbucket-5

Next, we head over to Bitbucket and set up a repository for the code.

This is pretty simple – log in to your Bitbucket account and create a new repository:

deploy-umbraco-to-azure-websites-using-bitbucket-6

Next, clone your Bitbucket repository to your local machine (I’m assuming you know how to use Git. If you don’t, then learn about it very quickly here!). First, get the URl for your repository:

deploy-umbraco-to-azure-websites-using-bitbucket-7

Next, clone that repository to your local machine. I use TortoiseGit for working with Git repositories, but there are others out there that do pretty much the same job:

deploy-umbraco-to-azure-websites-using-bitbucket-8

Once you’ve done this, you should see an empty Git repository that looks something like this:

deploy-umbraco-to-azure-websites-using-bitbucket-9

Now you have your website and Bitbucket repository set up, we need to get the files from your website and put them into Bitbucket.

In the Azure Management portal, you need to set up your deployment credentials. This is how you will FTP in to your website and download all your Umbraco files. Go to the dashboard for your Azure Website, and click on “Create your deployment credentials” on the right hand side of the page (in my case I had to choose the “reset” option because I had already set up my credentials for a previous demo):

deploy-umbraco-to-azure-website-using-bitbucket-10

Choose a username and password:

deploy-umbraco-to-azure-websites-using-bitbucket-11

Now on the same Dashboard page, you will see the link to your FTP account on the right hand side of the page. Also note your deployment username has your site name infront of it. So you will need to login to your FTP account with sitename\username (in this example my FTP username is bitbuckettest\maff):

deploy-umbraco-to-azure-website-using-bitbucket-12

Connect to your website through your favourite FTP client, and you will see this structure. Select all and download these files to your Bitbucket repository folder on your local machine:

deploy-umbraco-to-azure-website-using-bitbucket-13

Now you have all the files locally, you need to connect your Azure Website to your Bitbucket account. Again, on the Azure dashboard, click “Setup deployment from source control” link on the right hand side of the page:

deploy-umbraco-to-azure-website-using-bitbucket-14

Choose Bitbucket from the list in the popup window, and follow the instructions to authenticate your Bitbucket account:

deploy-umbraco-to-azure-website-using-bitbucket-15

Next, choose the repository you just set up in the previous step, and click the “OK” button:

deploy-umbraco-to-azure-website-using-bitbucket-16

Nearly there – just a few more steps to take and then you can have a nice cup of tea. All that’s left to do is commit your files to your Bitbucket repository, so first you need to add all the Umbraco files you downloaded to your local Git repository:

deploy-umbraco-to-azure-website-using-bitbucket-17

Next you commit them to your local Git repository:

deploy-umbraco-to-azure-website-using-bitbucket-18

And finally you push your committed files to the remote Bitbucket repository:

deploy-umbraco-to-azure-website-using-bitbucket-19

If you check your Bitbucket repository now it should look a bit like this with all your Umbraco files now checked in:

deploy-umbraco-to-azure-website-using-bitbucket-20

And finally if you go back to the Azure Management Portal and click on the Deployment link at the top of the page, you should see your deployment in progress:

deploy-umbraco-to-azure-website-using-bitbucket-21

So that’s how you deploy Umbraco to an Azure Website, using Bitbucket! Enjoy 🙂

Tagged with: , ,