At Slaight Music, where I run the technology department, one of the services we offer musicians is the build-out and maintenance of an artist website. While social media posting may have dominated artist-fan communication over the past fifteen years, we believe there are still good reasons to maintain a dedicated artist-owned web presence, chief among them the ability to develop deeper, more personalized fan engagement experiences, and to avoid having intermediaries own the relationship with the most important members of your fan base.
When we decided to refresh our stable of artist sites last year, I began to research current trends and options. In the past, I’ve relied on WordPress or Drupal for portfolio-style sites, though more recently I’ve favoured site-building platforms like Squarespace, Wix, and Webflow for their speed and utility. Although there has been buzz around Framer.com and their new AI-based design features, Ghost, a modern, decoupled CMS solution, seemed at first glance to offer everything we were looking for.
About Ghost
Ghost is run by a non-profit foundation and position themselves as “fiercely independent” - they operate with a team of globally distributed developers, have never taken on VC funding, and plow all revenues back into the development of the platform. If you’re unfamiliar with their offering, the front page of their site does an excellent job of showcasing what this amazing modern CMS is all about. Similar to Substack, Ghost is designed to let creators run a subscription content business with built in newsletter functionality and Stripe payment integration, but with greater design flexibility, a terrific UI, and a host of amazing third-party integrations.
And like Substack, the main type of creator Ghost is aimed at is the writer, i.e. someone who can generate content on a reliable schedule to satisfy the expectations of subscribers. Emerging musicians, Lord love them, are not generally known for this kind of consistency, so while we liked that Ghost allowed for member-gated content, charging a monthly fee for it was not going to fly for our use case. Instead, we were hoping Ghost would offer a web3 option with a digital wallet – a tokenomics-based approach to community building – but while it had been discussed in a few places, no one had actually set out to build it. Never shy about jumping in with both feet, we decided to give it a go.
Goals for our Refresh
We’ve long been bullish on the potential for web3 to help improve the career prospects of musicians, seeing permissionless, decentralized blockchain tech as a key part of a creator’s emerging digital arsenal. We’ve also been equally clear-eyed about the challenges of getting non-native crypto users to understand, let alone embrace these new technologies. Watching Dapper Labs’ incredible success with NBA TopShot was inspiring and instructive and a big part of our decision to chose Flow as our blockchain of choice, reasoning that if over a million mainstream sports fans weren’t intimidated by Dapper’s technology, then surely mainstream music fans wouldn’t be either.
Following crypto’s annus horribilis in 2022, the most sensible strategy for web3 true believers has been to keep building but not mention crypto, web3 or NFTs when communicating with end-users. In practical terms, this means abstracting away complexity and keeping the UI as friendly as possible, and instead of immediately emphasizing the buying and selling of commercial crypto tokens (aka NFTs) introduce free-to-claim “social” tokens as a way to ease users into the idea of owning digital property.
Our initial goal then was to build a membership-based musician website with a fully managed digital wallet capable of storing a visually appealing membership token. Our solution had to avoid the usual pitfalls that stymie web3 adoption: i.e. no seed phrases, gas fees, or charges of negatively impacting the environment. And it had work seamlessly on mobile, something that should be a given in 2023, but remains challenging in the web3 space. Here’s how we approached it.
Technical Architecture
Ghost’s front-end is separated into a content layer and an admin layer, each with its own separate API and authentication method. On the backend, Ghost Core handles client requests via a JSON API, and offers a variety of different database and media storage options – this documentation page provides a nice overview with a helpful diagram. We decided to stick with both the default admin client and default the Handlebars.js templated theme engine, which is served by an Express.js web server. This allowed us to draw from the large library of 3rd party Ghost front-end themes, and we eventually selected the excellent Galerie as our base theme.
Riding on top of the content front-end is the user “Portal”, an independent Ember.js app that handles all the user-facing membership and subscription settings in a modal dialog. This “drop-in script” is independent of Ghost’s theme layer, and users access their account data by pressing a floating round button that appears by default on all site pages.
Adding a web3 membership tier would involve making significant changes to both the admin layer and the portal, and would require the integration with other key elements of Slaight Music’s AWS technology infrastructure, including our existing Drupal back-end, our customer-facing SaaS dashboard and our work with the Flow blockchain and its smart contract language Cadence.
Infrastructure Build Out
Our lead developer Adam Hunter helmed the Ghost build process, setting up two medium EC2 instances on AWS for production and development environments, following the recommended approach detailed here. Multiple Ghost sites can be run under each instance, all sharing a single load balancer, and thus far we have not hit any memory limits or performance issues with six production sites running in total. We decided against using a shared file system at this time, plan to introduce a CDN at some point in the future, and opted to run MySQL on Amazon’s fully managed RDS service rather than locally, freeing us from worrying about DB administration, backups, and security.
The setup was not without its hitches however, and in general self-hosted Ghost configuration is not for the faint of heart. Adam needed to add some header rewrites to get Ghost to work on our Nginx setup, and tweak the permissions to allow for the sending of magic link emails (for regular users, Ghost is passwordless). He also found some weirdness in how Ghost handles custom domain names and had to set a series of additional configuration values to get Ghost to play nice with Mailgun, the only supported mail provider at the moment. Speaking of DNS, we were fortunate that all our artist web domains are under our control and managed through AWS’s Route53, making it easier to set up the required hostnames, domain pointers, security certificates, DKIM and SPF records.
In general, the build process is not quite as automated as we’d like it to be – while elements of it are scripted, manual intervention is required at key points, and it takes approximately an hour to spin up a new site for an artist. Eventually, we’d like to fully script the process end-to-end and develop a web admin tool to allow non-technical users to create new sites.
With that aspect of the build-out of the way, we turned our attention to the additional user functionality required for wallet support and blockchain interactions, features that were handled by our senior software engineer Anton Lebedev. After some trial and error, we ended up basing our approach to wallet management on Flow’s Hybrid Custody model, first discussed by Dieter Shirley in this January 2023 blog post, and currently under active development by the Flow community. In short, it allows for the “walletless onboarding” of users, providing them an initial application-managed “child” wallet that can later be connected to a fully custodial “parent” wallet, under their direct control (and therefore interoperable with the wider web3 ecosystem). It’s an excellent way to reduce short-term friction without compromising longer-term utility and value.
We thought about further modifying our fork of Ghost core to handle some of the necessary coding requirements for hybrid custody but opted instead to use Drupal as a middleware solution, extending a previously-implemented Flow gateway service for the task. Anton added a “signup” endpoint to our gateway API to receive data passed in from Ghost (a new user’s email, their internal Ghost ID, and the domain the request came from) and then stored that data in a new Drupal entity type. Using Lambda and AWS’s Simple Queue Service (SQS), a Flow account was then created for the user, and the data that came back from the blockchain (the new wallet address, and the account’s public and private keys) were added to the entity in Drupal, with the private key encrypted in the DB and not visible via the admin UI.
One of the challenges with blockchain interactions generally is their asynchronous nature: there’s often an indeterminate lag between the time a transaction is submitted to the network and the time you get a response back. Employing SQS allowed us to queue transactions and recover gracefully from any dropped connections, and to provide status messages and “Working…” animations on the front end to assure users that things were progressing in the background.
Design Considerations
We wanted our new web3 features to integrate as closely as possible with Ghost’s existing UI, so extending the above-mentioned membership portal to incorporate the wallet made the most sense. As you can see below, we added a second tab for digital property, and a third (as yet unused) tab for users to add a self-custodial parent wallet, should they want to move their property out of our app in the future.
On the administration side, Ghost has a series of screens for configuring different membership tiers and offers and we wanted to follow that established design pattern as much as possible. As the screenshot below illustrates, we added a web3 tier that is modeled on the Stripe-enabled paid subscription option, but with different benefits listed. Further work will be required to make this setup fully automated; at present, there are still a number of additional manual steps required inside the Ghost admin area.
Pulling It All Together
Visitors who join the site are sent a magic link that redirects them to a custom welcome page with an interactive 3D membership token and a large “Claim” button below it. I’ll describe how we create and manage tokens in a future blog post, for now, all you need to know is that a JavaScript code snippet from our customer management dashboard is pasted into the page to render the token asset bundle and the button. Pressing the button triggers a call to our Flow gateway API that executes the wallet creation steps described above. Once that completes, a second endpoint is called which executes the “Claim Token” process, during which a unique serialized membership token is minted, uploaded to the peer-to-peer distributed file system IPFS, and then deposited in the member’s managed wallet.
Using the member management functions available via Ghost’s Admin API we take advantage of the 500-character “Note” field to store a JSON string with key-value pairs that contain relevant wallet and token info. We also use the “Labels” field to set status variables so that we can easily identify (and filter) users that meet certain criteria. Having these values locally allows us to quickly and reliably update the portal UI with a user’s web3 info, and execute client-side logic like deactivating the Claim button once the token is claimed and no longer redirecting returning members to the welcome page on subsequent log-ins.
Final Thoughts
This past spring, we re-launched four artist sites using our customized version of Ghost. As of August 2023, one of those properties, newfriendsmusic.com, has the web3 tier enabled. Feel free to visit that site and join their community to see things in action for yourself - they’re a terrifically talented, fun-loving band that you won’t regret checking out. You can also test drive things right here on this blog by pressing the JOIN / LOG-IN button at the bottom right, but be warned, I’m nowhere near as popular and talented as New Friends.
