Webmaster-Source » Featured

Installing Multiple Ghost Blogs Behind NGINX on Ubuntu 12.04

Matt — Wed, 06 Nov 2013 15:15:16 +0000

Looking to set up a blog with Ghost? While it still has a few rough edges and missing features at the time of this writing, as it’s essentially in beta at this point (hence the “0.3” versioning), it definitely shows promise as a blogging platform.

If you’re reading this, you’re probably aware that you can’t just FTP Ghost to a dinky shared host and expect it to run like your average PHP script. Ghost is a Node.js application, which works differently, and has yet to be adopted by services that generally cater to newbies. You’re going to need a VPS and command line access. I’m also going to assume a rudimentary knowledge of Linux commands. (You can pick up the basics pretty easily at linuxcommand.org if need be.)

This tutorial aims to walk you through the process of installing one ore more instances of Ghost behind the NGINX server. NGINX is a fast and lightweight web server that, when configured in this manner, acts as a proxy, forwarding requests to the correct Ghost blog.

DigitalOcean

I’m a big fan of DigitalOcean. I’ve been hosting my various web sites with them since this June, and their service has been of excellent quality. In addition to their rock-bottom price, their virtual machines have performed well and their staff has been competent and helpful. (You can find my review of DigitalOcean here.)

$5/month will get you a “Droplet” with 512MB of RAM, 20GB of storage on a solid state drive and plenty of data transfer. (It’s a soft cap with reasonable overages. You’re very, very unlikely to ever reach it, though. Unless you’re a popular podcaster or something, in which case you should be looking into a CDN…)

The figure that’s the most important is the RAM. Just like with the computer you’re using to read this, active applications reside in the system’s memory, and the amount they use varies depending on what the app is doing. Ghost, in my informal tests, doesn’t seem to be too memory-intense. So a 512MB Droplet could probably host a few Ghost blogs at once, depending on their popularity and how the system is configured.

There are plenty of options for a VPS, though. If you’re not too keen on DigitalOcean, Linode, Rackspace, Amazon EC2 and RamNode are popular. If you want to give DigitalOcean a try, you can sign up with the promo code DIVEIN5 to get a $5 credit. You can also pay by the hour if you just want to fire up a VM for a few hours to experiment before making a decision.

Initial Setup

Once you’ve got your VPS, it’s time to start setting things up. For simplicity, I will assume you are running Ubuntu 12.04. You can follow along with any Linux distribution on any hosting provider, but some commands may be a little different.

First, if you haven’t already, use SSH to log in to your VM as root, using the password your host gave you. Take this opportunity to change your password to something different, and reasonably strong, for security. Just run the passwd command and follow the on-screen instructions.

Now let the system update its package index by running the following command:

apt-get update

While you’re at it, install the unzip tool so you can unpack the Ghost archive later on.

apt-get install unzip

Installing Node.js

Now we need to install Node.js, the JavaScript platform that Ghost is built on. Ubuntu’s pre-made package probably isn’t new enough to run Ghost, so we’ll have to compile it ourselves.

First, install the Linux build tools through Ubuntu’s package manager. This will install the necessary compilers, as well as the make tool.

apt-get install build-essential

Now you need to change to your home folder, make a new directory to contain the source, and download Node.js.

cd
mkdir src
cd src
wget http://nodejs.org/dist/v0.10.21/node-v0.10.21.tar.gz

If you run ls, you should see the archive in the src directory. If the file was successfully downloaded, you can unpack the archive and change to the resulting directory.

tar -zxvf node-v0.10.21.tar.gz
cd node-v0.10.21

Ready to compile? After you run the next two commands, be prepared to wait 5-10 minutes while the system works its magic and converts raw source code into an executable binary.

./configure
make

Once the messages stop scrolling by and the command prompt returns, you just need to run the installer.

make install

Congratulations, you’ve successfully compiled and installed a program from source! To verify that everything worked properly, run node -v. It should output the Node.js version, which in this case is v0.10.21. (Or a greater version if there is a newer one out by the time you read this.)

Ghost Installation

The next step is to install a copy of Ghost for each of your blogs. First, let’s make a place for them to reside in.

mkdir /var/ghost
cd /var/ghost

