Last week we looked at installing Vagrant with WordPress using Varrying Vagrant Vagrants. Now that left us with the default configurations and domains for our projects. Certainly fine to start out with, but really we want to use custom domains that match our client live or development domains.
So today we will add a custom domain to our Vagrant install as well as a new WordPress install for that custom domain.
If you haven’t watched the first screencast or read the post go do it and if you’re just here for the screencast, jump to the bottom.
The first thing we need to do is to open up terminal and switch to whatever folder you want to use for all your web development sites. For me that means typing
Next we need to clone the Varrying Vagrant Vagrants repository.
git clone email@example.com:10up/varying-vagrant-vagrants.git fancy-domain
That will put the repository files in a folder call ‘fancy-domain’. Now we need to dig in to the project and make some changes to the Vagrant configuration files.
Create a Database
Our first customization will be to create a new database for our custom site to live in. Navigate to ‘fancy-domain/database/’. Now we need to copy the file called ‘init-custom.sql.sample’ and we will call it ‘init-custom.sql’. We can do this directly from Terminal by typing
cp init-custom.sql.sample init-custom.sql which will copy the file and name it ‘init-custom.sql’.
Now open ‘init-custom.sql’.
In here we see some basic SQL that will create a new database and a new user with priviledges on the database. Since this is a local testing environment, I don’t bother getting fancy I make the database name, user, password match the client. So in our demo case here they would all be
fancydomain. Once you’ve made the changes save the file.
Add to the nginx configuration
Now we need to make some changes to the configuration of nginx so that it knows about our new custom domain location. Navigate to ‘/fancy-domain/config/sites’. Here we see a few files, but the one we are interested in is the one called
local-nginx-example.conf-sample. Again we want to copy this file with a new name, but this time we want the name to match our custom site. So type
cp local-nginx-example.conf-sample local.fancy-domain.com.conf. Now open the new file.
Here we just need to make a few changes. On line 28 we need to change
testserver.com to ‘local.fancy-domain.com’ and on line 31 we need to change
/srv/www/fancy-domain. All we did was tell nginx to listen for
local.fancy-domain.com and send requests for that domain to the folder found at
Final Setup Step
Now we need to edit the hosts file on our computer. In Mountain Lion you can find it by typing ‘sudo vim /private/etc/hosts’ which will prompt you for a password then open the file in Vim. Just like when we set up our basic Vagrant site, we need to tell our computer to send web browser requests for
local.fancy-domain.com to our local IP.
If you have done the previous tutorial as well, then you should already have a line that looks something like this.
192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev
To the end of that line we need to add our new custom domain as you see below.
192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev local.fancy-domain.com
Now we need to start up the server by typing
vagrant up inside our
fancy-domain folder. Remember this is the first time we have started this server so we need to wait a few minutes while it downloads 300mb of stuff.
Create Your WordPress Install
Now that we have booted up the server you can navigate to ‘fancy-domain/www’ and you will see a folder called ‘wordpress-default’. Duplicate the folder then rename it to ‘fancy-domain’. Then go inside and remove the
That’s about it, navigate in your web browser to local.fancy-domain.com/wp-admin and you should see the stock WordPress
install screen. Remember we named the database, user, and password
fancydomain. Keep it set to
localhost. Then install WordPress and you’re rocking custom domain inside Vagrant for your client.