Blog

WordPress Backups to AWS S3

Amazon Web Services S3 (Simple Storage Service) is a cheap and reliable way of storing data and is ideal for backups. Scheduling regular automatic backups of your WordPress website to S3 is pretty easy with a plugin, but it can be worth tweaking your AWS Credentials for better security.

This post will show you how to create a new user on your AWS account that has limited S3 permissions. It means if your site is ever compromised and the credentials stolen you’ll be in a far better position than having used your root AWS details! It’s also especially useful if you are managing backups of multiple client sites and do not want cross-access.

Step 1 – Create a new user with IAM in the AWS Console

  • Log into the AWS Console. Go to Services > Security & Identity > IAM
  • Create a new user (e.g. backup_myexample)
  • Copy and paste the Access Key and Secret somewhere; we’ll use those within WordPress shortly.

After creating your new user, go to their Policies and create a new inline policy. We’ll use inline, rather than group permissions so that each user you create (for backing up different websites) is isolated to their own S3 path.

Give the policy a name and paste and modify this Policy Document. Change my_awesome_bucket and my_directory to the bucket and path you’re using for these backups.

{
  "Version": "2012-10-17",
  "Statement": [
  {
  "Sid": "Stmt1441240868000",
  "Effect": "Allow",
  "Action": "s3:*",
  "Resource": [
  "arn:aws:s3:::my_awesome_bucket",
  "arn:aws:s3:::my_awesome_bucket/website_backups/my_directory/*"
  ]
  }
  ]
}

Your screen should look a bit like this
AWS IAM Policy

Step 2 – Install & Configure BackWPUp

  • Log into your WP Dashboard, go to Plugins > Add New Plugin and search for BackWPUp
  • Install it and create a new job. For testing you may want to do Database backup only, or list of plugins. This is much faster that a full site (Files) backup. Once you know it’s working setup a full site backup.
  • Set the backup to S3 Service.
  • On the S3 Service page select your Region and paste in the Access Key and Secret key from before.
  • Type in your bucket name and path to store the backups. It should match the IAM Policy Document

s3-plugin-cfg

Save your settings and run the job.

The plugin logs will let you know if it worked.

A few notes

  • The IAM Policy allows all S3 actions on the given S3 path. I was not able to get this plugin to work with more restrictive permissions.
  • The new S3 Standard-IA class is good for these backups. The storage cost is cheaper than the Standard class without sacrificing redundancy as with Reduced Redundancy Storage. The downside is that downloads of these objects are more expensive.
  • Remember to check your backups periodically

wkhtmltopdf 0.12 on Ubuntu 14.04

The Problem

wkhtmltopdf is a library for rendering PDFs from HTML or live web pages.

  • apt-get install wkhtmltopdf  will install the older 0.9 version, which isn’t compatible with the Snappy PHP wrapper
  • wkhtmltopdf 0.9 is also unable to render on ‘headless’ operating systems and needs another package to simulate a display. The newer 0.12 version doesn’t have this problem.

The Solution

Manually Install the ‘Static’ Binary from wkhtmltopdf.org

(NB: If you’re not a root or super user most commands will need to be sudo…)

Download the Ubuntu “Trusty” build.
At the time of writing this is wkhtmltox-0.12.2.1_linux-trusty-amd64.deb

wget http://downloads.sourceforge.net/project/wkhtmltopdf/0.12.2.1/wkhtmltox-0.12.2.1_linux-trusty-amd64.deb

Rename it something easy to type like wkhtml.deb

Extract it with this command

ar x wkhtml.deb
# if ar not installed run this:
# apt-get install binutils

Extract the binary

tar xf data.tar.xz

Move the binary file to /usr/bin

mv wkhtmltopdf /usr/bin/wkhtmltopdf

Now PDF Rendering Should Work

wkhtmltopdf http://example.com myTest.pdf

Laravel 5 Environment Config

Laravel 4 used a function that checked the servers hostname to determine the environment. Laravel 5 simplifies environment detection by having a .env file present in your project root.

.env.example is ignored by Laravel’s detection. You can fill it with the keys your application expects to act an an example for your own file.

.env is for the current environment

Add .env to your .gitignore file. It’s got to stay out of your repo so you don’t overwrite it each time you pull.
Copy/Rename .env.example to .env for each environment.

set the APP_ENV value within your .env file to tell Laravel where it’s running.

APP_ENV=local
APP_DEBUG=true
APP_KEY=123abc...
$app->environment(); //get the current environment
if($app->environment('local', 'staging')) { }  //test if local or staging env

You can retrieve your .env config values with the env() function.