If you intend to use an FTP client to make it easier to upload themes or such, /var/ghost is the place where your blogs’ files will be found. So it’s a good path to remember. (On a related note, the SSH process also doubles as a secure FTP server. If your FTP client supports SFTP, you can connect to the domain/IP and log in with a valid username and password.)

To add a copy of Ghost, just follow these steps:

mkdir myghostblog
cd myghostblog
wget https://ghost.org/zip/ghost-0.3.3.zip
unzip ghost-0.3.3.zip
rm ghost-0.3.3.zip
npm install --production

What you’re doing is:

Creating a folder for the blog
Changing to that folder
Downloading Ghost
Unzipping Ghost
Removing the .zip file
Installing Ghost

Before we can actually start Ghost up, there is some essential configuration that needs to be adjusted.

Copy the example configuration file to a new config.js file with cp config.example.js config.js. Open the config.js file in the nano text editor with nano config.js. Use the arrow keys to scroll down to where the “production” environment starts in the config. It looks something like this:

production: {
    url: 'http://my-ghost-blog.com',
    mail: {},
    database: {
        client: 'sqlite3',
        connection: {
            filename: path.join(__dirname, '/content/data/ghost.db')
        },
        debug: false
    },
    server: {
        host: '127.0.0.1',
        port: '2368'
    }
},

There are three things you need to change:

The url field. Replace http://my-ghost-blog.com with http://whatever-your-domain-is.com.
The port field in the server block may need to be changed, depending on whether this is the first blog you’re setting up or not.

To save the file, press control+o and, then control+x to exit.

Web browsers, by default, connect to HTTP port 80 when requesting a web page. The way we’re setting this up, NGINX will listen on port 80, waiting for requests, and forward them to the ports your Ghost blogs are listening on. So Blog A can listen on port 2368 and Blog B can listen on port 2369. NGINX will listen on port 80, figure out which domain name belongs to which blog, and route the requests to the appropriate port.

Repeat the relevant steps in this section to set up additional blogs. You can wait until after you’ve finished setting up the first, if you want.

Upstart

We need to make it easy to start and stop the Ghost processes, and ensure that they come back online automatically if the server is restarted. On Ubuntu, it’s super simple with a system known as Upstart.

First, create a new Upstart configuration file called ghost.conf.

cd /etc/init
nano ghost.conf

Now fill it with the following Upstart script, replacing myghostblog with the directory you created for your blog:

start on startup

script
    cd /var/ghost/myghostblog
    npm start --production
end script

If you have multiple Ghost blogs set up, you would do something like this:

start on startup

script
    cd /var/ghost/myghostblog
    npm start --production
    cd /var/ghost/myotherghostblog
    npm start --production
end script

NGINX Installation

apt-get install nginx

That was easy, wasn’t it?

NGINX Configuration

NGINX keeps its site configuration files in two directories within /etc/nginx:

sites-available — Each site gets its own configuration file in here
sites-enabled — This directory contains symbolic links pointing to the files in sites-available.

Let’s create a new site configuration for myghostblog.

cd /etc/nginx/sites-available
nano myghostblog

A simple configuration that does nothing but pass traffic addressed to my-awesome-ghost-blog.com to the Ghost blog listening on port 2368 looks like this:

server {
    server_name my-awesome-ghost-blog.com;

    location / {
        proxy_pass http://127.0.0.1:2368;
    }
}

Of course, NGINX is a powerful and flexible piece of software that is capable of a lot more. This is just one of many things you can use it for.

As before, save the file by pressing control+o and quit nano with control+x. Next, move back up one directory level to /etc/nginx and create a symbolic link in sites-enabled, pointing to the file in sites-available.

cd ../
ln -s sites-available/myghostblog sites-enabled/myghostblog

Fire it Up

Now that you have everything configured, you can start (or stop) the processes with the service command.

service ghost start
service nginx start

You can replace start with stop to exit ghost or nginx if you have reason to do so, or restart if you need to reload one after making some sort of change. (e.g. editing Ghost’s config.js file requires that Ghost be restarted.) NGINX can reload its config files without doing a full restart of the process with service nginx reload, which takes less time and is useful when making edits.

If all went well, you should be able to open your Ghost blog in a browser.

Managing Memory

