A newsletter is still a popular and effective way to connect to your audience and establish trusted relations with your readers. The Ghost team continues to invest heavily into membership functions that you can also use with Jamify in order to initiate, organize and maintain professional newsletter campaigns.

It is still widely believed that statically built sites cannot provide dynamic functionality such as newsletter subscriptions. Totally wrong! Jamify utilizes the static site builder Gatsby which creates static sites that can be built with app like features.

The Jamify starter therefore integrates a new membership plugin that allows for your users to freely subscribe to your site thereby acquiring membership status in your Ghost CMS. The CMS handles sending out an email invite and adding members to your membership dashboards.

Subscription Flow with Jamify

Let's see how this works for a user visiting your Jamify site. There are two places where your users can subscribe to your site. The most prominent one is the Subscribe button at the top right corner. This option is is present on all pages:

Pressing Subscribe opens a new modal overlay window:

The only information asked for is an email address - it can't get any simpler. Let's choose to provide one and press Subscribe:

You should now see the green success message. The screen stays up until a user hits the cross button at the top right corner or the browser's back button.

Pro tip: You can also press the ESC key on your keyboard to exit the overlay window.

In addition to the modal subscription window, a subscribe section is also shown at the end of every post:

This is the perfect place for asking your users to subscribe. After your visitors enjoyed reading your article, they get the opportunity to subscribe to your site in order to stay informed when you publish a new post.

Pressing the Submit button terminates the flow on your site and the user receives an email in order to confirm the subscription.

Your Jamify site first registers the user's email address in your Ghost CMS which then takes care of handling the confirmation process.

User confirmation

A typical email that your users receive in their inbox looks as follows:

This opt-in method follows best practices and ensures that subscribing to your site is an active decision. Your user needs to click this button in order to freely sign-up to your site. There is also a direct link at the bottom of every mail which can be used instead of clicking the button.

When you inspect the subscription link you'll see that it refers to your Ghost CMS backend.

Even though users subscribe to your backend, a success message is forwarded and opens your front-end page:

That way users are kept on your main site while the hard work is performed in the background! This last step completes the user's subscription flow.

Note that a user can always unsubscribe by pressing a link that is sent with every email. Now, it's your turn to feed your users with a newsletter or other email marketing material.

Members dashboard

All users who successfully subscribed to your site show up in the membership dashboard of your CMS:

This is the place where you can manage your members. You can manage each member individually, add labels and notes and also control if a user will receive newsletters:

Preview Newsletter

With your Ghost CMS you can now automatically send full articles as an email version to your members. Before doing that, you should make sure you are satisfied with the end result and send a test email to yourself.

From your post view, open your right settings pane and choose Email newsletter. This opens a new dialog as shown below:

Note that you must configure Mailgun in order to be able to use the email newsletter feature. For further instructions, look at the configuration section below.

The Preview in browser function is a really great feature as it gives you a visual presentation of the outcome on both the desktop and on mobile devices:

Once you are fully satisfied with both the desktop and the mobile results, use the Send test email button to get the result into your own inbox. This is how the desktop version looks in my inbox:

It's reassuring to see that the emailed version looks exactly like the desktop preview version.

It's really confusing that Ghost uses your SMTP configuration for sending you test emails, but requires a Mailgun setup in order to be able to use the newsletter functionality.

Personalize Newsletters

It would be strange to receive an email containing a full blog article without a small greeting or introductory message. This is where email cards enter the game:

An email card can be placed anywhere in your post and is only shown in the email output, but not in the actual post (yes, this also works with Jamify 😉).

While email cards are great, they still feel a bit limited. For example, you cannot place any messages in front of the article, the earliest place is below the feature image.

Furthermore, email cards only support basic text formatting. Wouldn't it be great to place an image of your signature in your note or be able to change the typography so it looks like a handwritten note? As members functions are still beta in Ghost, it' probably a bit early to ask for those features.

Newsletter Campaigns

You have written and reviewed your article, discussed it with your peers, added a personalized note with email cards and tested the newsletter result in the preview windows.

What do you need to do in order to send out the newsletter to your subscribed members?

First, you should check the newsletter subscription status of your members. By default, all members are signed up to your newsletters, but are there users you want to exclude? Have you excluded users that should receive the newsletter this time?

Well, the final step needed is right before hitting the Publish button, by selecting the Send by email switch:

Want to send a newsletter after the post has been published? No problem: Just set your post into draft status, turn the email switch on and re-publish. Best of all: Your Jamify front-end page is not interrupted by this action!

It would be great to have a function that allows sending only to those users that did not receive the newsletter earlier. It's important to be extra cautions here: if you happen to send out the same newsletter twice, it's a sure way to land in the spam folder or get unsubscribed forever!

Teaser Newsletters

