Why Choose Ghost for Blogging?
Here on this channel we've talked a lot about Shopify theme development, but last year I decided to throw in a tutorial on this channel on front-end web development with Squarespace. The way I see it, Shopify is great for e-commerce and Squarespace is ideal for something like a restaurant or a photography portfolio website. When it comes to blogging, however, my recommendation, and what I personally use, is Ghost.
Many of you watching might automatically default to thinking of WordPress as your go-to blogging platform, which is what it was originally started as. But now I think specialist platforms are drastically outperforming WordPress in every area, and I'm at a point now where I don't look to WordPress to do anything anymore. When it comes to blogging and online publishing, there's only one platform that comes to mind as best in class, and that is Ghost.
Ghost is an open source platform created using a modern web development stack that is faster and more secure than WordPress, with security built in. In this video, we're going to cover an overview of front end web development on the Ghost platform and at the end of this video I'll share with you a resource to take your learning further if you so desire. Let's jump straight in and see how it all works.
Setting Up a Local Ghost Environment
The Ghost theme can be described as a Node project with Handlebars templates for bringing dynamic data from the back end onto the front. The route or address you land on determines which of these Handlebars templates gets loaded, which all exist in the same folder, with nested folders for your CSS and JavaScript assets and any partials you wish to include. We'll talk about that in the next section. For now, let's talk about how we can start to work with the code.
All right, so here on the official documentation of Ghost's website, we can see how to install Ghost locally, which is what allows us to run a local install of Ghost and edit our code locally, which is very important for theme development. So if we look down, all we need is a command line interface tool called Ghost CLI. All we need to do in order to install that is copy that, head into our terminal, and run that. I'm not going to do that because I already have it installed, but once you have it successfully installed, then we can start to create a directory and install a Ghost instance.
So what I'm going to do is I'm going to make that directory now, running the command mkdir on a Mac to create a directory for our Ghost website. I'm just going to call it ghost-website. Then I'm going to navigate into that directory, and from here, I'm going to run ghost install local, as it says right here. Okay, that's going to start to install a Ghost instance. It's important to note here that you need to be using the right version of Node. In this instance, I'm using version 14.16.1, and the Ghost version I'm using is 4.20.1. Okay, so that is subject to change based on the Ghost version, but for Ghost v4.20, we need to be running version 14.16.1 of Node.js.
Exploring the Local Instance and Theme Code
Alright, so as I was talking about it, here we go. We have now finished setting up the Ghost instance and we have started a brand new server using the Go CLI automatically. This is all done through the one command, and now we can access our website via this address right here. So I'm going to hold down command to turn this into a link and click on that link.
Now, what it's going to do is ask you to set up the publication in your web browser. So if you want to go through and add a site title and your login details, go right ahead. But what I want to show you is if we take that root address and paste it in another tab, you can see we have a website set up already. We've got the standard name for the site title of 'Ghost' and the standard description of 'Thoughts, stories and ideas'. And here you can see it's pre-populated with a bunch of blog posts already. We've got navigation already set up. We have all these default settings and content already on our Ghost website. So that's how easy it is to set up a Ghost website. And the beauty, of course, of having it on our computer is we have direct access to the code.
So I'm going to go into my favorite code editor at the moment, which is Visual Studio Code. And here you can see the code for Ghost website is loaded up. You might have to go into your file menu and navigate to that directory to open it up, but I've got it already open here. We're not going to talk about all the code in our Ghost website because there's some back-end code in here. What we're going to talk about is the theme. So I'm going to click here to go into the current version, then go into content, then go into themes. You can see here inside our themes folder, we already have the default theme of Casper already installed. And here you can see a little bit of the theme structure. We've got our assets folder, our partials folder, and then we've got all of our .hbs files just sitting there in the root of our folder.
Okay, so here is our theme, and any change we make to these .hbs files or the theme as a whole will be reflected in our local version that we're serving right here. As an important note, when you're doing Ghost theme development, anytime you create a new file or delete a file, especially an .hbs file, you will need to restart your Ghost instance. So let's just say if I deleted author.hbs as an example—not saying you want to do this—I would need to then run ghost restart to see that change. But we're not going to go deep into the entire process of developing themes in this video. It's just going to be an overview. If you want to go deep into Ghost theme development, I'll talk about my Skillshare class at the end of this video. But for now, let's get back to the theory.
Understanding Ghost Routing and the Template Hierarchy
As mentioned in the previous section, the route you navigate to in your browser determines what template in your theme you will load and, to a large extent, what data is available for you to access in that template. In my accompanying article, I break down the template hierarchy for the most common of routes, but what's interesting in Ghost theme development is this routes.yaml file that allows you to easily set your own routes and determine what templates serve within that route.
That being said, the standard routes set up in Ghost are an index of all your blog posts on the home page, articles and pages loaded by their slug, and filtering of the index via tag and author via the paths tag/ and author/ respectively. In the blog article, you can see in the diagram that there are several other templates that sit above the standard index and post templates. These are optional templates which will automatically load ahead of the index and post templates based on the hierarchy displayed, without the need for updating any routes. This gives Ghost a large amount of flexibility, as the number of options for routes and templates are near-infinite. This structure, of course, could be a little confusing to take in all at once, though, which is why I've dedicated around half an hour to explaining it in my Ghost theme development Skillshare class, which I'll mention more about at the end of this video.
Accessing Post Data with Handlebars
In the last section, we learned how routes and templates determine what code gets served on different addresses within your Ghost site. In this section, let's talk about what data is available in each template and how to access it. The index.hbs and post.hbs files are the two most important templates in Ghost themes and the only two templates that are compulsory for theme development. The index template is used to display a list of posts. Inside our template, we have access to the list via the following loop, which inside each iteration gives us access to the evaluation context of each individual post within the loop.
The post template, on the other hand, is intended for displaying content relating to a single post, and we can enter the evaluation context of the post on that particular template by opening up the following block expression. Inside both the post loop and the single post block expression, we have access to all the same attributes on the post context, such as title, URL, and feature image. You can, of course, also set up your theme in various ways to filter the posts that come through this post loop. For example, as we see in the basic routes example, you can limit the posts returned by this loop to only show articles by a particular author or that hold a particular tag. This is called taxonomies. But through more advanced routing like channels, we can filter via a saved combination of authors and tags.
The post template is quite flexible and can be used to serve pages as well as posts if a page.hbs file is not included in the theme. Again, this overview might be a bit to take in in one video, which is why I recommend checking out the blog article at christopherfreelancer.com/ghost-theme-development-guide.
The good news is that for all of you who have experience with the popular Handlebars templating language, you'll be easily able to pick up the syntax of coding Ghost themes. Most of the syntax is the same as Ghost, but there are some differences which I cover specifically in the blog article.
Deploying Your Theme & Further Learning
Once you've finished working on your Ghost theme locally, taking it live is a simple matter of creating a zip file of your theme and uploading it to the theme section of your live Ghost site. Then you'll want to make sure your routes file is up to date by heading into the lab section of your Ghost site settings and uploading that file as well. Given that routes are so intertwined with theme code, you might think that the routes file would be contained in the theme folder, but this is not the case. Therefore, you need to remember to update your routes separately when you make changes.
And for those of you who wish to make continuous updates to your Ghost site, there's always the Ghost GitHub integration, which allows you to push changes from local to a git repository and have GitHub automatically update the theme on your live Ghost site.
Alright, so that's a quick overview of how theme development works inside of Ghost. Obviously, I can't go into too much detail within a short 10-minute video, but if you'd like a full two-and-a-half-hour course on the subject, check out my most recent class on skillshare.com. Inside the class, we take a theme from absolute zero to live and working on the internet in just a few hours, all while learning the fundamentals of Ghost theme development. If you'd like to check that one out on Skillshare, they are currently offering a free seven-day trial to new users so you can access the class risk-free for a whole week, which should be more than enough time to cover the material. Until next time guys, thanks for watching and I'll see you on the next video.