How much memory is Ghost using, you may wonder. And if you aren’t, you probably should. The enemy of performance on web servers is swapping, which is where the system runs out of available RAM and starts copying things back and forth to the hard disk, causing major slowdowns. This is frequently referred to as “thrashing.” Even a fast solid state drive is orders of magnitude slower than RAM.

There are some useful tools for monitoring available RAM and inspecting active processes. The most commonly used ones are free, top, and ps.

The free command shows the system’s memory totals. If you run it with the m flag (free -m) to show the values in human-readable megabytes instead of plain bytes, you should see something like this:

root@DeepSpaceNine:~$ free -m
             total       used       free     shared    buffers     cached
Mem:           369        129        239          0         11         51
-/+ buffers/cache:         67        302
Swap:          767          0        767

The most important line is the one labeled -/+ buffers/cache. Modern operating systems don’t waste memory. If nothing else is making use of it, the OS will make use of it until the space is needed. The -/+ line shows the usage sans caches. In this example, there are 302MB of free memory with only 67 being in use. There is also nothing in swap, which is exactly what you want to see.

The top command shows a live-updated table of currently running processes, and statistics for them. By default, it’s sorted by CPU activity, but you can sort by memory usage by pressing shift+M.

Pressing control+C exits top.

Need to see a list of all running processes? Run ps aux. Be prepared for a huge list, as it will be full of system processes.

Conclusion

I hope this guide helps you get started with Ghost. I realize it is a bit technical, something the upcoming hosted service and DigitalOcean’s one-click Ghost image should help obviate, but hey, it’s new. It was harder to get up an running with WordPress back in 2003, too.

Solar Theme for Ghost Blogs

Matt — Fri, 18 Oct 2013 02:34:56 +0000

Need a stylish new design for your Ghost blog? Looking for something that puts your content first, with an emphasis on reducing eye strain? Allow me to introduce my new theme (which is technically a port of the one I made for Jekyll), based on the Solarized color palette. It includes stylesheets for the default light-on-dark version, and for the alternate dark-on-light one.

The theme is responsive, with a little bit of JavaScript that collapses the left navigation into a
Enter a URL or upload an image

Now we need to load up the necessary JavaScript files.

add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
	if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
		wp_enqueue_media();
		wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
		wp_enqueue_script('my-admin-js');
	}
}

We bind the my_admin_scripts() function to the admin_enqueue_scripts hook, and enqueue both the media scripts and our own JavaScript file. Also, the scripts will only be loaded if the current page is equal to “my_plugin_page,” which you would of course replace with the slug your admin menu has.

Now for the complicated part: the script that hooks into the uploader. Continuing with the above example, it would be named my-admin.js.

jQuery(document).ready(function($){


	var custom_uploader;


	$('#upload_image_button').click(function(e) {

		e.preventDefault();

		//If the uploader object has already been created, reopen the dialog
		if (custom_uploader) {
			custom_uploader.open();
			return;
		}

		//Extend the wp.media object
		custom_uploader = wp.media.frames.file_frame = wp.media({
			title: 'Choose Image',
			button: {
				text: 'Choose Image'
			},
			multiple: false
		});

		//When a file is selected, grab the URL and set it as the text field's value
		custom_uploader.on('select', function() {
			attachment = custom_uploader.state().get('selection').first().toJSON();
			$('#upload_image').val(attachment.url);
		});

		//Open the uploader dialog
		custom_uploader.open();

	});


});

When the button is clicked, it creates a new instance of the wp.media object and configures it to only accept a single file, since the text field can only hold one file URL. Then it binds a function to the selection action, which gets the file attributes when an image is chosen and sets the #upload_image text field value to the file’s URL.

Providing everything went as expected, you should have a form field that will accept an arbitrary URL, or allow the user to upload one.

Post to Twitter From a PHP Script: 2013 Edition

Matt — Wed, 09 Jan 2013 11:18:20 +0000

Back in 2009, I wrote a post on how to write a simple PHP script to call on the Twitter API and update your status. Despite its popularity, the information hasn’t been relevant in some time. (Things certainly have changed since then!) The Twitter API has changed a lot over the years, and it’s not so simple that you can get a newbie up and running with a few lines of code.

The mandatory usage of OAuth tokens, rather than a simple username and password combination, for API requests has greatly strengthened account security, but it’s one of the prime hurdles complicating the process. More recently, XML support was removed in favor of JSON, URL structures changed to include an API version, and authentication is now required for every request.

