andyMatthews.net
New Millennium Blogging with Ghost
Nowadays we have a plethora of ways to publish distinct pieces of content online: video via Youtube, photos on Instagram, a clever turn of phrase on Twitter, or an "it's complicated" relationship update on Facebook. But the ability to publish long form content, beautifully, hasn't changed much in the past 10 years.
That all changed in October 2013 with the beta release of Ghost, (a beautifully designed blogging platform). Fresh off of a successfully funded Kickstarter campaign, Ghost aims to change how you publish to the web.
This article will walk you through the process of installing Ghost, and giving you a good overview of it's features and functionality.
Downloading
Ghost is still in beta right now so options for its use are somewhat limited. You can run it locally on your own machine, or upload it to a server that you control. Ghost runs on top of Node.js so if you don't already have Node installed you'll need to do that before proceeding. Don't worry, we'll wait.
Now that Node is installed we'll need to run through your options for installing Ghost. First, you can download a stable release of Ghost (currently 0.3.3) from the Ghost website. You can also download the latest version of Ghost from Github.
By the way, the steps in this article are specific to the 0.3.3 release of Ghost, so your mileage may vary.
Installing
Once you've got the code downloaded, and unzipped to the folder of your choosing, open up a terminal window and cd into the directory where Ghost is located:
cd ~/ghost-0.3.3
Then run the following command:
npm install --production
Once the process is complete, type the final command to start up Ghost.
npm start
If all goes well you should see something similar to the following output in your terminal window:
> ghost@0.3.3 start /your/path/to/ghost-0.3.3
> node index
Ghost is running...
Listening on 127.0.0.1:2368
Url configured as: http://my-ghost-blog.com
Ctrl+C to shut down
Trouble installing?
Before we move on, it's probably helpful to mention that it took me about a half-dozen tries to get Ghost installed successfully. The install process would run, but fail at various points. Remember that Ghost is still in beta, and you will likely run into issues. Don't let that discourage you. Here are a few things that got my install process back on track.
One of the issues I had was that my Node version was slightly out of date. Perform an update to the most current stable version, v0.10.20, with the following commands:
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
Another thing that helped me was to install the sqlite3 package standalone, and to force the most recent version, 2.1.17, instead of the version Ghost requests, 2.1.16:
npm install sqlite3@2.1.17
If neither of those seem to help you out then head over to the Ghost Forums, where others are having the same troubles you are. There's even an entire board just for installation issues. This article will be here when you get back, promise!
Ghost Overview
Let's start our overview by opening Ghost in a browser. Make sure that Ghost is running (with the npm start command) and hit the following URL in the browser of your choice (cough cough�Chrome):
http://127.0.0.1:2368/
If all goes well, then this is the first thing you should see:
The Ghost team is just getting started so we'll give them some grace as to the bare bones styling. But while it might not look like much you're actually getting a lot right out of the box. Ghost adheres to responsive design principles from the ground up. Resize your browser window and see what it does. It even works in the admin section, which is amazing for people wanting to publish content on the go.
Scroll down and click into the "Welcome to Ghost" post. The install package ships with that so that you can see what the results are right away. Again, while it might not look like much, view source and you'll see lightweight, semantic HTML. At the bottom of the page you'll find Social Media sharing and RSS options.
Ghost Admin
While the front end is impressive, the admin section is where Ghost really shines. Let's start by getting ourselves logged in. You'll need to create a user account if you're logging in for the first time. This is what you'll see when you view the admin section:
Subsequent visits to the admin section will show a simple login screen:
Main admin interface
After creating your account you're taken straight into Ghost's CMS. Since Ghost is so new, there's not much to see, but let's take a tour of the important parts.
Highlighted in red, in the top left corner, is the main navigation cluster. From left to right: an icon link to the blog you're editing, a Content button taking you back to the main list of articles, a New Post button allowing you to quickly create a new post, and a link to the Settings area.
Shown with a blue stroke, in the top right corner, is a link to edit your profile, access to help & support, and a log out button.
Finally, in a green stroke on the left side, is the current list of articles available in your blog. Note the green "add" button above the list of blog posts.
By default Ghost displays the editor and preview interfaces side by side. On narrower screens it switches to a tabbed interface to give you maximum space. Nifty yeah?
The editor interface
Let's jump into editing mode now. You can do this by clicking the New Post at the top left corner of the page, the green + icon above the content list, or editing an existing post by clicking the pencil icon in the top right corner of the preview pane.
Since the Ghost team was kind enough to provide an existing blog post as a sample, let's jump into editing mode by selecting the article "Welcome to Ghost", then clicking it's pencil icon.
Just like with the main admin interface there are a few main points of interest. At the top is a text field allowing you to edit the title of your post. Ghost will conveniently create a URL slug (or permalink) for you based on the title of your post. This slug can be changed by clicking the gear icon at the bottom right corner. The slug can also be changed by clicking the gear icon for a post when in content mode.
A slug/permalink is the part of a URL which identifies a page using human-readable keywords. It is usually the end part of the URL, which can be interpreted as the name of the resource, similar to the basename in a filename or the title of a page.
The large left panel is where you'll type your articles, while the right panel is where you can preview your changes. Ghost uses Markdown for writing content which makes editing a snap. Above the left panel is a small ? icon which gives you context help for Markdown, along with Ghost's corresponding keyboard shortcuts.
The bottom left corner provides a way for you to tag your posts.
Type in some text, then hit enter to tokenize it. Keep typing until you've added all your desired tags. To clear them out, click the x to the right of each tag. You can also place your cursor after a tag, then hit the backspace button.
Finally in the bottom right corner is the Save/Publish button. When creating a new post the button defaults to "Save Draft". You can change this behaviour by clicking the arrow to the right, and change it to "Publish Now"
Once a post has been published the options change to "Update Post" (as the default), and "Unpublish".
Settings
The last major section of the Ghost admin interface is Settings. There's not a ton there, but we should look through it so that you know what's possible, and what's missing. Click the "Settings" button in the top left corner and you're presented with a subnav which lists "General" and "User" with General selected by default.
The General section is where you can change the name, and description, of your blog along with uploading a logo, and background image. You can also set up the default contact email, number of posts per page, and select a theme for your blog (more on that later).
The User section allows you to input your name, a brief bio, select your photo, and a background image. You can also change your location, website, and password.
While the Settings section is sparse right now, I expect that more functionality will creep in over time.
Potential issues
Before you sign off, let me leave you with a few thoughts about Ghost. It's slick, really slick. It has functionality that made it a joy to use while I was writing this article...oh yeah, I wrote this article using a local install of Ghost. But while it's pretty awesome, it's also got some potential blockers you should know about.
Right now there's only one built in theme, called Casper (apropos isn't it?). More themes are available on the Ghost marketplace, some free, most for pay. Given that the Ghost team funded the app via Kickstarter perhaps they could commission a few designers to build some additional free themes before launch. Additionally the theme doesn't seem to be exposed via the admin section like you might see in Wordpress. This might be in the roadmap, but it's not there now. So if you want to edit the theme, you'll have to dig into the raw code yourself.
Of the available free themes, I liked N-Coded the best, although after downloading it to /<ghost-install>/content/themes/ I had to restart Ghost before the theme would show up under the theme selector in settings.
There's not many settings options right now. What I was looking for while I worked on this article was a way to cause more of the article to actually display in the "front end" of the site. Currently it only displays a little less than half of the first paragraph. That's not a dealbreaker, but it is annoying. Actually it looks like that's an option that can be tweaked in the theme. When looping over the posts within the Handlebars template Ghost exposes an excerpt and a content property. It would be nice to offer that as a setting so that the theme doesn't have to deal with that sort of thing.
I also submitted a number of UI enhancement tickets to the Github repo while I worked on this article, one of which I actually resolved myself. Some of them are minor issues, while others are more serious. There's currently a large number of open issues in the repo, 180 at the time of this article, but given that there are over 1,000 closed it looks like the Ghost team is working hard to make this a great platform for publishing quality content.
One of the biggest hindrances I see to Ghost adoption is the choice of Node. While awesome, and really popular these days, there's not many hosting companys offering Node as a choice; at least compared to PHP, or even Ruby and Python. This is going to force Ghost's usage into the "nerd territory" of developers who feel comfortable running their own servers, or using offerings like Heroku or AppFog.
One thing to note is that, like Wordpress, Ghost plans on offering a hosted platform for blogs. This would alleviate the stresses of worrying about hosting, as well as offer a number of other benefits. Here's the official statement from the Ghost website:
We're setting up world-class hosted platform that allows you to set up a new Ghost blog in just a couple of clicks. You'll need hosting for your blog no matter what, but our service will be the most powerful way of running Ghost - and the easiest to get started with. You'll have the full Ghost software with all bells, whistles, themes, plugins, and some extras that are only available with us (like automatic updates and backups). What's more by choosing to run your blog through our hosted platform, you'll be investing in the future of the software.
As I mentioned earlier, while the functionality that IS included in Ghost is top-notch, there's not a lot of it. However the team has developed an open architecture that is plugin friendly and indeed the plugin board on their forums is seriously active.
Final thoughts
Ghost is great. It's easy and fun to use, and it's fast. It's also a bit of the wild west right now. If you're used to more sophisticated platforms like Wordpress, Blogger, or the like then you might not be interested just yet. However if you like riding the wave of the newest and best and don't mind a little rough edges, then Ghost is right up your alley.