$cfgValue = env('MY_SWEETAS_VARIABLE');

Don’t Host Your Email with your Website

When you get a new website and you’ve registered a shiny new domain name it makes sense to also have a good looking email address to go with it. Advertising with an email like bills_plumbing245@bigpond.com.au looks a lot less professional than masterplumber@billsplumbing.com.au !

Just about all web hosting accounts come with the ability to host mail too. Creating an inbox this way using your own domain is cheap and easy, but it’s not the best way.

Limitations of using your web hosting for email

Server Space

Whenever you get mail it’s stored on a server. If you’re piggy backing on your web hosting you’ll have to choose between using up your hosting disk space allowance with accumulated mail; or configuring Outlook to delete mail off the server after it’s been downloaded. Deleting from the server solves the full account issue, but it means your local computer and a single hard drive become the single source of all your mail. Transferring it can be a hassle if you get a new device and there’s a serious risk of data loss.

Synchronization

The standard POP3 web hosting approach to mail is very limited. If you send a message from your desktop PC it only exists there. You won’t be able to find that message in the sent items of your phone or tablet or laptop. You can partially work around this by using an IMAP account, which keeps a copy of everything on the server and syncs between devices, but you run straight back into the problem of server disk space above.

Reliability

Most web hosts are pretty good at keeping your files around. Many will take weekly off-server backups too. But given how important email is for many businesses this may not be enough. Downtime can be a big problem if it affects your mail and a week old backup may be too old.

Dedicated Email Hosting

The solution to these issues is to use a robust system designed for email. If you consider the importance of business email and the cost of downtime it’s well worth it.

There are a few good options including:

  • Google Apps for Work — essentially Gmail and the Google Apps suite using your own domain name. You can use the Gmail web interface, or Outlook. You can connect from any device. There’s powerful search and its fast.
  • Office 365 – Some Microsoft Office subscriptions include access to Office 365 which is a cloud hosted service designed to fix these issues.
  • Exchange Server — for larger business it may make sense to run your own Exchange server. This is an advanced approach that requires IT support.
  • Hosted Exchange Account — like an Exchange server, except you outsource the hosting and pay on a per-account basis.

Any of these approaches will solve the issues of web hosting based email.
I recommend Google Apps for Work. It’s around $50/year per user – a small price for the benefits.

Get in touch with me if you need help configuring your domain name and setting up a hosted email solution

Google Apps Referral

If you want to use Google for Work consider using my referral link: https://goo.gl/j6dgdR

Beauty vs Bandwidth

Some visual flair, a bit of bold imagery and a beautiful custom font or two can be great ways of making your website enticing. Those elements bring trade offs though in the form of increased page weight and load time.

The great thing about a website is that it can be accessed anywhere, from a bucketload of different devices. It’s also a challenge because you don’t know what context your users are coming from.

Those design enhancements that delight someone in their office could be a source of frustration when your page loads slowly when they’re out and in a hurry. It is possible to detect devices and remove some of the unnecessary, heavier items from the page, but this approach isn’t perfect. An iPhone struggling to hold onto a 3G connection is a different beast from one connected to a good WiFi connection; so knowing what sort of device your user is on is only part of the story.

It’s important to consider everything added to the page as having pros and cons. Being too stingy with the page weight could lead to a boring design. Being too fast and free with image sliders, video and graphics could come back to bite you when a busy user on a bad connection gets frustrated and leaves.

The design needs to balance these needs.

Web Hosting: VPS vs Shared

Everyone prefers a fast website. Even a few extra seconds spent loading each page can be a drag on your visitors attention. While there are a lot of factors that determine a website’s loading speed I recently ran a test of different web hosting environments on my own site.

The defacto hosting standard for many WordPress sites is a cPanel account on shared web hosting. This setup is ubiquitous and easy to manage. One alternative is a Virtual Private Server (VPS) with SSD storage. The trade off is that a VPS requires more knowledge to setup and manage, but the performance can be a big step up.

I ran a test, running this WordPress 4.0 website on reasonable (i.e. not bottom dollar) shared hosting account and a Vultr VPS with 768mb RAM and SSD storage and monitored response times.

Website Details

basic WordPress 4.0 site, without page caching. The VPS was running Apache 2.4 and the shared hosting on Litespeed HTTP.

Results

(Lower is better. Both servers are in Sydney and response time measured from the US)

VPS vs Shared hosting response

  • Shared Hosting: averaged 1583 ms with the slowest measured peak at 4602 ms
  • VPS SSD Hosting: averaged 448 ms with a slow peak of only 656 ms

