--- title: How to make a Ghost theme teaser: 'Get started creating your first Ghost theme with gulp, sass, and autoprefixer. ' tags: open source,ghost,gulp,sass author: Will H McMahan published_on: 2017-12-13 --- Ghost is a publishing platform, great for personal and professional projects. Since 2013, the Ghost team has been building a robust tool for crafting content and sharing it with the digital world. I first begun using Ghost as soon as it was publicly available and have seen it grow in to a fantastic solution for the needs of many clients and friends. In the second half of July 2017, Ghost v1.0.0 was released, and with it came numerous updates to the editing experience, a refreshed UI, and ever increasing control of how your work appears on social channels like Facebook and Twitter. During the past year, we've had the opportunity to work with a number of clients looking to [make their blogs better](https://github.com/thoughtbot/ghost-theme-template) for their visitors, as well as their authors and staff. For many of them Ghost was a great fit, and you can check out their [features page](https://ghost.org/features) to see if what it has to offer meets your needs. Here's a quick rundown of some key features that often fall in to the “must haves” when selecting a platform for a blog or site: - [Ghost is open source](https://github.com/TryGhost/Ghost), but also has hosted options available if you don't want to run your own server. - It supports multiples roles for authors, editors, and admins for your whole team. - You get strong out-of-the-box SEO including support for Facebook Open Graph, Twitter Cards, Schema.org, and AMP pages. - Visitors and your team can subscribe to your site/blog by RSS, Email and Slack. - Ghost has [desktop apps](https://ghost.org/downloads/) for Mac, PC, and Linux. - There's more stuff including a post tags, scheduled publishing, JSON API, XML sitemaps. - Lest we forget, Ghost theme architecture is flexible and easy to work with while allowing you to design your own creative and innovative designs. Ghost isn't a blunt instrument that works for every project, but can be the perfect tool for the right job. To that end, we created our own [Ghost theme template](https://github.com/thoughtbot/ghost-theme-template) to help creating your ghost theme a little easier. ![screenshot of Ghost blog admin panel](https://images.thoughtbot.com/blog-vellum-image-uploads/fv5SU5eFT4yNvvK7E1RU_creenshot.png) ## Understanding the structure of Ghost themes Ghost's default theme is called [Casper](https://github.com/TryGhost/Casper). It's a great theme for getting started using ghost and making your own blog. However it's got a substantial amount of code and structure making it less than ideal for as a starting place for creating new themes. For this walk-through we're going to be using thoughtbot's [ghost-theme-template](https://github.com/thoughtbot/ghost-theme-template), who's structure is based on that of Casper, with all CSS, and non-essential html removed. ### Core elements Ghost (and subsequently Ghost themes) have a few core concepts from her which they build their structure. Most of these are standard elements of any blogging engine or platform. - **Posts**: Referred to as “Stories” within user admin, posts are the base unit of Ghost. They're blog posts… like the one you're reading… right now. - **Pages**: Pages are actually a sub-variant of posts. They have all the same properties as posts, but are excluded from the list/index of posts and won't appear on the homepage. - **Authors**: Authors are discrete objects that are associated posts and pages. The authors in a blog will also have their own pages including their avatar, description, and the post they've written. - **Navigation**: Navigation is user customizable via the Ghost admin. You're able to design a template within your theme for how the navigation manifests on each page. - **Tags**: Tags can be associated with either posts or pages. Like authors, tags get their own page with all the posts that have the relevant tag, as well as an optional image and description. When tagging a post, the first tag in the series considered the "primary tag," and can be given special features or privileges within the theme. - **Blog Attributes**: The blog themselves can also have various attributes that are customized via the admin. This includes blog title, blog description, logos, and social icons. - **Email Signup**: The enabling of email sign-up within the admin is currently optional and is by default deactivated. However, you can definitely add support for it within your theme. There're two items associated with email subscription. First is a partial, that can be included anywhere throughout your site, which will generate a standard e-mail signup form. The second is a discrete email subscription page which is also customizable, comes pre-baked with a standard look and feel similar to that of the login page. You also have the ability to customize the login pages for Ghost, but doing so is typically unneeded for the majority of projects. ### Basic structure The basic document and directory structure of Ghost themes is very similar to that of most simple web applications. Here's an outline of the primary files that make up a Ghost theme. - `/assets`: Your theme's asset directory. - `/partials`: Your theme's partials directory. - `loop.hbs`: The “loop” is the primary post loop. This loop will be used any time you're showing a list of post including the tags page, author page, and home page. - You can create any partials you want to use in multiple locations throughout the site. The ghost-theme-template uses this by having a `site-header.hbs` file to keep the top of the site consistent across the template. - `author.hbs`: This is the author page. It contains the author's name, avatar, bio, and a list of post the author has written. - `default.hbs`: This is the main layout template file for all pages like the home, author, tag, and post pages. - `index.hbs`: This is the index/home page. It contains the primary `loop` that will include all non-page posts. - `page.hbs`: This is the template for pages (not posts). The overall structure of this is often very similar to the `post` template, but can be customized to be quite different. - `post.hbs`: This is the template for your posts. Not much to say here; make it great! - `tag.hbs`: The final template is for your blog's tag pages. This page contains all of the post associated with a given tag. ## Using Gulp with to build your Ghost theme [`ghost-theme-template`](https://github.com/thoughtbot/ghost-theme-template) uses Gulp to add some basic quality of life additions to your ghost theme development workflow. It comes preconfigured with a few tasks to get you started. To get the theme up and running you'll want to `cd` in to the theme directory and run `npm install` to install the theme's dev dependencies. **If this is your first time using Gulp**, be sure to checkout the [getting started docs](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md).