Logo for Jonathan Kelley, Freelance web designer
Available (Enquire)
Blog
About
Process
Work

Deploying CraftCMS to Digital Ocean

CraftCMS is a beast of a content management system, but it does start to get a bit tedious when trying to upload it to Digital Ocean. In this second part of Getting started with Craft CMS, we go through launching your new website to Digital Ocean using Deploybot.

Deploying CraftCMS to Digital Ocean

Signup for Deploybot

Deploybot is one of the best systems I've used to keep track of client updates and deploys. It's one of the best systems out there for this kind of deployment, so shoot across to their website https://www.deploybot.com and sign up for an account. Connect your GitHub account and get it all setup, but keep the tab open.

Signing up to Digital Ocean

Open a brand new tab in your browser and head over to Digitalocean.com. We're going to use DigitalOcean (DO) to host our brand new fancy website! It's super fast and reliable and should give us some flexibility and reliability if we suddenly get 30,000 visitors overnight. If you haven't got an account sign up and get all registered with your payment details, or if you already have an account sign in.

Connecting Deploybot and DigitalOcean

Head back over to your Deploybot tab, and click the tab 'Integrations' this will present you with a screen with lists of hosting providers. We want to click the 'Digital Ocean' one. Follow the instructions and authorize Deploybot to talk to Digital Ocean for you. Once completed Digital Ocean should now have an SSH key for DeployBot added to your account.

Create your first Digital Ocean Droplet

Once you're into Digital Ocean, we're going to go ahead and create a 'New Droplet' (Droplets are digital oceans servers) when you're in the new droplet window, you should see a tab saying 'One Click Apps', if we head over to this section you should see an image in the list called 'LAMP V....'. We want the latest version of LAMP to hold our powerful CraftCMS install, so go ahead and choose that.

You should be prompted to 'Add SSH keys' to your droplet; we want to do this as Deploybot needs access to our droplet so we can successfully deploy our local code. As we've connected Deploybot and DigitalOcean when you click 'Add SSH Key' you should already see DeployBot has one listed, let's add that as well as our personal one from our computer. Don't know how? Head over here and follow this tutorial.

Transferring Craft CMS

When you've created your droplet, we want to send over a fresh CraftCMS install. Make sure your local Craft is updated to the latest version, so they match up - otherwise you're going to have a bad time! (Don't forget to rename the folder within the freshly unzipped folder 'public' to 'html') I use 'Transmit' for Mac to transfer files, you should be able to log in fairly easily to your droplet through it using your local SSH key. (It's also free to use!) Use the following settings to SSH into your droplet. Once you've SSH'd into your droplet, you'll be dumped into the root folder, but we want to be in

/var/www/

Let's navigate to the 'www' folder and place your local unzipped craft folder in there (Remember a fresh install folder! Download a new Craftcms and unzip it in your downloads folder - Transfer this one across only & rename your public folder to HTML).

It should look like this:

/var/www/Craft-2.6.4/

Configuring our Droplet

