开发者如何以 0.00 美元的价格发布定制新闻通讯

我将向您展示如何通过几个简单的步骤创建您自己的自定义新闻通讯。本教程中的所有工具均可免费使用，整个过程无需任何费用即可完成。

我将使用电子邮件框架从头开始构建电子邮件新闻稿模板，从 VS Code 内部测试我的电子邮件，使用 Mailchimp 创建基本的注册页面，并通过 Mailchimp 向我的订阅者发送电子邮件。

一路上会有很多机会走捷径或进一步扩展——不要觉得必须完全按照我的步骤来。

为什么您应该定制您的新闻稿

您可以随时使用拖放工具或预建模板来创建电子邮件 - Mailchimp 和 Sengrid 都提供了一种无需任何编码即可轻松设计电子邮件的方法。

然而，从头开始构建自己的电子邮件是值得的，原因有二。

首先，创建自己的电子邮件是提升 Web 开发技能的绝佳途径。您将进一步了解如何使用 HTML 和 CSS 为读者打造引人入胜的体验。

其次，自定义电子邮件可以帮助您将自己与其他时事通讯区分开来。

在设计我的简报Source 时，我非常注重以最易理解的格式呈现内容，从而节省开发者的时间。我使用深色主题定制了简报，并用蓝色文本突出显示每个新想法或内容，方便用户快速浏览。

以下是一个小示例：

通过更好地控制电子邮件的设计，您可以根据受众进行定制，并为读者提供最大的价值。

让我们开始吧！

使用 HTML、CSS 和 MJML 构建您的新闻稿

所有电子邮件模板都是用 HTML 和 CSS 构建的，它们是网络的基石。然而，由于 Gmail 和 Outlook 等电子邮件客户端对同一封邮件的渲染方式可能不同，因此构建电子邮件变得十分复杂。而且与构建网站类似，为了满足基本需求，可能需要大量的样板代码。

很多框架可以自动处理一些最常见的电子邮件需求，例如跨不同电子邮件客户端和设备的响应能力，从而简化电子邮件构建过程。我发现MJML是一个特别容易学习的框架，并且在快速构建电子邮件模板原型方面非常强大。

使用 MJML 的一些好处包括：

• 使用 MJML 的语义语法，编写更少的代码，节省时间并提高编码效率
• 在最流行的电子邮件客户端（甚至是 Outlook）上构建响应式电子邮件
• 使用可重复使用和可扩展的组件节省时间

有几种方法可以开始使用 MJML。

如果您不想费力安装依赖项，可以免费使用在线编辑器。这是一种快速且强大的入门方式。您可以在这里找到编辑器。

如果您想在本地使用 MJML，您可以使用您选择的代码编辑器（例如 VS Code、Sublime 和 Atom）。要安装 MJML，您还需要安装Node。之后，安装 MJML 就很简单了。只需打开终端并运行：

npm install mjml

接下来，为您的代码编辑器安装 MJML 插件：VS Code、Sublime或Atom。

现在，您可以开始构建电子邮件了。MJML 拥有丰富的文档，可以指导您了解基本原理。从风格上讲，MJML 就像增强版的 HTML 和 CSS，它添加了新元素，可以与您可能已经熟悉的典型 HTML/CSS 语法配合使用。

MJML 提供了一些预配置元素来替代标准 HTML 元素，例如<mj-body>、<mj-section>、<mj-column>和<mj-text>。它们的工作方式与 HTML 元素类似，但与电子邮件客户端配合得更好。

我们提供多种模板供您选择，助您快速上手。我建议您对现有项目进行一些调整，以便更快地完成最终作品。我最喜欢的模板之一是 Recast，您可以在这里在线预览和编辑。

如果您使用的是 VS Code，请键入命令MJML: Template以拉出模板列表，然后选择 Recast。

在创建电子邮件时，您可以通过单击编辑器顶部靠近选项卡的 MJML 图标或键入命令来切换预览模式MJML: Open Preview to the Side。预览将实时刷新。

测试你的电子邮件：从 VS Code 内部发送电子邮件

实时预览窗格是快速查看电子邮件外观的好方法，但最好通过向自己和一些朋友发送测试电子邮件来正式检查电子邮件模板。

要直接从 VS Code 发送电子邮件，请安装 Node 包nodemailer。Nodemailer可让您轻松地从计算机代表您的电子邮件帐户发送电子邮件。您还需要一个 Gmail 帐户。只需运行：

npm install nodemailer

接下来，通过命令面板打开 VS Code 设置settings.json。将以下值更改或添加到json文件中：

“mjml.mailer”: “nodemailer”,
“mjml.nodemailer” : {
    “service”: “Gmail”,
    “auth”: {
        “user”: “your Gmail address”,
        “pass”: “your Gmail password”
    }
}

现在您可以测试您的电子邮件了！打开命令面板并输入MJML: Send Email。扩展程序会提示您输入电子邮件的主题行和收件人列表。

完成必要的步骤后，请检查您的收件箱，您应该会看到一封来自您自己的新创建的电子邮件！

最后，使用该命令MJML: Export HTML从 MJML 文件生成 HTML 文件。请跟踪您创建的 HTML 文件，因为我们稍后需要将其上传到 Mailchimp。

创建登录页面：开始使用 Mailchimp

准备好电子邮件后，请前往Mailchimp并创建一个免费帐户。

Mailchimp 提供慷慨的免费套餐，每月可容纳 2,000 名订阅者和 12,000 封电子邮件。您还将获得一个免费的落地页来收集注册信息。

免费套餐的一个小缺点是您的所有电子邮件都会有 Mailchimp 页脚，但它们相当不显眼。

让我们从构建一个免费的落地页开始。点击控制面板上的“创建”按钮，然后选择“落地页”。Mailchimp 提供了一些很棒的模板，您可以根据自己的喜好进行微调，添加新闻稿的名称和描述。

自定义落地页模板后，您可以选择链接自己的 URL，或通过 Mailchimp 免费创建一个。Mailchimp URL 的一部分是随机生成的，但您可以在最后添加自定义文本，例如https://mailchi.mp/[randomly-generated]/[your-text]。

您可以与您的朋友以及您最喜欢的社区分享和宣传此链接。

发送电子邮件

最后，让我们发送您的第一封电子邮件。

在 Mailchimp 控制面板上，点击“创建邮件”按钮。接下来，点击“电子邮件”，并按照步骤创建新邮件。您可以上传创建简报时生成的 HTML 文件。

完成这些步骤后，您可以立即发送新闻稿，也可以安排在将来发布。

就这样！现在是时候扩大你的订阅者名单了！

感谢您的阅读。敬请关注我们的每周新闻通讯Source。没有垃圾邮件，没有废话。快速获取开发者所需的信息。