In my view, sending the full post as an email is a bit bloated. Many people I spoke to also prefer to send an excerpt with a link to the full post instead of a full article. You want to inform your readers with a newsletter, but you also want to channel your users back to your blog site.

Ghost's newsletter flow does not support this use case, however, you can make a reduced teaser version of your post as a second post – literally a ghost post 😂. There is just one complication. In order to send out the newsletter, you must publish it first. In an automated workflow, publishing your article triggers a webhook which then leads to the publication of your secondary ghost post: Ouch!

Excluding Posts in Jamify

You need a way to publish a post in your back-end that can be excluded in your Jamify front-end. With the flexibility you have with Jamify, this is readily possible. First, you need to mark the post for exclusion. You can use an internal tag for that purpose. Internal tags in Ghost start with a hash. So, in your CMS admin interface, create a new internal tag with name #hidden as follows:

Note that you need to switch to the Internal tags category in order to see the tag after creation. You will assign this tag to your newsletter post later.

Now, you need to tell your Jamify starter that it should not generate pages for posts that contain the tag #hidden. This can be easily achieved with setting a configuration option in siteConfig.js:

// siteConfig.js
module.exports = {
  siteUrl: `https://www.jamify.org`,
  
  // Exclude post or pages (default: do not exclude)
  excludePostsOrPages: (node => node.tags.find(tag => tag.name === `#hidden`) !== undefined),
}

The excludePostOrPage option takes a Javascript function as input, so you gain full control over the exclusion process. Depending on the context, the node variable will be populated with all fields present on posts or pages, which gives you a vast range of possibilities.

In the above example, we exclude posts based on a simple tag, but you can use more advanced pattern matching algorithms and work with a combination of fields.

We use internal tags in this example, but the excludePostOrPage function works with regular tags too.

In order for these changes to take effect, you need to re-build your site. With an automated set-up all you need to do is pushing the change to Github.

As the idea of the teaser is to channel your user's back to your site, make sure the new post is published and accessible to the world, before sending out the newsletter.

Creating the Teaser

The teaser newsletter should be simple and give a glimpse into the topic of a newly published article. Start by making a dedicated draft post, which could start with a greeting, again utilizing email cards:

and followed by the start of the article:

Now, it's super important that you don't forget to assign the hidden tag to this newsletter teaser post before pressing the Publish button:

Again, you should make use of the Preview in browser functions and send yourself the newsletter for review before hitting the big Publish button.

CMS Configuration

In order to be able to use the newsletter features in your Ghost CMS, you must go to the Labs section and activate the Enable members and the Allow free member signup switches:

It's quite new that you can also configure the reply email that is sent with the newsletter email:

Finally, you must configure Mailgun, otherwise the newsletter sending function is disabled:

Mailgun is currently the only option for distributing newsletters. Hopefully Ghost will provide more options after the beta phase.

Redirects

All links within your newsletter email point back to your Ghost CMS which is not visible to the public, so they will appear to be broken. It's therefore extremely important that those links get redirected to your live site.

If you installed your Ghost CMS as described in our self-hosting tutorial:

Ghost CMS on Hetzner Cloud
Learn howto install and run a headless Ghost content management system in the cloud. Deploy Ghost in a Docker container and make it accessible to your teams. This guide focuses on the specifics of a headless configuration and fully prepares you for the awesome Jamstack.

you are done and you can skip this section. Otherwise, you need to upload the following redirects.json file to your Ghost CMS:

[
  {
    "from": "^\/(?!content\/images\/|members\/|unsubscribe\/|p\/)(.*)",
    "to": "https://www.your-blog.org/$1",
    "permanent": true
  }
]

Basically this file instructs the Ghost CMS server to permanently redirect all endpoints to your static site, except the ones starting with either /content/images, /members or /unsubscribe.

Summary

A flaring fast static Jamify site that you can push to the edges of a CDN is capable of providing your visitors with a dynamic user experience. The new membership plugin that is integrated into the Jamify starter enables a membership subscription flow that is not different from a traditional Ghost setup.

This means: no loss in dynamic user experience, but a big gain in site performance, security and developer flexibility!

As a site owner it is important that you can utilize the members function in your headless Ghost CMS, so no other tool is needed and everything can be done right where you write your articles. While the members dashboard is cool, the newsletter sending in Ghost feels too tightly coupled to the article publishing workflow which makes it difficult to launch independent newsletter campaigns.

Nevertheless, you can create hidden posts that never show on your blog site solely for the purpose of generating newsletters. This is a great alternative until Ghost supports more flexible newsletter features and gives you a lot of freedom for starting independent newsletter campaigns!

Missing a tutorial on Jamify? Open a new tutorial issue and consider contributing one yourself. We are a friendly open-source community and are looking forward to welcoming you!