Now our droplet is created, we should have a unique URL to our fresh droplet on our droplet dashboard. Let's head over to it and make sure it's all up and running (you should be presented with a fish! If so - awesome we're up and ready to go!)

Let's make sure we prepare our server for Craft to be installed on it. This is an easy stage; you can either click 'Droplet Console' on the digital ocean website or open your Terminal on your MacBook and SSH into your droplet using the following command:

ssh root@your.drop.ip

If that command worked, we're in and ready to rock'n'roll! When you're in copy and paste the following commands and press enter:

chown -R www-data:www-data /var/www
chmod -R 770 /var/www
chmod -R 775 /var/www/craft
chmod -R 775 /var/www/html
chmod 774 /var/www/craft/app
chmod 774 /var/www/craft/config
chmod 774 /var/www/craft/storage
a2enmod rewrite
php5enmod mcrypt
service apache2 restart

Let's log in to MySQL

Ok, hard and code bit has been complete! But now is time for MySQL (get your bloody notepad open because we're about to type passwords in you should remember!). The MySQL password and username displayed to you as soon as you SSH into your droplet, so scroll back up in your terminal window, straight to the top! It'll be there you just have to read a little! After this, DigitalOcean likes you to run through a small install; I recommend this for security reasons, type the following command and run through the on-screen instructions - read carefully & write down all your passwords.

sudo mysql_secure_installation

Once you're through the installation, go ahead and create a user for Craft on our MySQL server, by doing the following commands (don't copy and paste) if you followed on from my previous tutorial, your local database name should be 'craft_db' please use this as your database name.

mysql -u root -p

CREATE USER craftcms@localhost IDENTIFIED BY 'ComplexPasswordGoesHere';
CREATE DATABASE craft_db;
GRANT ALL PRIVILEGES ON craft_db.* TO craftcms@localhost;
FLUSH PRIVILEGES;
exit

Restart MySQL with the following command

service mysql restart

Navigate to your Server and install CraftCMS

Let's navigate to our server and install CraftCMS just as we usually would! The install screen should be at the following address:

**your droplet ip**/admin

If you get the monkey screen woohoo, you're so close to getting complete and all up and running! Be warned; there is a bug on CraftCMS with DigitalOcean that during the install it comes up with a message saying 'Oops.' during installing, this is a bug, and it means it's finished. So if you get that, just close the tab off after around 10-15seconds and navigate to the same URL again in a new tab - you should see your admin panel login.

Prepping for Deploy with Github

Now, if you haven't already committed your work to Github you really should. But first, we need to add the following lines in our local install to a .gitignore file (this file tells git to ignore the following folders as we don't need them - Craft is already installed on our server and doesn't need all this!). Create or Edit a .gitignore file at the root of your Craft installation and paste in the following:

craft/app/
craft/plugins/
craft/storage/
craft/config/db.php

Now, let's commit this work to Github. If you don't know how to do so, please follow numerous guides online or just follow the instructions when you create a new GitHub repository. You can do the following commands (cheers wild bit!)

# Go to your working copy and create a Git repository:

cd ~/Sites/craft-project
git init

# Add and commit all files in working copy:

git add .
git commit -m "Initial commit"

# Add a Git remote (change the URL!) and push repository to it:

git remote add origin https://github.com/wildbit/craft-project.git
git push -u origin master

Editing our local General.php file

We need to tell CraftCMS that we're going to have two environments, one production environment, and one local environment. This allows us to make changes on local host and send them to production when they're ready to deploy!

Here's my /config/general.php file

return array(

'*' => array(

),

'localhost' => array(

'devMode' => true,

'siteUrl' => 'http://localhost:8888/',

'server' => 'localhost',

// Enable CSRF Protection (recommended, will be enabled by default in Craft 3)

'enableCsrfProtection' => true,

// Default Week Start Day (0 = Sunday, 1 = Monday...)

'defaultWeekStartDay' => 0,

// Whether "index.php" should be visible in URLs (true, false, "auto")

'omitScriptNameInUrls' => 'auto',

// Control Panel trigger word

'cpTrigger' => 'admin',

'environmentVariables' => array(

'baseUrl' => 'http://localhost:8888/',

),

'testToEmailAddress' => 'dev@email.com',

),

// Use IP address of your droplet below

'**your domain or droplet ip here e.g. google.com**' => array(

'siteUrl' => 'http://**droplet ip here or domain name e.g. google.com**/',

'server' => 'localhost',

// Enable CSRF Protection (recommended, will be enabled by default in Craft 3)

'enableCsrfProtection' => true,

// Default Week Start Day (0 = Sunday, 1 = Monday...)

'defaultWeekStartDay' => 0,

// Whether "index.php" should be visible in URLs (true, false, "auto")

'omitScriptNameInUrls' => 'auto',

// Control Panel trigger word

'cpTrigger' => 'admin',

'environmentVariables' => array(

'basePath' => '/var/www/html/',

'baseUrl' => 'http://**droplet ip here or domain name e.g. google.com**/'

)

)

Change places that need to be changed, if you have a domain, please change these to your domain. Save the general.php file, and commit it to your Github repo.

Creating a db.php file with Deploybot

Now, here's the complex bit. Let's head into deployboy and create a 'db.php' file which Craft needs to run for our server to work nicely. Craft will already have a db.php file from installing it on the droplet, but deploybot will overwrite it with the one we're going to write. Head over to the 'configuration files' for your environment you created when setting up Deploybot, at the top you should see a tab which says 'Configuration Files,' head over to this page.

Click 'Add a File' and call this file 'db.php' within the name field. Copy and paste the following code, changing the areas you need to matching it perfectly with your droplet.

return array(

'*' => array(

'server' => 'localhost',

'database' => 'craft_db',

'tablePrefix' => 'craft',

),

'localhost' => array(

'user' => 'root',

'password' => 'root',

),

// Use IP of your droplet and MySQL credentials of a user you created

'12.34.56.78' => array(

'user' => 'craftcms',

'password' => 'YourComplexMySQLPasswordGoesHere',

)

);

Hit that magical Deploy button

With all the code in place and numerous config files setup, it's time to get it deployed. Hit deploy, and you should see Deploybot add it to queue, what this is doing is - deploying your Github code which contains all your custom CSS/HTML/PHP to your deployment environment, overwriting anything that's already there.

Head to your droplet ip or your domain name, and you should see your locally developed website all there in it's shining glory. If you have no CSS - like I did, make sure you're using relative paths to them such as:

<link href="/resources/css/main.css" rel="stylesheet" type="text/CSS">

Exporting your local database and moving into production with SequelPro

We've already developed our database on our localhost, we have all our fields set up, and everything is working great - BUT - how do I get this up on this droplet? I don't want to do everything again? Not to worry - Craft helps us do this! Easy peasy!

Head over to your local environment, fire up MAMP, etc. and get to your admin panel. Head to 'Settings' and click 'Backup Database' this should download a CSV dump to your computer. Now, let's open SequelPro and connect to our droplet's MySQL server.

Connect your droplet's MySQL using a 'New Connection.'

Select your database 'craft_db' from the dropdown menu in the top left

File > Import.. >

Navigate to your local CSV dump

Click Import

Finished.

Now you have your locally developed CraftCMS environment online, with all your database from your locally developed website. Relatively easy right? When it's guided through it sure is! If you make any changes to your local environment, all you have to do is commit to Github and deploybot will pick up the commit. After that - just hit deploy! Boom!

Need help setting it up? I'm available as a freelance web designer in London