Fortunately, you don’t have to deal with the little details. You can use a library that does the heavy lifting for you, rather than reinventing the wheel. Sure, there are resources to learn how to do it the hard way, but I assume that you want a quicker solution if you’re reading this.

Step 1: Download tmhOAuth

Download the tmhOAuth library from GitHub. This package will handle interactions with the Twitter API once you include it from your script. (It requires at least PHP 5.1.2 and the cURL extension.)

Step 2: Include the Library in Your Project

First, drop the required files into your project folder. You could simply move the entire download in and rename it, or if you just want the essentials, the required files are tmhOAuth.php and cacert.pem.

Now, you need to include the files in your PHP script. All you need is an include line at the top.

include 'tmhOAuth/tmhOAuth.php';

Step 3: Get Your Tokens

We need to make a short detour, now. In order to give your script permission to update your status, you need to generate some authorization tokens for it. Head over to dev.twitter.com/apps and log in to your Twitter account.

Click the big “Create a new application” button and fill in the required fields on the resulting screen. All you need is an application name to identify your script, a brief description, and the URL it will reside at.

Once you agree to the terms of service and submit the form, select the Settings tab on the resulting screen. Change the access type from Read Only to Read and Write before saving the settings.

Flipping back to the Details tab, you now need to scroll down to the OAuth settings section. You will need the consumer key and consumer secret, as well as the access token and access secret from the following section.

After the include lines, you need to instantiate the tmhOAuth class with the tokens, like so:

$tmhOAuth = new tmhOAuth(array(
  'consumer_key' => 'THE_CONSUMER_KEY',
  'consumer_secret' => 'THE_CONSUMER_SECRET',
  'token' => 'THE_ACCESS_TOKEN',
  'secret' => 'THE_ACCESS_TOKEN_SECRET',
));

This readies tmhOAuth to interact with the API through your account. (Allowing other Twitter users to log in and grant permission is beyond the scope of this tutorial. But Tuts+ has you covered if you want a more advanced tutorial.)

Step 4: Sending the Tweet

To send a tweet, all you have to do now is call the request method and pass the required arguments.

$response = $tmhOAuth->request('POST', $tmhOAuth->url('1.1/statuses/update'), array(
  'status' => 'Test message. Lorem ipsum.'
));

You can, of course, replace the message with anything you want (providing it’s under 140 characters) and even use a dynamic variable instead of a static string.

Step 5: Verify Success

Now let’s see if Twitter accepted the request and successfully updated your status.

if ($response != 200) {
	//Do something if the request was unsuccessful
	echo 'There was an error posting the message.';
}

Conclusion

That wasn’t too difficult, was it? While it’s a simple example, it should help you get started in the right direction. The tmhOAuth library can handle just about any Twitter API request you may need to make, and the GitHub repository includes plenty of examples to browse through.

Best of 2012

Matt — Tue, 01 Jan 2013 23:59:29 +0000

Today Webmaster-Source enters its seventh year. Historically I have done a quick roundup of some of the more interesting posts from the previous year, and I intend to continue with that tradition going into the new year.

So, without further ado, let us recap.

January

February

March

What is a Kibibyte?
Scripting News Hits 15 Year Mark, and Other Really Old Websites
What to Do After You Install Ubuntu Server in VMwware Fusion
Prediction: Higher Resolution MacBooks Soon to Come — Well, that was a solid prediction, wasn’t it?
BrowserQuest: A Massively Multiplayer Game in HTML5 and JavaScript

Webmaster-Source » Featured

Installing Multiple Ghost Blogs Behind NGINX on Ubuntu 12.04

DigitalOcean

Initial Setup

Installing Node.js

Ghost Installation

Upstart

NGINX Installation

NGINX Configuration

Fire it Up

Managing Memory

Conclusion

Solar Theme for Ghost Blogs

Post to Twitter From a PHP Script: 2013 Edition

Step 1: Download tmhOAuth

Step 2: Include the Library in Your Project

Step 3: Get Your Tokens

Step 4: Sending the Tweet

Step 5: Verify Success

Conclusion

Best of 2012

January

February

March

April

May

June

July

August

September

October

November

December