The result was noticeably snappier pages on the VPS. The other take away is the consistency. On a shared server your response times can vary depending on what other sites on the server are doing. The VPS which has isolated resources gave far more consistent performance.

 

Detecting Environment in Laravel 4

Update: How to Get Environment in Laravel 5

Your PHP application should have different settings for its development and production environments. Here’s how you can set your Laravel 4 app to detect the environment, load the appropriate settings and keep installation-specific things like database credentials out of your Git repo.

Detecting The Environment

Laravel lets you provide arrays of hostnames it will check the server against to determine the environment.

Open bootstrap/start.php

$env = $app->detectEnvironment([
   'local' => ['MyMachineName', 'AnotherDevMachine'],
   'staging' => ['StagingEnvName']
]);

If unsure, use PHP’s gethostname() function to find your machine names.
This is the value to use inside the local/staging arrays

Laravel will default to ‘production’ if no other environment is matched.

 

Setting Environment Config Values

Laravel looks for .env.*.php files in the root directory (beside your composer.json and .gitignore files).

You will want to exclude these files from your Git repo. Add the following lines to your .gitignore

.env.*.php
.env.php

Then create an env file for each of your environments. Use .env.php for the production environment.
They should look something like this:

<?php

/**
 * Local Development
 */
 return array(
	'app.env'		=> 'dev',
	'app.debug'		=> true,
	'app.url'		=> 'http://example.dev',

	'mysql.host'	 => '127.0.0.1',
	'mysql.database' => 'bestDbEva',
	'mysql.username' => 'me',
	'mysql.password' => 'myTremendousPassword'

 );

The actual values are up to you. You can store whatever values you need within the application.

Using The Environment Values

Laravel config can now call getenv() to get the dynamic environment variable. For your DB config open app/config/database.php

'mysql' => array(
	'driver'    => 'mysql',
	'host'      => getenv('mysql.host'),
	'database'  => getenv('mysql.database'),
	'username'  => getenv('mysql.username'),
	'password'  => getenv('mysql.password'),
	'charset'   => 'utf8',
	'collation' => 'utf8_unicode_ci',
	'prefix'    => '',
),

Can I Update My Own Website?

Customers come to your website looking for information and of course information changes. So it’s natural for site owners to want to be able to maintain their own sites, saving the delay and cost of having a designer make minor changes. Visitors also tend to respond favourably to a website which is “alive” and kept up to date. “Will I be able to update the site myself?” is a very common question to ask.

The answer generally is yes and there are a few steps involved in making that happen.

Developing a website on a Content Management System (CMS) makes updates easy for non-technical users. A CMS provides site owners with a private administration area they can log into to control site content. Implementing a CMS is a very common requirement, but it does add a little work to the process compared to a ‘static’ site, which is just a collection of HTML files. Supporting a CMS means that the design you and your designer come up with needs to be coded as a theme which ties the front end templates (HTML and CSS) to the CMS features.

Content Management System Options

There are a lot of options out there, but a few CMS are occupying the lions share of the market now. Some common choices are:

  • WordPress
  • A Custom Built Solution
  • Concrete5
  • Joomla
  • Drupal

There are also ecommerce focused systems such as WooCommerce (an extension of WordPress), Lemon Stand and Magento.

WordPress has been the fastest growing and mostly widely used option for a few years now and is my go-to option for most new sites. It’s easy to use and has a critical mass of usage and development that makes it hard to ignore. WordPress has grown out of its origins as a blogging system and now supports pages and custom content types (e.g. products, services, offices, etc.).

There’s a rich eco-system of plugins, themes and developers for WordPress and it has a very well implemented updates system.

A custom built solution may also be appropriate in some cases, but they would be the minority. One advantage of a custom system would be a very easy learning curve for the site owners as there’d be no extraneous features in the result.

Knowing your Content

For some websites the site structure will be a series of simple pages that owners can edit through a basic editor (a text area similar to Microsoft Word or Google Docs) in the site’s backend. Often times though your business will have a little more structure to your content and the CMS can be improved with a little development work to better match the nature of your information.

For example if your business had offices in six locations, each with a phone number, primary email and street address (with corresponding map) you could simply type that information into a standard page. The solution would work, but it’d be difficult for those maintaining the site to keep the formatting consistent. Structuring the phone numbers and maps in the correct way would be tedious. A better approach would be to create what’s called a “Custom Post Type” for Offices during the site’s development. Users would then have dedicated form fields for those pieces of information and the templates created by the designer would be responsible for maintaining a consistent design. This approach reduces the work involved in keeping the site up to date, and makes the office data available for other users (e.g. listing all offices in a footer or sidebar automatically).

