Build your first Ghost theme

This guide takes you from a new account to your own theme on your Ghost site. You build everything on the Free plan. Putting the theme on your site needs Pro, the paid plan. Keep Ghost Admin open in another tab for part 5.

1. Create a project

A project holds one theme. Your first one starts with a complete design, so you change it rather than start from an empty page.

1. Go to https://www.fantasma.io/app and sign in, or create an account with your email or Google. Sign in or create an account has the details.
2. On your dashboard, click Create project.
3. In the Create new project dialog, enter a Project Name, such as Evening Edition, and click Create.

The editor opens with your Homepage on the canvas, filled with demo posts. The builder names each part of the screen.

2. Choose fonts and colors

Fonts and colors live in Styles and apply to every page at once.

1. In the icon rail, the narrow bar of icons along the left edge of the editor, click the paintbrush icon, Styles. The left sidebar lists the Styles screens, and the canvas shows the Style book, a sheet of samples of your fonts and colors.
2. Click Typography.
3. Under Font pair, click a tile, such as Editorial. Point at a tile first to see its name and fonts.
4. At the top of the sidebar, click the arrow next to Typography to go back.
5. Click Colors.
6. Under Color scheme, click a tile, such as Rose.
7. At the top of the canvas, click Homepage. The canvas shows your home page instead of the Style book.

Your homepage shows the new fonts and colors. To change one font or one color later, see Change your fonts and Change your colors.

3. Add a section from a pattern

A section is one band of a page. A pattern is a section that is already designed, which you add and then make your own. Your Homepage starts with three sections, Featured Posts, Newsletter CTA and Latest Posts, and the Sections list in the left sidebar names them from the top of the page down.

1. In the icon rail, click the page icon, Templates.

2. In the Templates list, click Homepage if it is not selected.

3. On the canvas, point at the line between two sections. A + button appears, with the tooltip Add section.

   

4. Click +. An empty section appears with a row of cards.

   

5. Click a pattern card, such as About with Image Left.

The pattern appears on your page, and its name shows in the Sections list in the left sidebar. Add a section to a page shows the other ways to add one, and How patterns work explains how it stays linked to the pattern.

4. Edit the text

1. On the canvas, click the heading of the new section. The heading gets an outline, and the toolbar over it shows text buttons such as Bold. If the whole section gets the outline instead, click the heading again.
2. Click in the heading's words to place the cursor there.
3. Press ⌘ A to select the heading's words, or Ctrl A on Windows, and type your own.
4. Press Esc to stop editing.

Edit the paragraph and the list under the heading the same way.

Fantasma saves as you work, so there is no save button. Edit text on the canvas covers bold, links and the data Ghost fills in, such as the site title.

5. Connect Ghost and preview your posts

Until now the canvas shows demo posts. Connect your Ghost site to see your own. Your site needs Ghost 6 or later.

First, get the key Fantasma connects with. In Ghost Admin, signed in as the Owner or an Administrator, open Settings → Staff, click your name, and copy your Staff access token. Fantasma stores the token encrypted. It uses it to copy your posts for the preview, to publish your theme, and to upload your routes and redirects. Connect your Ghost site explains this key, the other kind Ghost offers, and how to remove the connection.

1. In Fantasma, click Download at the top of the right sidebar. A menu opens. Connecting works on every plan, Free included.
2. Click Connect your Ghost site. Project settings opens on the Ghost page.
3. In Ghost site or Admin URL, enter your site's address, such as https://example.com.
4. In Admin API key or Staff access token, paste the token.
5. Click Save and verify. The page shows your site's name and Connected.
6. Close Project settings. The button at the top of the right sidebar now reads Publish.
7. Next to Publish, click the dashed square with lines, Preview data.
8. Select Connected site.

The canvas redraws with your own posts, tags, authors, site title and logo. Preview with your Ghost content and members shows how to see the pages as a member sees them.

6. Put the theme on your site

Publishing and downloading need Pro. On the Free plan, the menu still opens, and clicking Publish or Download theme in it opens an offer to upgrade. See Free and Pro plans.

Important. Publishing replaces the theme your site shows right away.

1. At the top of the right sidebar, click Publish. A menu opens with your site's address and the version this publish gets.
2. Click Publish at the bottom of the menu.

When "Theme published to Ghost" appears, open your site in a new tab. It shows your design with your posts. Your posts, pages and members stay in Ghost, and only the theme changed. Your previous theme stays in Ghost's list of themes, so you can switch back to it in Ghost Admin. Publish your theme to Ghost explains the theme's name and version in Ghost.

If you prefer not to connect Fantasma to Ghost, download the theme as a ZIP file and upload it in Ghost Admin instead, as Download your theme and upload it in Ghost shows. Once your site is connected, Download theme is under the arrow beside the Publish button at the bottom of the menu.

To change the design later, edit the project and publish again. How Fantasma works with Ghost explains what lives in Fantasma and what stays in Ghost.