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 🙂

Posted in Umbraco, Windows Azure Tagged with: , ,
  • Satish

    Thanks for nice article. Just a question – the process of checking-in from local repository to Bitbucket and Azure deploying the changes seems automated (correct me), is it possible to control the deployment process manually? i.e. after checking-in changes Bitbucket, you choose when you want I to be deployed to azure website.

    • MaffRigby

      Hi Satish,

      You are correct – the deployment happens automatically when you push your changes in to Bitbucket.

      You can disable the automatic deployment from the Azure management portal (go to the Configuration tab for your website, and about half way down there is a ‘Deployments’ section. Delete the “Deployment Trigger Url”), however this sort of defeats the object of setting up the continuous deployment pipeline.

      An alternative solution would be to change the branch that is deployed to Azure (again this can be set in the same Configuration tab on your website) – by default the deployment to Azure happens when you check in code to the Master branch, so you could work and check in to say your Development branch, and then when you’re ready to push your code to Azure you can check it in to the Master branch.

      Hope this helps.

      Cheers,

      Maff

      • Satish

        Thanks.
        Would that mean that all files get re-deployed on each change being pushed or it’s limited to only changed file and libraries? a basic question, but can’t digest the fact if the latter is true.

        • I’m pretty sure that only changed files are deployed and not the entire code base.

  • Daniel Nordmark

    Thanks for a great post! Exactly what I was looking for! 🙂

  • Lee

    When umbraco users make changes to templates, etc in live is there a way to get umbraco to check those changes into source control automatically like UaaS does?

    • Hi Lee,

      Not that I know of unfortunately.

      You can use uSync to save those template updates as text/config files, and then you could manually update your source control with the updated uSync config files, but I haven’t seen anything that does this for you automatically.

      Thanks,

      Maff

About Maff

Maff Rigby

I'm a certified .Net, Umbraco and AngularJS freelance developer with over 15 years experience in the IT industry. As well as writing code I love to teach; I run a number of workshops and 1-1 coaching sessions on Angular JS and Umbraco, and share what I know and learn here!

I’m social (ish)

Connect with me on LinkedIn, follow me on Twitter, or fail to find me on Facebook.