small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<a href="https://robots.thoughtbot.com/how-to-make-a-ghost-theme">Giant Robots Smashing Into Other Giant Robots</a> | Will H McMahan 
<img src="https://images.thoughtbot.com/blog-vellum-image-uploads/4SFwnZxhThqWcOfA8ybI_IMG_0108.jpg" alt="Woman talking about Ghost blogs">
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 <a href="https://github.com/thoughtbot/ghost-theme-template">make their blogs better</a> 
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 
<a href="https://ghost.org/features">features page</a> 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:
<ul>
<li><a href="https://github.com/TryGhost/Ghost">Ghost is open source</a>, but also has hosted 
options available if you don’t want to run your own server.</li>
<li>It supports multiples roles for authors, editors, and admins for your whole team.</li>
<li>You get strong out-of-the-box SEO including support for Facebook Open Graph, 
Twitter Cards, Schema.org, and AMP pages.</li>
<li>Visitors and your team can subscribe to your site/blog by RSS, Email and Slack.</li>
<li>Ghost has <a href="https://ghost.org/downloads/">desktop apps</a> for Mac, PC, and Linux.</li>
<li>There’s more stuff including a post tags, scheduled publishing, JSON API, XML sitemaps.</li>
<li>Lest we forget, Ghost theme architecture is flexible and easy to work with 
while allowing you to design your own creative and innovative designs.</li>
</ul>
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 
<a href="https://github.com/thoughtbot/ghost-theme-template">Ghost theme template</a> to 
help creating your ghost theme a little easier.
<img src="https://images.thoughtbot.com/blog-vellum-image-uploads/fv5SU5eFT4yNvvK7E1RU_creenshot.png" alt="screenshot of Ghost blog admin panel">
<h2>
 <a href="https://robots.thoughtbot.com/#understanding-the-structure-of-ghost-themes"> 
 Understanding the structure of Ghost themes 
 </a> 
</h2>
Ghost’s default theme is called <a href="https://github.com/TryGhost/Casper">Casper</a>. 
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 
<a href="https://github.com/thoughtbot/ghost-theme-template">ghost-theme-template</a>, 
who’s structure is based on that of Casper, with all CSS, and non-essential 
html removed.
<h3>
 <a href="https://robots.thoughtbot.com/#core-elements"> 
 Core elements 
 </a> 
</h3>
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.
<ul>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
</ul>
You also have the ability to customize the login pages for Ghost, but doing so 
is typically unneeded for the majority of projects.
<h3>
 <a href="https://robots.thoughtbot.com/#basic-structure"> 
 Basic structure 
 </a> 
</h3>
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.
<ul>
<li><code>/assets</code>: Your theme’s asset directory.</li>
<li><code>/partials</code>: Your theme’s partials directory.
<ul>
<li><code>loop.hbs</code>: 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.</li>
<li>You can create any partials you want to use in multiple locations throughout 
the site. The ghost-theme-template uses this by having a <code>site-header.hbs</code> 
file to keep the top of the site consistent across the template.</li>
</ul>
</li>
<li><code>author.hbs</code>: This is the author page. It contains the author’s name, avatar, 
bio, and a list of post the author has written.</li>
<li><code>default.hbs</code>: This is the main layout template file for all pages like the 
home, author, tag, and post pages.</li>
<li><code>index.hbs</code>: This is the index/home page. It contains the primary <code>loop</code> that 
will include all non-page posts.</li>
<li><code>page.hbs</code>: This is the template for pages (not posts). The overall structure 
of this is often very similar to the <code>post</code> template, but can be customized 
to be quite different.</li>
<li><code>post.hbs</code>: This is the template for your posts. Not much to say here; make it great!</li>
<li><code>tag.hbs</code>: The final template is for your blog’s tag pages. This page contains 
all of the post associated with a given tag.</li>
</ul>
<h2>
 <a href="https://robots.thoughtbot.com/#using-gulp-with-to-build-your-ghost-theme"> 
 Using Gulp with to build your Ghost theme 
 </a> 
</h2>
<a href="https://github.com/thoughtbot/ghost-theme-template"><code>ghost-theme-template</code></a> 
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 <code>cd</code> in to 
the theme directory and run <code>npm install</code> to install the theme’s dev 
dependencies. If this is your first time using Gulp, be sure to checkout the 
<a href="https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md">getting started docs</a>.

<video loop="" muted="" src="https://images.thoughtbot.com/blog-vellum-image-uploads/yiZVjzARtud00xeYzkBw_ghost%202.mp4"></video> 
<code>gulp</code> / <code>gulp default</code>
Once the project dependencies have been installed, you have a few tasks 
available to you. Running <code>gulp</code> will compile all SCSS files within the <code>/scss</code> 
directory. The theme also has <a href="http://bourbon.io/">Bourbon</a> and 
<a href="https://neat.bourbon.io/">Neat</a> preconfigured, as well as 
<a href="https://autoprefixer.github.io/">Autoprefixer</a>. No assembly required. Gulp will 
also run <a href="http://jshint.com/">JSHint</a> on any of your javascript within the 
theme’s <code>/js</code> directory. Once both the asset tasks have been run, Gulp will 
continue to watch for changes until terminated.
<code>gulp deploy</code>
So this is the cool part. Running gulp deploy will compile all of your assets, 
zip up your theme so you can upload it to ghost (themes can be added to ghost by 
way of the admin by uploading a zip file in settings), and will run Ghost’s 
official validator, <a href="https://github.com/TryGhost/gscan">GScan</a>, which will scan 
your theme for common issues. If GScan detects any incompatibilities between 
your theme and Ghost, it will print the results to the console after the deploy 
has completed.

<video loop="" muted="" src="https://images.thoughtbot.com/blog-vellum-image-uploads/PZpsCWTzTAqdmvSmaG9W_ghost%20screen%20record%20deploy.mp4"></video> 
<h2>
 <a href="https://robots.thoughtbot.com/#publishing-your-ghost-blog"> 
 Publishing your Ghost blog 
 </a> 
</h2>
As you build your theme, you’ll want to be running Ghost locally so you are able 
to quickly iterate and review changes. Check out the Ghost documentation’s 
<a href="https://themes.ghost.org/docs/getting-started#section-setting-up">Set-up Guide</a> 
for more info on running ghost locally, but you will first need to install the 
<a href="https://docs.ghost.org/docs/install-local#section-install-ghost-cli">ghost-cli</a>. 
Once your system is set up, it’s easy to dive in to your projects and generate 
new local blogs on the fly.
After you’ve finished your awesome new theme, you can either host your own ghost 
instance or use <a href="https://ghost.org/pricing/">Ghost’s official hosted service</a> 
(I do). Once your production app is set up, just upload your theme and your new 
blog is ready to go.
If you hit a snag, the <a href="https://slack.ghost.org">Ghost Slack channel</a> is a 
lively and helpful community full of people willing to help you get started.
GLHF 👻
Sincerely yours, <a href="https://twitter.com/WHMII">Will H McMahan</a>

<video loop="" muted="" src="https://images.thoughtbot.com/blog-vellum-image-uploads/lD8NTcdGSFq4kPG3N7Nn_How%20to%20make%20a%20ghost%20theme.mp4"></video>

How to make a ghost theme

How to make a ghost theme

Top Stories