Publishing your marketing newsletters on your website is a great way to increase the amount of content available on your domain automatically. We do this here at FeaturePeek – we publish our Product Update newsletter publicly so that each campaign can be forever preserved in the archives (here’s an example). We’ll show you how to do the same in this article.
\nThe content is already written – don’t let it only be accessible via email inbox! The good news is that this is fairly trivial to set up if you’re building a static site with Gatsby.
\nImmediate benefits:
\n\n\nCode sample: Our entire marketing site is open source, so you can see this code in action by visiting our repo.
\n
We’ll be adding the gatsby-source-mailchimp build-time dependency to do most of the heavy lifting for us here.
\nSince we only want a subset of each campaign’s HTML source (we don’t need the <head> tags from Mailchimp, for example), we’ll also need a DOM parsing library. We’ll be using cheerio in this article, but you can swap it out for another if you’d like, as long as it’s compatible with Node.js (the native DOMParser would be ideal, but it’s only available to browsers).
yarn add gatsby-source-mailchimp cheerioAfter logging in to Mailchimp, click your avatar in the top right and then click Account in the resulting dropdown menu. From there, click on Extras > API keys.
\nClick the “Create A Key” button to generate a new API key.
\nYou should rename the Label while you’re at it so that you and your teammates know what the key is correlated with – we named ours gatsby-source-mailchimp.
We’ll want to save the API key as an environment variable so that we don’t check the value into version control. Anyone can read or write data to/from your Mailchimp account with this API key, so you want to make sure that you’re careful with it.
\nYou probably have a .env.development and/or .env.production files in your project root if you initially followed Gatsby’s docs – these gitignore’d files contain your project’s environment variables. Save a new line in them with the following:
MAILCHIMP_API_KEY=<YOUR_KEY_GOES_HERE>Don’t forget to add this value to your servers and continuous integration platforms, as your build won’t build correctly without it.
\nTell Gatsby that you’d like to use the gatsby-source-mailchimp plugin in your gatsby-config.js file. This will read from the MAILCHIMP_API_KEY environment variable that you defined earlier.
// gatsby-config.js\nmodule.exports = {\n plugins: [\n // ...\n {\n resolve: \"gatsby-source-mailchimp\",\n options: {\n key: process.env.MAILCHIMP_API_KEY,\n // replace `us20` with the value in your Mailchimp dashboard URL\n rootURL: \"https://us20.api.mailchimp.com/3.0\"\n }\n }\n // ...\n ]\n}This component will be what renders when someone loads an individual campaign post page. You might recognize the format of this component if you followed any of the Gatsby blog starters – it’s very similar to the BlogPost template component.
\nWe’ll be checking that status === 'sent' and post.send_time !== 'Invalid date' in order to prevent accidentally publishing draft campaigns that haven’t been sent out yet.
// src/templates/CampaignPost.js\nimport React from \"react\"\nimport { graphql, Link } from \"gatsby\"\nimport cheerio from \"cheerio\"\n\nimport Layout from \"components/Layout\"\nimport SEO from \"components/Seo\"\n\nexport default function CampaignPost(props) {\n const post = props.data.mailchimpCampaign\n const siteTitle = props.data.site.siteMetadata.title\n const { previous, next } = props.pageContext\n\n // we don't want the full post.html -- just what is in the body container\n \n const $ = cheerio.load(post.html)\n const bodyTable = $('.bodyContainer').html()\n\n return (\n <Layout title={siteTitle}>\n <SEO\n title={post.settings.title}\n description={post.settings.preview_text}\n />\n <div style={{ margin: 'auto', maxWidth: 600 }}>\n <Link href=\"/product-updates\">← All product updates</Link>\n <h1>{post.settings.title}</h1>\n {post.send_time !== 'Invalid date' && <p>{post.send_time}</p>}\n </div>\n <div id=\"campaign\" dangerouslySetInnerHTML={{ __html: bodyTable }} />\n <ul>\n <li>\n {previous && previous.status === 'sent' && previous.settings.title && (\n <Link href={`/product-updates/${previous.campaignId}`} rel=\"prev\">\n ← {previous.settings.title}\n </Link>\n )}\n </li>\n <li>\n {next && next.status === 'sent' && next.settings.title && (\n <Link href={`/product-updates/${next.campaignId}`} rel=\"next\">\n {next.settings.title} →\n </Link>\n )}\n </li>\n </ul>\n </Layout>\n )\n}\n\nexport const pageQuery = graphql`\n query CampaignPostById($slug: String!) {\n site {\n siteMetadata {\n title\n author\n }\n }\n mailchimpCampaign(campaignId: { eq: $slug }) {\n html\n settings {\n preview_text\n subject_line\n title\n }\n campaignId\n send_time(formatString: \"MMMM DD, YYYY\")\n status\n }\n }\n`This page serves as the collection page for all of your campaigns. In this example, it’ll be served from the /product-updates route.
// src/pages/product-updates.js\nimport React from \"react\"\nimport { graphql, Link } from \"gatsby\"\n\nimport Layout from \"components/Layout\"\nimport SEO from \"components/Seo\"\nimport JoinMailingList from \"components/JoinMailingList\"\n\nconst reverseChronologically = (a, b) => \n new Date(a.node.send_time) < new Date(b.node.send_time) ? 1 : -1\n\nexport default function ProductUpdates(props) {\n const { data } = props\n const siteTitle = data.site.siteMetadata.title\n const campaigns = data.allMailchimpCampaign.edges\n\n return (\n <Layout title={siteTitle}>\n <SEO title=\"All product updates\" />\n <h1>FeaturePeek product updates</h1>\n <JoinMailingList />\n <h2>Archive</h2>\n {campaigns\n .sort(reverseChronologically)\n .map(({ node }) => {\n const title = node.settings.title\n return (\n <div key={node.campaignId}>\n <small>{node.send_time}</small>\n <h3>\n <Link href={`/product-updates/${node.campaignId}`}>{title}</Link>\n </h3>\n <p>{node.settings.preview_text}</p>\n </div>\n )\n })\n }\n </Layout>\n )\n}\n\nexport const pageQuery = graphql`\n query {\n site {\n siteMetadata {\n title\n }\n }\n allMailchimpCampaign(\n filter: { \n status: { eq: \"sent\" }, \n settings: { \n title: { ne: \"\" } \n } \n }\n ) {\n edges {\n node {\n settings {\n preview_text\n subject_line\n title\n }\n campaignId\n send_time(formatString: \"MMMM DD, YYYY\")\n status\n }\n }\n }\n }\n`Finally, we need to create the graphQL query to pull the data from the Mailchimp source.
\nIf your Gatsby project already contains a blog, your createPages method in gatsby-node.js is probably already in use. You’ll need to combine what you already have with what is written in detail below in order to iterate over both your blog posts and Mailchimp campaigns.
// gatsby-node.js\nexports.createPages = ({ graphql, actions }) => {\n const { createPage } = actions\n const CampaignPost = path.resolve(`./src/templates/CampaignPost.js`)\n\n return graphql(`\n {\n allMailchimpCampaign {\n edges {\n next {\n campaignId\n settings {\n preview_text\n subject_line\n title\n }\n status\n }\n previous {\n campaignId\n settings {\n preview_text\n subject_line\n title\n }\n status\n }\n node {\n html\n settings {\n preview_text\n subject_line\n title\n }\n campaignId\n send_time\n status\n }\n }\n }\n }\n `).then(result => {\n if (result.errors) {\n throw result.errors\n }\n\n // Create product update pages\n const campaigns = result.data.allMailchimpCampaign.edges\n\n campaigns.forEach((campaign, index) => {\n const previous =\n index === campaigns.length - 1 ? null : campaigns[index + 1].node\n const next = index === 0 ? null : campaigns[index - 1].node\n\n createPage({\n path: `/product-updates/${campaign.node.campaignId}`,\n component: CampaignPost,\n context: {\n slug: campaign.node.campaignId,\n postPath: `/product-updates/${campaign.node.campaignId}`,\n previous,\n next,\n }\n })\n })\n\n return null\n })\n}That’s all there is to it! Now the next time you rebuild your site, your campaigns will be pulled from Mailchimp and built as static HTML pages. You can check out how ours look here.
\nRemember, the source only gets queried at build time – so when you mail out a new newsletter, you’ll have to rebuild your Gatsby site to pick up the content and publish on your website.
\nOne closing note: While I was writing this article, I verified that the code samples worked as expected by building the deployment preview of this blog post on FeaturePeek. It was super useful to confirm that the whole idea behind was behaving correctly on a server besides my local machine.
\nWe use FeaturePeek on featurepeek.com (meta) to iterate faster during development. Our blog (and entire marketing site for that matter) is open source on GitHub, so you can take a peek at the preview environments that deploy on our open pull requests.
","tableOfContents":"