How to Setup Wordress on Azure – Akira’s Custom Tattoos
At this point, you should have a Microsoft Azure Trial/Account up and running. If not, please go back to the post on setting up your Azure Trial. Today, you're going to learn how to setup WordPress on Azure. It's going to take about five minutes, and the whole WordPress Azure process is shown in the video above.
Akira and Our Example Project - Akira's Custom Tattoos
My daughter, Akira, started her first year of university a couple of months ago. She plans on becoming a doctor and is currently enrolled in a Bachelor of Nursing program. Total cost for first year (tuition/books/residence/mealplan) is about $17,000. Medical school means another seven-eight years of school. Her mom and dad's bank account is going to run dry well before she's finished. She also has a brother who will be starting university in a couple years - so the expenses are not going down any time soon.
She needs an income stream of her own.
Akira draws. She's drawn stuff all her life. Recently, and with more frequency, people are asking her to design custom tattoos for them. Roses, skulls, and wicked patterns tend to be her thing and her designs are now permanently etched on a few friends which is pretty damn cool. Akira just turned 18 and will even be etching one on to herself next Friday (now that she doesn't need her prudish dad's permission anymore...). Although I'm a little biased, she's definitely talented. Being the opportunist I am, I figure there's a business there and it's a perfect project to use to illustrate how this whole VPA internet marketing process works. Win-win.
If you already have an idea for an online business, feel free to build it out as we move through this training substituting your idea whenever I build something for Akira. If you don't, don't worry about it yet. Just follow along as we build Akira's Custom Tattoos and see how it all fits together. Don't tell my daughter, but I intend on giving her this site for Christmas this year. My aim is to give her a working business that provides a passive income stream, some extra design work if she chooses to do it, and even a backup plan should university not work out. My hope, as her parent, is that it manages to fund the remaining years of her university...
So, here today, Akira's Custom Tattoos will be born - and the first step is to grab a piece of the internet. To do that we need to setup Wordpress on Azure.
What is WordPress?
WordPress is a free and open-source content management system that runs on PHP and MySQL. None of that really matters to you because you're not going to have to deal with any of the code or database stuff going on. Instead, think of it as a framework that you will build your websites on top of. It handles a whole bunch of things that make it real easy for you to build websites with whatever kind of functionality you can imagine. We'll get into much more detail as to exactly what you can do with WordPress later on. For now, we just want to get it up and running on Azure.
WordPress comes in two flavours. First is a hosted solution at WordPress.com that basically allows you to signup for a WordPress account and use their system. The second is a self-hosted version where you install Wordpress on your own web server. The first option has the same limitations as all the other online web site builders. You are stuck using the WordPress.com system and give up an element of control and customization by doing so. We're going with option two and will be setting up WordPress on Azure (which is essentially your own web server) so you have complete control over what you want to install for plugins or any customizations you want to make.
Setting Up WordPress on Azure in Just Over Five Minutes
Here we go - start your timer.
- Make sure you are logged into the Azure Portal.
- Click on New and window will slide out to the right. Azure calls these slideouts blades.
- In the search box - type WordPress and hit enter. Another blade will slideout to the right giving you a bunch of WordPress options to choose from. The one you are interested in is usually first. Click on the one that says WordPress, where Publisher is WordPress, and Category is Web + mobile. The other variations that are there are also WordPress installations, but they are built on different types of Azure services (virtual machines and the like).
- On the next blade, you can read a bit about WordPress and what you are creating, then hit the Create button at the bottom. Doing so starts a process called deployment where Azure carves out some computing resources to assign to your WordPress installation.
- Alrighty, next blade that shows up is where you start to identify some settings. Next picture is pretty busy, but take it number by number and work through it. Description for each number follows the picture.
- 1. App Name: Enter a name for your web site. This is temporary as you'll eventually assign a domain name, but while you are building it, this is what you'll use until you're ready to launch. It is in the form http://yourname.azurewebsites.net. Once you have something that works (i.e., nobody else has used it), you'll see a checkmark on the right. Notice I entered akiracustomtattoos.
- 2. Subscription: You should see Free or Free Trial here. You can leave it, or you can select Pay As You Go from the drop down list. This tells Azure how to bill you. We're only selecting free services, so there is nothing to bill. Once you start having to get into the paid services we'll cover how subscriptions work in more detail.
- 3. Resource Group: Purpose of this is to group anything pertaining to this site under the same Resource Group, making them easier to find once you have a lot of things in your dashboard. I'd suggest using the name of the site - Akira_Custom_Tattoos. Notice that you have to use underscores (no spaces).
- 4. Database Provider: Select ClearDB from the dropdown. We'll be coming back to this in a little bit, but remember when I said WordPress runs on PHP and MySQL - MySQL is the database and ClearDB provides one.
- 5. App Service Plan/Location: An app service plan is the container for your app (website). What you select here determines the features, location, cost, and compute resources associated with your app. When you click on it, a blade will slide out to the right. From there, click on Create New and another blade slides out.
- 6. App Service Plan: enter a name for your app service plan. Again, suggest using the name of the website - in our case AkiraCustomTattoo (no spaces allowed). When it's acceptable, you'll get the checkmark on the right.
- 7. Location: this tells Azure where to physically store your stuff. Microsoft has data centers all over the world. You want to pick a place that is closest to where you figure all your visitors are going to be from. Doing so makes load times quicker. It's not super crucial and I realize that at this point, you probably have no idea where your visitors are. Recommend just picking a location that is close to you. In our case, East US is selected.
- 8. Pricing Tier: this is where we pick the plan that assigns resources to your app. While we develop, we want to pick the free option. Once you click on this, another blade slides out to the right.
- On the blade that slides out - top right - is a link that says View All. Click that to ensure you can see all the plans otherwise Azure provides 2-3 recommendations to use. Once you can see them all, scroll down to the bottom and ensure that F1 FREE is selected. Then hit the Select button. At this point, the blade will disappear and you should have something resembling the following with F1 Free in the Pricing Tier. If it looks good - click OK.
- After clicking OK, the blades are going to disappear. Next we'll setup the database settings in the same manner. Follow the numbers in the following picture.
- 1. Database - click here to open up the database selection blade on the right. It lists all your current databases.
- 2. Create New - you're going to create a new database for your website vice selecting an existing one from the list, so click Create New. Another blade opens to the right.
- 3. Database Name: Select a name for your database. Can be whatever you like (no spaces). You'll get the checkmark when you use something that's available. In our case, I entered tattoos.
- 4. Database Type: You have two options - Shared or Dedicated. Select shared. Dedicated is for when your site gets big with lots of traffic and you'll pay for it. Shared gives you access to the free option for development.
- 5. Location: Select the same location that you chose when setting up your website. This is important as your website needs to talk to your database and transfer data back and forth. If you put them on opposite sides of the world, you're going to slow things down and potentially incur data transfer fees. So, because I picked East US as the location for the Web App, I'm putting the database in East US as well.
- 6. Pricing Tier: This is where we'll choose the database plan. Click it and blade slides out to the right. Select the Mercury option ($0 cost) and hit Select. Notice that this is a pretty small database. You only get 20MB of space and 4 connections. You're quickly going to outgrow it, but next size up is only $3.50/month and so on. For now, though, free is fine.
- After hitting Select, your screen should look something like the following. Next you have to click on Legal Terms and hit the Purchase button. Before you do, ensure you check the two parts I've underlined. As you're starting with Mercury - cost should say 0.00CAD (or your currency)/month. Also note that if you decided to pick a bigger database plan to start with thinking you can use some of your free trial credits - you can't. The MySQL database is provided by a third-party - Clear DB - so your credits don't work with them.
- After you hit Purchase, then OK, you'll end up with a single blade that should look like the following. Almost done - just a couple more settings as follows.
- 1. App Insights: Click to turn it ON. Gives you access to some analytics about how your site is performing that we'll cover later.
- 2. Pin to dashboard: Recommend checking it as it will add a tile to your dashboard making it easy to find when you need to make a change to your settings.
- 3. Create: Push the button and let the magic happen. You'll be taken back to your dashboard where you'll see a tile "Deploying WordPress". Wait for a few seconds while it gets setup. When it's done, you'll be taken to the settings page for your new site.
- Alright - so lots going on there - don't worry about any of it for now. Your next step is to click on your websites name. In this case - http://akiracustomtattoos.azurewebsites.net. Once you do, a new browser window will open and you'll see the following:
- Select your language and hit continue. The next screen asks for some WordPress settings and looks like below. Simply fill in the information and then click Install WordPress. Note that you can change the provided password to something else, but pick something secure. Make sure the Search Engine Visibility box remains unchecked - you want Google and other search engines to find you.
- If all goes well, at it should, you'll see the installation success screen. From there - don't login yet - you'll just get confused - instead visit your site - http://akiracustomtattoos.azurewebsites.net - and there you have it - your first website is up and running on WordPress Azure. Yes, it looks pretty plain, but we'll fix that soon enough.