Here’s how that might look to site editors in WordPress:

WordPress Custom Post Type

Training

The training requirements for staff to use a system like WordPress are pretty minimal; usually under an hour. It’s often a matter of resizing images to a sensible scale before uploading and knowing where to find the screens you need.

The extra time taken to develop your site on top of a CMS like WordPress or even programming a simple custom system for your business can be worthwhile. Site owners usually enjoy the flexibility of being able to make changes to their own site whenever they want without having to email and pay their designer to do it. The ease of maintenance can also mean more frequent updates which only helps you to get more value out of your website.

6 SEO Tips for Web Designers

It’s a common conundrum in the web world. A designer puts a beautiful website together that the client is absolutely rapt with and hands it to the SEO to get it ranking who sheepishly tells them that it needs a bunch of changes. It’s almost like pretty sites just aren’t rankable sites. Well fortunately that’s not the case. Joe from Orange Digital has put together a list of helpful hints to ensure that your pretty website is still as SEO friendly as any.

1. Web Fonts are Your Best Friend

There’s nothing worse than being handed a website that has no crawlable information. If everything is displayed in images the Google bot (and others) can’t read it. Your amazing design is virtually unrankable. Web Fonts By using a combination of CSS, HTML and web fonts you can almost always reproduce the same effect that you get by displaying information with an image. Not only will your content be crawlable, but it will also be able to be marked up with metadata, meaning your awesome header graphic could also be the H1. If it were an image that wouldn’t be the case. Furthermore if you create a graphic using this method as opposed to an image, editing it is a cinch. If you want to change the text, colour, size or any other styling, you don’t have to pull the graphic back into Photoshop to change.

2. Copy Is Important

Accessible Copywriting Those minimalist highly visual, low word count designs might look great, but for SEO purposes they are incredibly counterproductive. Google needs content to work out what the website is about. Sure your metadata does some of the job but Google is a completionist and good copy indicates digestible information for the end user. Google’s algorithm is all about sending their users to results they can trust. If you want to retain the minimalist approach then the solution could be to hide the copy behind mouse-overs, however it may be worth questioning whether doing this pits aesthetics against usability.

3. Assume the Need For Drop Down Menus

The amount of times that I as an SEO have come across a WordPress site that doesn’t have properly designed drop down menus (or worse still doesn’t have them at all) is absurd. It’s a WordPress default function! The first live version of the website may not need them but just assume that down the line they will be needed and include them please. Drop down menus are an important part of site architecture from an SEO purpose as it allows you to internally link in a way that looks good and is natural, and the trends with design right now leaves no choice for SEOs but to create internal landing pages to rank. We need Google to be able to access them from other parts of the website and the top menu is the best place for it because…

4. Google Reads Like A Person

That means it reads from left to right and top down. The information that is higher on the page is assumed to be more relevant. If there is no crawlable information anywhere near the top of your page, the information that is crawled is assumed to be not important enough to show your users immediately. So that means that if you build a website that you have to scroll to before you get to the first part of the copy, the copy is SEO weak. At least try to include some crawlable information high on the page.

5. Ajax Content IS Crawlable

There once was a time when Ajax content was difficult, and in some cases impossible to crawl. Thankfully Google figured it out. It does involve tweaking. You can read more about the process here.

6. Consider Your SEO Friends

It’s basically just something to live by. If the website you’re designing has even the potential to ever need SEO, do right by your client and yourself by considering future need for SEO. Don’t just assume because it’s not your concern that it’s not a concern at all and never will be.

Joe McCord Joe McCord on Google+. Joe McCord on Twitter.

New MikeHealy.com.au Website

It’s been quite a long time coming, but I have just launched a new website for myself. The previous site served me quite well and lasted almost eight years (120 human years).

The goals of this new website are to:

  • improve on the design
  • provide better information to potential clients
  • ultimately lead to more projects
  • (whilst also being easier to maintain)

The visual design brings the site into line with a branding refresh I did some time ago.

On the technical side I’ve built the site out with a custom WordPress theme and CMS development. WordPress is a massively popular open source Content Management System and is increasingly becoming the defacto standard for many of the client sites I’m asked to build. My development efforts here will translate well to newer skills required for client work.

I’ve also paid attention to mobile and tablet optimization, creating a responsive layout which will adapt to many different devices and screen sizes. Like WordPress, Responsive Web Design is also becoming the standard way to give visitors a good experience regardless of when and how they’re visiting your site.

I’d love to hear your thoughts on the redesign.